UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4 - Swift 4 Tutorials W3Schools


Post Top Ad

12 Nov 2017

UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4

The iOS UIPinchGestureRecognizer class has a built-in way to detect pinch gesture on any view.

In this tutorial we will learn Pinch Gesture Recognizer on ImageView.

UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4

Other Gestures in iOS:

Single Tap & Double Tap Gesture - UITapGestureRecognizer
Swipe Gesture Recognizer - UISwipeGestureRecognizer
Pan Gesture Recognizer - UIPanGestureRecognizer
Long Press Gesture - UILongPressGestureRecognizer
UIRotationGestureRecognizer - Rotate Image View swift 

Getting Started:

Firstly create new Xcode project and save it with 'PinchGesture'.

Next open the ViewController.swift file and add the imageView as follow.

Adding ImageView:

First create imageView property as follow:

let imageView = UIImageView()

Next add imageView as sub view and give the auto layout constraints. Add the following code in viewDidLoad() method:

imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.image = UIImage(named: "cat")
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.6).isActive = true
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1).isActive = true

Adding Pinch Gesture:

First create an instance to UIPinchGestureRecognizer() as follow:

var pinchGesture  = UIPinchGestureRecognizer()

Next add pinchGesture to the imageView. Add the following code to the end of viewDidLoad() method:

pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(self.pincheGestureHandler))
imageView.isUserInteractionEnabled = true

The isUserInteractionEnabled property of the view is set to true. Image views and labels set this property to false by default.

Finally add the action for the pinch gesture, add the following method:

@objc func pincheGestureHandler(recognizer:UIPinchGestureRecognizer){
    self.view.bringSubview(toFront: imageView)
    recognizer.view?.transform = (recognizer.view?.transform)!.scaledBy(x: recognizer.scale, y: recognizer.scale)
    recognizer.scale = 1.0

Run the project, we will see an image with an pinch gesture as follow:

UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4 gif

Download sample project with example :

No comments:

Post a Comment

Post Top Ad