In this article , we will see working principles of UIGestureRecognizer and how to make a custom gesture like Instagram “love post” action. After reading this article you will be able to make your own unique gesture recognizers with some easy steps.
First of all , we should look into how UIGestureRecognizer works. As you know , there are some built in gesture recognizers that are popular among any mobile phone user. The most popular gesture is the tap gesture. In every iOS app it is used to gather input from user.
Let’s guess how Apple implemented tap gesture. Generally , only one finger is used to complete this gesture. User should touch to view element and release her/his finger from screen. If touch-end location is in the bounds of view , then tap gesture should succeed. For detecting screen touch touchesBegan(_:with:) , then for detecting finger-release touchesEnded(_:with:) can be used. In my opinion it has been implemented like this :
There are two types of gestures which are discrete and continuous gestures. Continuous gestures have not a specific pattern such as panning on a view or drawing on screen. In discrete gestures there is a pattern like “Zorro’s Z ” sign or Instagram’s double-tap to like gesture.
Instagram’s Double-Tap-To-Like Gesture
Besides heart icon at the bottom left corner , you can like a post by double tap on it . Then there will appear a beautiful heart animation. For more realistic simulation ; I have taken a screenshot of a post in Instagram in order to make a background view. I am using iPhone 7 plus. So if you try the demo in different screen dimensions , background image would not fit into screen. I want to apologize because of that.
Let’s get into coding. Firstly , we will create a new subclass of UIGestureRecognizer called “LikeGestureRecognizer”. Then add the skeleton functions (touches began , moved, ended and cancelled). Now , our class should be look like :
From ViewController we may use the gesture recognizer like :
However “handleLikeGesture” is not called for now. Because , we have not implemented gesture’s state setters yet. Let’s add them.
It is cool. Now , whenever we touch to screen ; “handleLikeGesture” will be called. So , we should add the Instagram’s “like” gesture’s specific code. What we expect ? If we touch screen one after another serially with one finger , gesture should succeed . Otherwise it should fail. How can we do it ? We should have a latest touch time holder. Then check whether time between current touch time and latest touch time is smaller than time threshold value.
Other than that ; we will hold current status value which have “unknown , fail , success” states. Let’s write the final version of our custom gesture.
For final thoughts , it is very straight forward to implement your custom unique gesture recognizer. One simple suggestion from me is that your application should never contains complex gestures. Otherwise you may lose your users. If you add complex gesture recognizers like drawing a tree or drawing a letter shape, your users do not want to make them. Mobile phone users want simple , easily-understood , good looking apps. So your app should be self explanatory.
One more thing. I have not shown the “heart” animation that is used in this article. Because it is not the subject of custom gesture recognizers. But , for a clue ; I have used core animation with grouping feature. You may see it if you download the project.
Thanks for reading . Please be free to ask anything about the article. I will be glad to answer them. Also , your reviews are very valuable to me .
Full project :