Gesture recognition (drag, magnify, rotate) in iOS Swift

Introduction

Gesture recognition lets users interact with your app by touching the screen in natural ways like dragging, pinching, or rotating. It makes apps feel alive and easy to use.

You want users to move an object on the screen by dragging it with their finger.

You want users to zoom in or out on a picture by pinching with two fingers.

You want users to rotate an image or shape by twisting two fingers.

You want to add fun and intuitive controls to a drawing or photo app.

You want to respond to common touch gestures to improve app usability.

Syntax

iOS Swift

let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan))
view.addGestureRecognizer(panGesture)

let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch))
view.addGestureRecognizer(pinchGesture)

let rotationGesture = UIRotationGestureRecognizer(target: self, action: #selector(handleRotation))
view.addGestureRecognizer(rotationGesture)

@objc func handlePan(_ gesture: UIPanGestureRecognizer) {
  // code to move view
}

@objc func handlePinch(_ gesture: UIPinchGestureRecognizer) {
  // code to zoom view
}

@objc func handleRotation(_ gesture: UIRotationGestureRecognizer) {
  // code to rotate view
}

You add gesture recognizers to a view to detect user touches.

Each gesture recognizer calls a method when the gesture happens.

Examples

This adds a drag (pan) gesture to a view. When the user drags, handlePan runs.

iOS Swift

let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan))
view.addGestureRecognizer(panGesture)

This adds a pinch gesture to zoom in or out. The handlePinch method will be called.

iOS Swift

let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch))
view.addGestureRecognizer(pinchGesture)

This adds a rotation gesture to rotate the view. The handleRotation method will handle it.

iOS Swift

let rotationGesture = UIRotationGestureRecognizer(target: self, action: #selector(handleRotation))
view.addGestureRecognizer(rotationGesture)

Sample App

This app shows a blue square you can drag, pinch to zoom, and rotate with your fingers. The gestures update the square's position, size, and angle smoothly.

iOS Swift

import UIKit

class ViewController: UIViewController {
  let square = UIView()
  var currentRotation: CGFloat = 0
  var currentScale: CGFloat = 1
  var currentTranslation = CGPoint.zero

  override func viewDidLoad() {
    super.viewDidLoad()
    square.frame = CGRect(x: 100, y: 100, width: 150, height: 150)
    square.backgroundColor = .systemBlue
    view.addSubview(square)

    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan))
    square.addGestureRecognizer(panGesture)

    let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch))
    square.addGestureRecognizer(pinchGesture)

    let rotationGesture = UIRotationGestureRecognizer(target: self, action: #selector(handleRotation))
    square.addGestureRecognizer(rotationGesture)

    square.isUserInteractionEnabled = true
  }

  @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: view)
    if gesture.state == .changed || gesture.state == .ended {
      let newX = currentTranslation.x + translation.x
      let newY = currentTranslation.y + translation.y
      square.transform = CGAffineTransform.identity
        .translatedBy(x: newX, y: newY)
        .scaledBy(x: currentScale, y: currentScale)
        .rotated(by: currentRotation)
    }
    if gesture.state == .ended {
      currentTranslation.x += translation.x
      currentTranslation.y += translation.y
    }
  }

  @objc func handlePinch(_ gesture: UIPinchGestureRecognizer) {
    if gesture.state == .changed || gesture.state == .ended {
      let scale = currentScale * gesture.scale
      square.transform = CGAffineTransform.identity
        .translatedBy(x: currentTranslation.x, y: currentTranslation.y)
        .scaledBy(x: scale, y: scale)
        .rotated(by: currentRotation)
    }
    if gesture.state == .ended {
      currentScale *= gesture.scale
      gesture.scale = 1
    }
  }

  @objc func handleRotation(_ gesture: UIRotationGestureRecognizer) {
    if gesture.state == .changed || gesture.state == .ended {
      let rotation = currentRotation + gesture.rotation
      square.transform = CGAffineTransform.identity
        .translatedBy(x: currentTranslation.x, y: currentTranslation.y)
        .scaledBy(x: currentScale, y: currentScale)
        .rotated(by: rotation)
    }
    if gesture.state == .ended {
      currentRotation += gesture.rotation
      gesture.rotation = 0
    }
  }
}

Important Notes

Remember to enable user interaction on views you want to gesture on by setting isUserInteractionEnabled = true.

Gesture recognizers can work together, but sometimes you need to manage conflicts.

Use the gesture's state to update your view only when the gesture changes or ends.

Summary

Gesture recognizers detect user touches like drag, pinch, and rotate.

Add gesture recognizers to views and handle their actions to update UI.

Combine translation, scale, and rotation transforms to move and change views smoothly.