How To Add Multiple Gesture Recognizers To UIView?

  • October 17, 2019
  • By Vijay Singh Raghav

Hello friends, today we will talk about one of the most important features of iOS app development i.e Gesture Recognizers

There are seven types of gestures that support iOS

  • Tap Gesture Recognizer: Performing an action on tapping the UIObject.
  • Pinch Gesture Recognizer: Used when need the zoom in and zoom out feature
  • Rotation Gesture Recognizer: To perform the rotation on UIObject
  • Swipe Gesture Recognizer: Four kinds of swipe gestures i.e. Top, left. Bottom, right
  • Pan Gesture Recognizer: Help when we need to drag the UIObject on anywhere on UIWindow
  • Screen Edge Pan Gesture Recognizer: Special gesture used for 3-D touch
  • 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.

MobileCoderz Contact Us

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.

Also Read: JavaScript vs Dart: A Quick Comparison To Choose Dominating One

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

    }

So far, so good. We’re just applying all the gestures onto the image with the help of which we can move, scale, and rotate the imageView.

MobileCoderz Contact Us
Vijay Singh Raghav
Vijay Singh Raghav

This blog has been written by Vijay Singh Raghav, a senior iOS developer at MobileCoderz Technologies. His hardcore passion for technology & innovation keeps inspiring him to create such a thought-provoking content for tech lovers.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

Have an App Idea in Mind!

GET A QUOTE