Swift Components Tour – Gestures

In this lesson

This chapter of the Swift Components Tour is gestures! Learn how to give your app some extra control without clogging up the UI.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world, Kyle here with the next stop on the Swift Components Tour, Gestures. The UI”Blank”GestureRecognizers are a group of classes that can add a lot of specialized user interaction to your app. Take the Safari app for example, you use a lot of these gestures in that app. Some of those gestures that you use are swiping to go forward and back, panning to scroll up and down and side to side, and pinching to zoom in and out. There’s also a double tap gesture to focus in on the tapped element in the HTML. There’s a lot of ways to use the different gestures but I’m going to keep it fairly general here since this will be just a broad overview of gestures as a whole and not really specific uses for each gesture.


What I’ve got going on here is this blue square in the center of the screen and you see at the bottom that there are some instructions on what we can do with this blue square. We can tap it to change the color, and no the square is not a UIButton, I’m using a UITapGestureRecognizer. We can pinch to resize. In the simulator I am holding the option button to simulate two fingers on the screen. Then you click to place two fingers onto the screen. Moving them closer or further away from each other to resize the square. The next thing we can do is pan to drag. This is just a single click, holding down on the square and moving it around the screen. We can also rotate the square using a rotate gesture. Again, I’m holding option here to bring up two fingers and then if you hold Shift, you can pan the two fingers around on the screen. Now that I have that over the square, I’m letting go of Shift, clicking and rotating. We can rotate this however much we want. Let’s leave it at a completely different angle than what it started at.


This last gesture here, long press to reset. A long press gesture recognizer is going to do what you think it does, though it’s not always one of the more common ones. You tap on the item and hold it down until the long press gesture recognizer has recognized that you’re pressing long enough on that item to perform that action. That action was to just reset. Even if we only do one gesture, say tapping to change the color, we can long press again to reset that.


There are a few other gesture recognizers that I’m not using here including swiping.  As well as support of customization on the speed or the number of fingers, or the length of time that you are performing these gesture before the recognizer will actually recognize that that gesture was performed and then run the code that it’s told to run with it. More on that in just a second. Since we’re on the storyboard here, we’ll go over that first.


As usual, the view here looks almost exactly like it does in the app.  The blue square is just a UIView with a blue background and some constraints tying it from the left top right bottom of the screen as well as width and height constraints. This instructions label at the bottom is constrained to the bottom margin of the screen as well as its X position aligned with the center of the blue square.


Up that this info bar, I’m not really sure what it’s called, you might have seen there are some icons for the different gesture recognizers that we have on this screen. When you drag a gesture recognizer like you can any other UI item down here onto a scene in the storyboard. Since you can’t actually see the recognizer, it will just add these icons up here to show you that there is a recognizer on the screen. If you click on them there is a little bit of customization over here. One thing that is hard to tell is which view these recognizers are on. I guess it’s just something you have to remember, when you drag them onto the screen. All of these gesture recognizers, the ones that we went through with the instructions and in the app,  have all been added to this blue square. The code is really where the interesting stuff is going on so let’s’ walk through that.


For our properties, I have a property for each of the constraints that I talked about that are on the blue square, width and height, left right top and bottom. We can customize with the pinch to resize the width and height and then the panning with the top bottom left and right constraints. I also have a reference to that blue square so that we can interact with it in the code. In viewWillAppear, I am calling this method calculateSquareConstraintCentered. All that is doing is taking into account the height and width in the square and centering it onto the screen. The we call self.square.layoutIfNeeded to readjust the placement on the screen if it does not match the constraints that we just calculated.


Below that is how we are running code from a UIGestureRecognizers’ gestures. The syntax may look familiar to the target action of a UIButton when referencing it from a storyboard. You can see here we have the IBAction func, name of the function and then a sender parameter. In this case the sender is the UIGesture recognizer. We don’t have a property referenced to the gesture recognizer up here in the property declaration, but we do get a reference when the target action for the gesture recognizer is called in the form of this sender object. We can actually cast that as the specific gesture recognizer if we need to. We are fine with this first one called longPressed leaving it as a general any object.


I’m going to run quickly through what we’re doing with these gestures to make sure that we are working with the square view correctly. Although it’s not that important to UIGestures, it is interesting. On the long pressed gesture, we’re animating over one second, setting the width and height to 100, which is what the square is at when the view first appears. We are setting the rotation to zero so that it rotates back to it’s original rotation. Setting the background color back to blue color. Then, again, centering the square in the center of the screen.


In the action for the pinch gesture, what we are working with is a scale property from the UIPinchGestureRecognizer. From that we are determining a new size based on a previous size and recalculating the top bottom left and right constraints so that the center of the square stays where it was. Otherwise, as we resized only the top left of the square would stay where it was. We would run into issues with the constraint constants not matching up with the height and width constraints, which would then output a lot more warnings like this into the console.


In the pan square method, we are using a method on the UIPanGestureRecognizer called translation in view and passing in self.view. We’re just getting the new coordinates that your finger has moved to on the screen in that view. Then adjusting the top bottom left and right constraints according to that.


In the rotated square method, obviously is the easiest one to deal with, since we just have to perform a CGAffineTransformation and in this case a rotation using a UIRotationGestureRecognizers rotation property. This transformation will do all of the rotation work on the view for us.


In this tap square method, when you tap the square, it will randomize the color. We’re getting a random CGFloat between zero and one and then using that for RGB values of a UIColor and setting the alpha to one.


I hope that provides you with a nice introduction to UIGestureRecognizers. That’s for watching!

Additional Info

Register to get access to additional resources and info.