In this iOS application development tutorial we are going to implement the gesture recognizers. As you may already know iOS supports a large variety of gestures which offer a great control of the applications and a great user experience.
Let’s get started!
First of all you need to create a new Xcode Single View Application:
Then, click Next and you will be prompted to another screen asking you for the project settings. Type in the first field (“Product name”) the name of your project and click Next.
Be sure that the language is set in “Swift”.
Designing the screen
Now click on the “Main.storyboard” file and drag 6 UIViews on the view. Arrange the views as shown in the picture below. When you arrange the UIViews add a UILabel in each view and set the text of each label as show in the picture below.
Let’s write the code.
It is time to edit the implementation file (in our case “ViewController.swift” ).
Add the following code in the “class ViewController: UIViewController “ block in order to declare some of the variable that we will need to use in our application.
On lines 2 – 7 we declare the UIViews that we arranged previously on the screen.
On line 8 we declare a variable (lastRotation)that we will need to use for the implementation of the rotation gesture.
On lines 9 – 14 we declare a gesture recognizer object for each view.
Note: In Swift we declare with the let keyword the constants, which means that its value cannot change while our application runs. The var keyword declares ordinary variables.
When you have declared the main variables that our application need, add the following code on the viewDidLoad method.
On lines 3 – 8 we set the target of the gesture recognizers for each view. The target, is the method that will be called when the gesture have been done on each view.
On lines 9 -14 we add the gesture recognizers to the views.
On lines 15 – 22 we set the userInteractionEnabled property of each view to true and the multipleTouchEnabled property of the views who have gestures that need multiple touches (rotateView and pinchView) to true.
Now, we have to code the methods called for each gesture recognizer (the target methods that we set on lines 3 – 8 ).
Add the following code:
These three methods do pretty much the same thing. Each method presents an alert every time a gesture has been done on the correspondent view.
So, the tappedView() method presents an alert every time the user taps the tap view, the swipedView() method presents an alert every time the user swipes the swipe view and longPressedView() method presents an alert every time the user long presses the long press view.
The code for the other two gestures (rotate and pinch ) is a bit trickier.
Add the following code for the rotate gesture:
This method contains the sender:UIRotationGestureRecognizer parameter. The sender parameter (of type UIRotationGestureRecognizer ) has the value of the gesture recognizer from which this method has been called (in our case rotateRec).
On line 2 we declare the variable lastRotation.
On line 3 we bring the rotateView to front.
Next, on the if we check if the gesture has ended and if it has not ended we set the rotation of the view.
On lines 8 – 10 we calculate the transform of the rotate view and on line 10 we set this transform to the rotate view.
On line 12 we set the lastRotation as the current rotation of the rotation gesture recognizer.
Now add the following code for the pinch gesture:
As on the previous method on line 1 we bring the pinch view to front. Then we set the transform of the pinch view and we set the scale of the pinchRec to 1.
Now it is time to code the pan (drag) gesture. Add the following code:
On line 2 we bring the drag view to front (as on the previous methods).
Then we declare the variable translation and we assign to it the value sender.translationInView(self.view). When we do this, we set the center property of the sender.view object (panRec) to the new center that we calculate ( CGPointMake(sender.view.center.x + translation.x, sender.view.center.y + translation.y) ) and we set the translation to the sender (panRec).
And we are done with the coding process!
Back to the screen design.
Now go back to the “Main.storyboard” file. Choose the view controller and link each UIView declared with the correspondent view as shown in the picture below.
Now you can run the app on simulator or your own device and test the gestures.
Also, please check out my iOS application on psdapps.gr.
Avocarrot is a specialized mobile ad network that enables app developers create a new app revenue stream that fully respects your user experience. You can test-drive the Avocarrot iOS SDK in less than 10 minutes or see examples of real native ad integrations here.