This is how I figured out how Instagram zoom works

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: