Color Mode


    Language

UIGestures

December 20, 2017

Gestures are the magic behind those accelerators that can make your app more user friendly. We will now show a few examples on how to implement them in your code.

Swipe Gestures

You can have many accelerators build with the swipe gesture as it is discrete and you can have many combinations as you can select the direction of the swipe and the number of touches required. Even if we have the possibility to set up a high number of touches, a maximum of 3 is still user friendly. You should also make sure you keep some sort of consistency when defining the gestures, if swipe right with 2 fingers goes to the previous conversation in a messaging app, swiping left with 2 fingers should probably go to the next conversation.

Using the storyboard

  1. Search for the swipe gesture in the objects library
  2. Drag it into your view controller
  3. Set the view of your choice as a delegate to the swipe gesture recognizer (by pressing “Ctrl” on the keyboard and click-drag from the view to the swipe gesture recognizer and selecting Outlet Collections - gestureRecognizers )
  4. Setup your gesture recogniser by selecting the direction and the number of touches required

  1. Connect your Swipe Gesture Recognizer to the code by pressing “Ctrl” in your keyboard and click-drag from the gesture recognizer to the ViewController.
  2. Chose the connection to be an action, name your action and implement the functionality you would want for this specific gesture. In this example we are simply printing in the console to test it all works well.

Remember that your view should be user interaction enabled. You can either do that from code by setting view.isUserInteractionEnabled = true, or from the storyboard editor - Attributes Inspector - making sure that the User Interaction Enabled is checked.

Programmatic Swipe Gesture Recognizer

You can also make gesture recognizers fast only from the code as shown below:

let swipeGestureRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(viewSwipedToLeft))
swipeGestureRecognizer.numberOfTouchesRequired = 2 //The number of fingers required (default is 1)
swipeGestureRecognizer.direction = .left // The direction of the swipe (default is right)
view.addGestureRecognizer(swipeGestureRecognizer)

Other gestures

Besides the one mentioned above you can also take advantage of other gestures like:

Tap - UITapGestureRecognizer

let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(viewTapped))
tapGestureRecognizer.numberOfTapsRequired = 2 // The number of taps required (default is 1)
tapGestureRecognizer.numberOfTouchesRequired = 2 // The number of fingers required (default is 1)
view.addGestureRecognizer(tapGestureRecognizer)

Pinch - UIPinchGestureRecognizer

let pinchGestureRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(viewPinched))
view.addGestureRecognizer(pinchGestureRecognizer)
// You can get the scale factor relative to the points of the two touches on the screen (pinchGestureRecognizer.scale)
// and the velocity of the pinch in scale factor/second (pinchGestureRecognizer.velocity)

Rotation UIRotationGestureRecognizer

let rotationGestureRecognizer = UIRotationGestureRecognizer(target: self, action: #selector(viewRotated))
view.addGestureRecognizer(rotationGestureRecognizer)
// You can get the rotation in radians (rotationGestureRecognizer.rotation)
// and the velocity of the rotation in radians/second (rotationGestureRecognizer.velocity)

Pan (dragging) - UIPanGestureRecognizer

let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(viewPanned))
panGestureRecognizer.maximumNumberOfTouches = 2 // Max number of fingers required (default is NSUIntegerMax)
panGestureRecognizer.minimumNumberOfTouches = 2 // Min number of fingers required (default is 1)
view.addGestureRecognizer(panGestureRecognizer)

Screen edge pan - UIScreenEdgePanGestureRecognizer

let screenEdgeGestureRecognizer = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(edgePanGestureRecognized))
screenEdgeGestureRecognizer.edges = .left //The acceptable starting edges for the gesture (UIRectEdge)
view.addGestureRecognizer(screenEdgeGestureRecognizer)

Long press - UILongPressGestureRecognizer

let longPressGestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(longPressRecognized))
longPressGestureRecognizer.minimumPressDuration = 2 //The minimum period fingers must press on the view (in seconds, default is 0.5 seconds)
longPressGestureRecognizer.numberOfTouchesRequired = 2 // The number of fingers that must be pressed on the view (default is 1)
longPressGestureRecognizer.numberOfTapsRequired = 0 // The number of taps required (default is 0)
longPressGestureRecognizer.allowableMovement = 10 // The maximum movement of the fingers on the view measured in points (default is 10 points)
view.addGestureRecognizer(longPressGestureRecognizer)

Links/Resources

  • Apple - Gesture guidelines
  • Apple - Handing pinch gestures documentation

Article Photo by Daniel Korpai

iosacceleratorsgestures

Author

Roxana Jula

Roxana Jula

Senior Mobile Developer

👩🏼‍💻 Augmented Reality and Future Tech Enthusiast

You may also like

November 7, 2024

Introducing Shorebird, code push service for Flutter apps

Update Flutter apps without store review What is Shorebird? Shorebird is a service that allows Flutter apps to be updated directly at runtime. Removing the need to build and submit a new app version to Apple Store Connect or Play Console for review for ev...

Christofer Henriksson

Christofer Henriksson

Flutter

May 27, 2024

Introducing UCL Max AltPlay, a turn-by-turn real-time Football simulation

At this year's MonstarHacks, our goal was to elevate the sports experience to the next level with cutting-edge AI and machine learning technologies. With that in mind, we designed a unique solution for football fans that will open up new dimensions for wa...

Rayhan NabiRokon UddinArman Morshed

Rayhan Nabi, Rokon Uddin, Arman Morshed

MonstarHacks

ServicesCasesAbout Us
CareersThought LeadershipContact
© 2022 Monstarlab
Information Security PolicyPrivacy PolicyTerms of Service