This is how i figured out how Instagram zoom works — Swift 4.2

Photo by Kerde Severin on Unsplash

We find features by accident, right? That’s what happened to me this afternoon.

I’m learning Swift since a quite bunch of time (1/2 months), usually, I like to experiment and try to replicate “big apps/websites” features. That it’s quite easy when you want to replicate something on the web, as a web developer you have the browser dev tools that show you the source code, but what when you want to do the same with an app?

Today I was playing around with GestureRecognizers and I was trying to have the “swipe back gesture” recognized on the half right of the screen when I accidentally dragged away from the screen my `view`. Then I realized that it was quite similar to Instagram’s photos zoom gesture.

Instagram pinch/drag

So I thought that it could have been a great idea to try to replicate it…

Below the boilerplate that we will use to reproduce the pinch/drag effect

As you can see it’s quite simple. Now we need to set up the UIImageView that will contain our image. In small projects like this, I usually write a function that setup my component and another helper function to setup constraints:

Now we can get deeper in the core of our ViewController

Inside the viewDidLoad method, we need to write a bunch of code, first of all, we should implement the setupImageView function, after that, we need to write our GestureRecognizers that will be of type pinch and pan.

That’s how our viewDidLoad should look like after these changes:

Ok, it’s time to implement our functions, handlePanGesture and handlePinchGesture. We do that in an extension of our ViewController, that because we need to extend it as UIGestureRecognizerDelegate so we can perform 2 gestures simultaneously thought the shouldRecognizeSimultaneouslyWith method.

So here we are, our ViewController should now look like this:

The final result

Now if you run your app you should can play with the imageView in the center of the screen like you do with Instagram posts.

If you enjoyed what you’ve read consider leave a clap or start following me for more content in the future and make sure to check out my Github Profile and Instagram 😃