0

I am currently loading images from my server. The images are plenty depending on the number of images it return. I have been able to display these images successfully and I can scroll down to view all images. Now my problem is I want a way which I can click on a specific image i will be able to zoom it. I have shared my code below:

//Declaration of variables
var albumID: String?
var imagePath: String?
var path: String?

var getClickImage = UIImageView()
var zoomscrollV = UIScrollView()
var imageArray = [String]()

//view did load
override func viewDidLoad() {
    super.viewDidLoad()

    setUpViewsAlbumPhotos()
    zoomscrollV.delegate = self
    if !CheckInternet.Connection(){
        showAlert(title: "No Internet", message: "Please connect your device to an internet connection")
    }else{
        fetchPhotos(albumID: albumID)
    }
}

//viewDidAppear
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    zoomscrollV.isHidden = true
    zoomscrollV.frame = CGRect(x:0, y:0, width:self.view.frame.width, height:self.view.frame.height - 50)
    zoomscrollV.minimumZoomScale=1
    zoomscrollV.maximumZoomScale=10
    zoomscrollV.bounces=false

    self.view.addSubview(zoomscrollV)

    getClickImage=UIImageView()

    getClickImage.frame = CGRect(x:0, y:0, width:zoomscrollV.frame.width, height:zoomscrollV.frame.height)
    getClickImage.backgroundColor = .black
    getClickImage.contentMode = .scaleAspectFit
    zoomscrollV.addSubview(getClickImage)
}

//This code makes an async call to download images and details from the server



    let async_call = URL(string: "\(String.api_albumPhotos)\(albumID ?? "")")

        let request = NSMutableURLRequest(url: async_call!)
        request.httpMethod = "GET"
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")
        request.addValue("application/json", forHTTPHeaderField: "Accept")

        let task = URLSession.shared.dataTask(with: request as URLRequest){
            data, response, error in
            if error != nil {
                print("error is:: \(error!.localizedDescription)")
                DispatchQueue.main.async {
                    self.showAlert(title: "Error", message: "Sorry try again later")
                    self.stopActivityLoader()
                }
                return
            }


            do {
                let myJSON = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers) as? NSDictionary

                if let parseJSON = myJSON {

                    var responseCode: String!
                    var message: NSArray!

                    responseCode = parseJSON["responseCode"] as! String?
                    if responseCode == "200" {
                        DispatchQueue.main.async {
                            self.stopActivityLoader()
                            message = parseJSON["message"] as? NSArray
                            self.path = parseJSON["path"] as? String
                            if let message = message {
                                let totalMessage = message.count
                                let viewHeight = self.view.frame.height
                                var scrollHeight = 0
                                var contentViewTopConstraint: CGFloat = 20
//                                self.preference.set(parseJSON, forKey: UserDefaultKeys.albums.rawValue)
                                for obj in message{
                                    if let dict = obj as? NSDictionary {
                                       self.imagePath = dict.value(forKey: "path") as? String
                                        let imageID = dict.value(forKey: "id") as? String


                                        let albumThumbnail = photos()
                                        self.scrollView.addSubview(albumThumbnail)
                                        albumThumbnail.translatesAutoresizingMaskIntoConstraints = false
                                        albumThumbnail.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor).isActive = true
                                        albumThumbnail.topAnchor.constraint(equalTo: self.scrollView.topAnchor, constant: contentViewTopConstraint).isActive = true
                                        albumThumbnail.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor).isActive = true
                                        albumThumbnail.heightAnchor.constraint(equalToConstant: 150).isActive = true
                                        albumThumbnail.isUserInteractionEnabled = true
                                        albumThumbnail.contentMode = .scaleAspectFit
                                        let touchRec = UITapGestureRecognizer(target: self, action: #selector(self.myImageTapped(_:)))
                                        albumThumbnail.addGestureRecognizer(touchRec)


                                        if let path = self.path{
                                            if let imagePath = self.imagePath{
                                                let strippedPath = path.replacingOccurrences(of: "\\", with: "")
                                                let strippedImagePath = imagePath.replacingOccurrences(of: "\\", with: "")
                                                print("\(strippedPath)\(strippedImagePath)")
                                                albumThumbnail.sd_setImage(with: URL(string: "\(strippedPath)\(strippedImagePath)"), placeholderImage: UIImage(named: "default_profile"), options: [.continueInBackground, .progressiveDownload])
                                                if let wrapped = self.path {
                                                    self.imageArray.append("\(strippedPath)\(strippedImagePath)")
//                                                    print(self.imageArray.append(wrapped))
                                                }

                                            }
                                        }

                                        contentViewTopConstraint = contentViewTopConstraint + 170
                                    }
                                }
                                scrollHeight = totalMessage * 170
                                if totalMessage <= 1 {
                                    self.scrollView.contentSize.height = viewHeight + 20
                                }else{
                                    self.scrollView.contentSize.height = CGFloat(scrollHeight)
                                }

                            }
                        }
                    }else{
                        //Show alert
                        DispatchQueue.main.async {
                            self.showAlert(title: "Error", message: "Sorry could not update album. Try again")
                            self.stopActivityLoader()
                        }
                    }
                }
            }catch{
                print("you:: \(error.localizedDescription)")
                //Show alert
                DispatchQueue.main.async {
                    self.showAlert(title: "Error", message: "Sorry could not update album. Try again")
                    self.stopActivityLoader()
                }
            }
        }
        task.resume()
    }

    @objc func myImageTapped(_ sender: UITapGestureRecognizer) {

        zoomscrollV.isHidden = false
        let myImage = imageArray[(sender.view?.tag)!]
        print("myImage \(myImage)")
        // RESPECTIVE IMAGE
        getClickImage.image = UIImage(named: myImage)

        let closeButton: UIButton = UIButton(type: .custom)
        closeButton.frame = CGRect(x:40.0, y:self.view.frame.height - 50, width:self.view.frame.width - 80, height:50.0)
        closeButton.addTarget(self, action: #selector(self.closeZoom), for: .touchUpInside)
        closeButton.setTitle("CLOSE ZOOM", for: .normal)
        closeButton.setTitleColor(UIColor.white, for: .normal)

        // CLOSE BUTTON
        self.view.addSubview(closeButton)

    }``

    @objc func closeZoom(sender: AnyObject) {
        zoomscrollV.isHidden = true
        zoomscrollV.setZoomScale(1.0, animated: false)
        sender.removeFromSuperview()
    }

    //SCROLLVIEW DELEGATE
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {

        return getClickImage

    }
chevi99
  • 123
  • 1
  • 2
  • 17

1 Answers1

0

========================== Edit Jan 24 ============================

CONVERT URL TO IMAGE

@objc func myImageTapped(_ sender: UITapGestureRecognizer) {

    zoomscrollV.isHidden = false
    let myImageURL = imageArray[(sender.view?.tag)!]

    if let url = URL( string: myImageURL)
    {
         DispatchQueue.global().async {
         if let data = try? Data( contentsOf:url){

             DispatchQueue.main.async {

                let myImage = UIImage( data:data)

                print("myImage \(myImage)")
                // RESPECTIVE IMAGE
                getClickImage.image = UIImage(named: myImage)

                let closeButton: UIButton = UIButton(type: .custom)
                closeButton.frame = CGRect(x:40.0, y:self.view.frame.height - 50, width:self.view.frame.width - 80, height:50.0)
                closeButton.addTarget(self, action: #selector(self.closeZoom), for: .touchUpInside)
                closeButton.setTitle("CLOSE ZOOM", for: .normal)
                closeButton.setTitleColor(UIColor.white, for: .normal)

                // CLOSE BUTTON
                self.view.addSubview(closeButton)


             }
         }
     }
 }

===============================================================

On image click, U have create scrollview and add respective image as subview, then zoom will work out.

var getClickImage = UIImageView()
var zoomscrollV = UIScrollView()

override func viewDidLoad() {
        super.viewDidLoad()
zoomscrollV.delegate = self
}

override func viewDidAppear(_ animated: Bool) {
        zoomscrollV.isHidden = true
        zoomscrollV.frame = CGRect(x:0, y:0, width:self.view.frame.width, height:self.view.frame.height - 50)
        zoomscrollV.minimumZoomScale=1
        zoomscrollV.maximumZoomScale=10
        zoomscrollV.bounces=false

        self.view.addSubview(zoomscrollV)

        getClickImage=UIImageView()

        getClickImage.frame = CGRect(x:0, y:0, width:zoomscrollV.frame.width, height:zoomscrollV.frame.height)
        getClickImage.backgroundColor = .black
        getClickImage.contentMode = .scaleAspectFit
        zoomscrollV.addSubview(getClickImage)
}


// ON CLICKING IMAGE ACTION
@objc func myImageTapped(_ sender: UITapGestureRecognizer) {

    zoomscrollV.isHidden = false

    // RESPECTIVE IMAGE
    getClickImage.image = BG_CARD_IMGS[(sender.view?.tag)!] 

    let closeButton: UIButton = UIButton(type: .custom)
    closeButton.frame = CGRect(x:40.0, y:self.view.frame.height - 50, width:self.view.frame.width - 80, height:50.0)
    closeButton.addTarget(self, action: #selector(self.closeZoom), for: .touchUpInside)
    closeButton.setTitle("CLOSE ZOOM", for: .normal)
    closeButton.setTitleColor(UIColor.red, for: .normal)

    // CLOSE BUTTON 
    self.view.addSubview(closeButton)

}

@objc func closeZoom(sender: AnyObject) {
    zoomscrollV.isHidden = true
    zoomscrollV.setZoomScale(1.0, animated: false)
    sender.removeFromSuperview()
}

//SCROLLVIEW DELEGATE
func viewForZooming(in scrollView: UIScrollView) -> UIView? {

    return getClickImage

}

OUTPUT

enter image description here

McDonal_11
  • 3,935
  • 6
  • 24
  • 55
  • In your code what does BG_CARD_IMGS mean? I'm getting use of unresolved identifier. – chevi99 Dec 09 '18 at 23:12
  • That is your image array. How u r showing images in scrollview? If you click the third one, getClickImage.image = YourImage [third Image] , If you click the fourth one, getClickImage.image = YourImage [fourth Image] , – McDonal_11 Dec 10 '18 at 04:34
  • The images that I'm displaying is through URL. So i created an empty array like var BG_CARD_IMGS = [String]() and in my async call I appended the path to it like self.BG_CARD_IMGS.append(self.imagePath!). But in my myImageTapped function on this line "getClickImage.image = imageArray[(sender.view?.tag)!]". I get this error "Cannot assign value of type 'String' to type 'UIImage?'" – chevi99 Dec 10 '18 at 07:58
  • So, in my understood, You are getting right Image URL on image click. If yes, then, after clicking right image, convert URL to image and store that image in getClickImage.image . – McDonal_11 Dec 10 '18 at 09:36
  • @chevi99 If you are ok with my answer, Kindly upvote and give tick mark. It will be useful for SO followers. – McDonal_11 Jan 21 '19 at 12:21
  • Your didn't throw any error. However the zoom pop up but it has a dark background without picture. Remember I said I am loading the picture from the web which comes like a string. – chevi99 Jan 21 '19 at 14:50
  • Can u give the exact string? I will try once and tell u – McDonal_11 Jan 23 '19 at 12:34
  • I have edited my codes. Please check and help fix for me – chevi99 Jan 24 '19 at 11:48
  • I have added my codes step by step but the issue i'm having is when I click on the image i want to zoom, the pop up works but with a black background with no image in it. – chevi99 Jan 24 '19 at 11:57
  • print("myImage \(myImage)") Here, What u r getting? Can u tell? – McDonal_11 Jan 24 '19 at 12:00
  • I am getting a url to one of the images. And even if I click on a different image it still prints the same image url – chevi99 Jan 24 '19 at 12:44
  • print("TAG VAL_ \((sender.view?.tag)!)") print("ALL_VALUES_IN_IMG_ARR_ \(imageArray)") Check, what values u r getting here? – McDonal_11 Jan 24 '19 at 12:47
  • TAG VAL is 0 and ALL_VALUES_IN_IMG_ARR contains an array of all the image urls – chevi99 Jan 24 '19 at 13:01
  • So, R u clicking 1st Image?? or Any other Image?? – McDonal_11 Jan 24 '19 at 13:01
  • Yes I click on first image and also click on other images to see if the image url which is printing in the console will change – chevi99 Jan 24 '19 at 13:25
  • What I am asking, If u click 4th Image, TAG_VAL printing as 3? If yes, then we go for next – McDonal_11 Jan 24 '19 at 13:30
  • I have updated, **@objc func myImageTapped(_ sender: UITapGestureRecognizer)** this method. Kindly check it and tell me. – McDonal_11 Jan 24 '19 at 13:39
  • print("TAG VAL_ (\(sender.view?.tag))") always prints TAG VAL_ (Optional(0)) – chevi99 Feb 01 '19 at 08:47
  • In your edited codes "getClickImage.image = UIImage(named: myImage)" gives an error which says Cannot convert value of type 'UIImage?' to expected argument type 'String' and also "print("myImage \(myImage)")" prints this: myImage Optional(, {858, 570}) – chevi99 Feb 01 '19 at 12:50
  • Then, use like this: **"getClickImage.image =myImage"** – McDonal_11 Feb 01 '19 at 12:54
  • I get this error when I change it to getClickImage.image = myImage "Reference to property 'getClickImage' in closure requires explicit 'self.' to make capture semantics explicit" and when I applied self.myImage it also throws "Value of type 'albumPhotos' has no member 'myImage'" – chevi99 Feb 01 '19 at 13:03