CODEWITHSUNDEEP
iosswiftuiimage
user3766930
user3766930

Reputation: 5829

How can I display image on fullscreen when user taps on my UIImage in Swift?

I'm displaying a photo in my app and I'm using UIImage for that. So far this is how I'm doing that:

func getDataFromUrl(url:NSURL, completion: ((data: NSData?, response: NSURLResponse?, error: NSError? ) -> Void)) {
    NSURLSession.sharedSession().dataTaskWithURL(url) { (data, response, error) in
        completion(data: data, response: response, error: error)
        }.resume()
}

func downloadImage(url: NSURL){
    getDataFromUrl(url) { (data, response, error)  in
        dispatch_async(dispatch_get_main_queue()) { () -> Void in
            guard let data = data where error == nil else { return }
            print("Download Finished")
            self.requestPhoto.image = UIImage(data: data)
        }
    }
}

and then in viewDidLoad() I'm doing:

if let checkedUrl = NSURL(string: photo) {
        requestPhoto.contentMode = .ScaleAspectFit
        downloadImage(checkedUrl)
    }

That leaves the UIImage filled with my photo, but it's not clickable and it's the size of the original component. Is there a way of adding some kind of listener or something that will display the photo on fullscreen when user taps the UIImage component?

Upvotes: 3

Views: 10454

Answers (2)

lukszar
lukszar

Reputation: 1422

How to enlarge thumbnail photo into fullscreen photo view on iOS?

I resolved this problem by creating new UIImageView object with the same image in it and set the frame of it equal to thumbnail image:

let fullscreenPhoto = UIImageView(frame: thumbnailImage.frame)

Then add image as sublayer into main window:

UIApplication.sharedApplication().windows.first!.addSubview(fullscreenPhoto)

Resizing is made with animation using block:

let windowFrame = UIApplication.sharedApplication().windows.first!.frame
UIView.animateWithDuration(0.4, delay: 0.0, options: .CurveEaseInOut, animations: {

            fullscreenPhoto.frame = windowFrame
            fullscreenPhoto.alpha = 1
            fullscreenPhoto.layoutSubviews()

            }, completion: { _ in
        })

You can find ready solution here: https://github.com/lukszar/SLImageView

There is provided gesture recognizers for show and hide fullscreen. You just need to set your UIImageView to SLImageView class in Storyboard and all magic is done.

Upvotes: 2

Losiowaty
Losiowaty

Reputation: 8006

What you need is to add a UITapGestureRecognizer to your requestPhoto image view. Something like this :

let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: Selector("tapHandler"))

self.requestPhoto.addGestureRecognizer(tapGestureRecognizer)
self.requestPhoto.userInteractionEnabled = true

The last line is needed as UIImageView has it turned of by default, so the touches get canceled.

And then in the same class : 

func tapHandler(sender: UITapGestureRecognizer) {
    if sender.state == .Ended {
         // change the size of the image view so that it fills the whole screen
    }
}

The whole thing could also benefit from a flag saying if the view is fullscreen or not, so that when the user taps the fullscreen image you can reverse the process.

As always, you can read more in the docs.

Upvotes: 2

Related Questions