Inspect An Image Like Apple’s Photo Library In Swift

Ever wonder about how to inspect an image like you did in photo library? If yes, then you’re in the right place, continue your reading. Just imagine if there’s an image with essential information on it but the size is just too small, what will the user think when they found out there’s no way to enlarge the image. I’m pretty sure it’ll be extremely frustrated, maybe even imagining choking the creator 😱😱😱. As always the link of the final project will be in end.
Initial Settings
- Drag a ImageView from Object Library
- Set some constraints
- Drag a image to your project’s assets
- And~ Select the image for your newly created ImageView
- Lastly link it up with your viewController
Now you should have this on your screen. You may close your Stroyboard because we have nothing to do with it anymore.

First: Add A Tap Recognizer On ImageView To Detect User’s Action
We’re going to detect when did the user select the image, so that’s first create a UITapGestureRecognizer on our UIImageView. Put the code down below in viewDidLoad(). (Note: UIImageView’s default value of user interaction is false, that means if you forget to set it to true like I did in the second line, your recognizer won’t give a shit about you)
let recognizer = UITapGestureRecognizer(target: self, action: #selector(inspect(_:)))myImageView.isUserInteractionEnabled = truemyImageView.addGestureRecognizer(recognizer)
You are going to get an error here that states: Use of unresolved identifier ‘inspect’. Don’t panic, it’s only because we haven’t declared the function what we want to do when the user taps the imageView.
Second: Setup The ‘inspect’ Function
Before setting up the function first we need to declare two objects first and add UIScrollViewDelegate
let newScrollView = UIScrollView()let newImageView = UIImageView()
Next let’s setup the ‘inspect’ function. It’s not hard to set it up, but remember to add that ‘@objc’ in front of ‘func’ or you’re gonna get another error~
@objc func inspect(_ sender: UITapGestureRecognizer){
}By now you should have this on your screen. If not you’re doing something wrong~

Then setup the frame of the scrollview which is the whole screen, set the minimumZoomScale and maximumZoomScale as you need, the background color should be black so set it to black. All those should be done in the ‘inspect’ function. If you still don’t know what I’m saying just paste the code below into ‘inspect’.
newScrollView.frame = view.framenewScrollView.delegate = selfnewScrollView.minimumZoomScale = 1.0newScrollView.maximumZoomScale = 6.0newImageView.image = myImageView.imagenewImageView.frame = view.framenewImageView.backgroundColor = .blacknewImageView.contentMode = .scaleAspectFitlet newImageViewRecognizer = UITapGestureRecognizer(target: self, action: #selector(dismissNewImageView))newImageView.addGestureRecognizer(newImageViewRecognizer)newScrollView.addSubview(newImageView)view.addSubview(newScrollView)
You might notice another recognizer was added, for the purpose to exit the inspect mode.
@objc func dismissNewImageView(){newScrollView.removeFromSuperview()}
Third: The Main Function That Make All This Possible
Which is
optional func viewForZooming(in scrollView: UIScrollView) -> UIView?According to Apple’s documentary:
Asks the delegate for the view to scale when zooming is about to occur in the scroll view.
Looks like we’re going to return some UIView that’s we’re going to scale, so let’s return the newImageView we created.
func viewForZooming(in scrollView: UIScrollView) -> UIView? {return newImageView}
By now build and run the project, it should work fine. But there’s still a little flaw as you can see in the image down below. The black background shrinks as we minimize the image.

Fourth: Fix The Background Issue
To fix this little flaw is not that hard, all we have to do is to add it into another UIView with it’s background black like I did down below. Also I added some animation to make it looks smoother when enter inspect mode. And don’t forget to change the target of function ‘dismissNewImageView’ to blackBackgroundView.


P.S. If you wish to have the exact same animation photo library presents, This might help https://medium.com/@kannolee/rebuilding-appstore-card-like-transition-84a73fc7139b
Thank you for your reading, if there’s something I forgot to mention, please don’t hesitate to ask me in the comment section. At last~ Happy coding~ :)
