How to Add Multiple Gesture Recognizers to UI View?

In iOS app development, gestures play a very influential role in creating an engaging user interface. It basically contains taps, pinches, pans, or rotations for user input in navigation. Gesture functionality allows users to move, click or tap on their preferred area of the iOS mobile app screen.

 

Many iOS developers often face difficulty in adding multiple gesture recognizers to UIView. Gesture recognizers are a powerful and effective tool for adding user gesture functionality into the iOS app like tap, pinch, swipe, slide, and rotate. 

 

It enables users to execute actions such as triggering animations or view changes on the app screen. Hence, it is important to accurately add multiple gesture recognizers to UIView to engage users. Since we are an expert iOS app development company, we know how to add multiple gesture recognizers to UIView effectively. In this blog, we will tell you how to do it. 

So let’s get started

Overview of UIGesture Recognizer in iOS Development

Before you start implementing multiple gesture recognizers to UIView, you should know why [UIGestureRecognizer] is a useful tool and how to utilize it. 

 

Prior to this functionality, it was really difficult to add multiple gesture recognizer features in iOS app development. For instance, if there is a need for detecting a swipe, then iOS app developers have had to register for notifications such as [touchesBegan], [touchesMoved], and [touchesEnded] for each touch in [UIView]

 

This technique creates subtle bugs and inconsistency across iOS applications. It happens because iOS developers have had to write a little different code to recognize those touches. And therefore, adding multiple gestures takes a lot of work which increases time in the iOS development

 

Then Apple brought changes in Xcode to support iOS developers in adding feature features to iOS apps. With the current update, developers can easily create feature recognizer functionality in iOS mobile applications that detect common gestures. For example rotations, swipes, pans,  taps, long presses, and pinches. 

 

This updated feature helps developers in writing less code but also enables the app to work efficiently.  Hence, adding multiple gesture recognizer features to UIView in iOS app development is quite easier than before. 

 

Now, let’s start how to add multiple gesture recognizers to UIView in iOS apps. 

 

There are Seven Types of Gestures That Support iOS

  1. Tap Gesture Recognizer: Performing an action for tapping the UIObject.
  2. Pinch Gesture Recognizer: Used when need the zoom in and zoom out feature
  3. Rotation Gesture Recognizer: To perform the rotation on UIObject
  4. Swipe Gesture Recognizer: Four kinds of swipe gestures i.e. Top, left. Bottom, right
  5. Pan Gesture Recognizer: Help when we need to drag the UIObject anywhere on UIWindow
  6. Screen Edge Pan Gesture Recognizer: Special gesture used for 3-D touch
  7. Long Press: Generally used in the scenario when pressing the UIObject will pop up certain options

Here is a simple declaration of the UIViewController with a single UIImageView in it

class GesturePlayingController: UIViewController {

    let myImageView: UIImageView = {

        $0.contentMode = .scaleAspectFill

        $0.image = UIImage(named: "testImage")

        $0.isUserInteractionEnabled = true
 
       return $0

    }(UIImageView())      

    override func viewDidLoad() {

        super.viewDidLoad()
    }

 

We have declared the simple UIImageView with lazy initialization with its user interaction property enabled so that we can add multiple gestures to it.

Since no rocket science has been used so far, now we can add the gesture recognizer one by one to imageView. 

func addGesture() {

        let pan = UIPanGestureRecognizer(target: self, action: #selector(panImage))

        let rotate = UIRotationGestureRecognizer(target: self, action: #selector(handleRotation))        

        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(pinchImage))

        myImageView.addGestureRecognizer(pinch)

        myImageView.addGestureRecognizer(pan)

        myImageView.addGestureRecognizer(rotate)

    }

@objc func panImage(_ recognizer: UIPanGestureRecognizer) {    

}
 
@objc func pinchImage(_ recognizer: UIPinchGestureRecognizer) { 

}

@objc func handleRotation(recognizer:UIRotationGestureRecognizer){

}

While adding the gesture recognizer to UIImageView, we need to give the selector that generally functions when the particular types of gestures are being performed.

Let us start with a simple PAN Gesture Recognizer

For moving the imageView in UIView, we need to set the translation from its initial position.

For example 

  @objc func panImage(_ recognizer: UIPanGestureRecognizer) {

        let translation = recognizer.translation(in: view)

        guard let view = recognizer.view else { return }

        view.center = CGPoint(x: view.center.x + translation.x, y: view.center.y + translation.y)

        recognizer.setTranslation(CGPoint.zero, in: view)
    }

 

After setting the translation, reset the translation to zero so that the next time when you perform the PAN on the imageView, it should start with zero.

Similarly, we can perform the PINCH and ROTATION Gesture on imageView.

@objc func pinchImage(_ recognizer: UIPinchGestureRecognizer) {

        guard let view = recognizer.view else{return}

        view.transform = view.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)

        recognizer.scale = 1.0

    }

    @objc func handleRotation(recognizer:UIRotationGestureRecognizer){

        guard let view = recognizer.view else {return}

        view.transform = view.transform.rotated(by: recognizer.rotation)

        if recognizer.rotation == 0 { return }

        radian = recognizer.rotation

        recognizer.rotation = 0

    }

Conclusion

Adding multiple gesture recognizers to UIView in iOS app development is now easier and smoother than before. Developers now have to follow simple steps and write less code to implement the features. However, with growing innovations in UI development, users now expect more attractive and seamless features in UI. 

 

Therefore, to ensure you build an iOS app with intuitive UI features, you should try to create the app with an expert. And MobileCoderz is the top iOS app development company that has the industry’s most qualified and experienced iOS developers who can build really innovative and engaging UI features for your iOS mobile app.

Related Article

  • Mobilecoderz Awarded as India’s Best iPhone App Development Company by Clutch
  • How Much Does It Cost to Develop a SaaS Application?
  • Mobilecoderz recognized as the Top App Development Company in Saudi Arabia by GoodFirms
Let me Pop up