35

For the app that I am making I want the user to be able to click an image to make it full screen on the app. And then the user to be able to click the now full screen image to make it the original size.

Is this possible?

Any help would be great, I am just a beginner learner on xcode and am interested in knowing how to do this.

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Tessa
  • 403
  • 1
  • 5
  • 13

1 Answers1

102

Here is code which creates a full screen image (with black bars to preserve aspect ratio) when an image is clicked.

To use this, add this code to your ViewController which holds the image.

Then, for your imageView that you want to expand, check the box for userInteractionEnabled in the Attributes Inspector, and add a TapGestureRecognizer to it and set it call imageTapped.

@IBAction func imageTapped(sender: UITapGestureRecognizer) {
    let imageView = sender.view as! UIImageView
    let newImageView = UIImageView(image: imageView.image)
    newImageView.frame = UIScreen.main.bounds
    newImageView.backgroundColor = .blackColor()
    newImageView.contentMode = .ScaleAspectFit
    newImageView.userInteractionEnabled = true
    let tap = UITapGestureRecognizer(target: self, action: "dismissFullscreenImage:")
    newImageView.addGestureRecognizer(tap)
    self.view.addSubview(newImageView)
    self.navigationController?.isNavigationBarHidden = true
    self.tabBarController?.tabBar.isHidden = true
}

func dismissFullscreenImage(sender: UITapGestureRecognizer) {
    self.navigationController?.isNavigationBarHidden = false
    self.tabBarController?.tabBar.isHidden = false
    sender.view?.removeFromSuperview()
}

This code works by creating a new fullscreen image which covers everything else. It has its own TapGestureRecognizer that removes the fullscreen image from its superView (and thus uncovers the original screen).

Update for Swift 3 and 4:

@IBAction func imageTapped(_ sender: UITapGestureRecognizer) {
    let imageView = sender.view as! UIImageView
    let newImageView = UIImageView(image: imageView.image)
    newImageView.frame = UIScreen.main.bounds
    newImageView.backgroundColor = .black
    newImageView.contentMode = .scaleAspectFit
    newImageView.isUserInteractionEnabled = true
    let tap = UITapGestureRecognizer(target: self, action: #selector(dismissFullscreenImage))
    newImageView.addGestureRecognizer(tap)
    self.view.addSubview(newImageView)
    self.navigationController?.isNavigationBarHidden = true
    self.tabBarController?.tabBar.isHidden = true
}

@objc func dismissFullscreenImage(_ sender: UITapGestureRecognizer) {
    self.navigationController?.isNavigationBarHidden = false
    self.tabBarController?.tabBar.isHidden = false
    sender.view?.removeFromSuperview()
}
vacawama
  • 150,663
  • 30
  • 266
  • 294
  • 1
    Does this work for image views inside table view cell?? – WoShiNiBaBa Dec 15 '16 at 05:14
  • 1
    @WoShiNiBaBa, I don't see why not. You should set **userInteractionEnabled** for the `UIImageView` in your cell and add the `UITapGestureRecognizer` programmatically in `cellForRowAt`. – vacawama Dec 15 '16 at 11:51
  • How do you connect your code to an image ? – Badr Filali Apr 01 '17 at 17:12
  • 1
    @BadrFilali, you make my code the target of the `UITapGestureRecognizer` you add to the `UIImageView`. – vacawama Apr 01 '17 at 17:16
  • 7
    for those looking to copy/paste: In `viewDidLoad` add `let pictureTap = UITapGestureRecognizer(target: self, action: #selector(YourClass.yourFunction))` then `yourImageView.addGestureRecognizer(pictureTap)` then `yourImageView.isUserInteractionEnabled = true //also can be set via storyboard` – Tommy K Apr 19 '17 at 23:03
  • Is there any way to easily adjust this code to animate the image opening and closing? – Logan Jahnke Dec 17 '17 at 23:05
  • @LoganJahnke, it would take a bit of work. You'd have to calculate the original location of the image and the final size. In that case, I'd probably fade in the black background while animating the expansion of the image. – vacawama Dec 17 '17 at 23:29
  • This doesn't work in Xcode 9.2 Swift 4. The image is stuck inside the "safe area" no matter what I do I can't get it to fill the full screen – MikeG Feb 01 '18 at 17:10
  • @MikeG. I tried it and it works fine. Are you complaining because there are black bars above and below your picture? That is because `.scaleAspectFit` does that to maintain the correct aspect ratio. Try `.scaleAspectFill` if you don't mind losing part of your image to fill the screen, or `.scaleToFill` if you want the image stretched to fill the screen. – vacawama Feb 02 '18 at 01:08
  • No thats not the issue. There seems to be a set amount of space around the image that won't fill no matter what even when i set the image frame to view.bounds.width and view.bounds.height – MikeG Feb 02 '18 at 15:55
  • I'm having an issue in iOS 11 where the imageView once enlarged is covered by a UINavigationControllerPaletteClippingView and the tap to dismiss isn't working. Does anyone have an idea for fixing this issue? – rharding Apr 25 '18 at 23:55
  • @vacawama thanks it worked for me and so i have upvoted u – Dilip Tiwari Jul 27 '18 at 12:33
  • 2
    ============ for fade # addSubview UIView.transition(with: self.view, duration: 0.25, options: [.transitionCrossDissolve], animations: { self.view.addSubview(newImageView) }, completion: nil) # removeFromSuperview UIView.transition(with: self.view, duration: 0.25, options: [.transitionCrossDissolve], animations: { sender.removeFromSuperview() }, completion: nil) – Hassan Badawi Oct 05 '19 at 07:37