Gesture recognition (drag, magnify, rotate) in iOS Swift - UI Render Trace

Component - Gesture recognition (drag, magnify, rotate)

This UI component lets users move, zoom, and rotate an image using their fingers. It recognizes drag (pan), pinch (magnify), and rotation gestures to change the image's position, size, and angle on the screen.

Widget Tree

UIView
└── UIImageView
    └── Gesture Recognizers
        ├── UIPanGestureRecognizer
        ├── UIPinchGestureRecognizer
        └── UIRotationGestureRecognizer

The main view contains an image view. The image view has three gesture recognizers attached: one for dragging (pan), one for zooming (pinch), and one for rotating. These gestures update the image's transform to move, scale, or rotate it.

Render Trace - 5 Steps

Step 1: UIView

Step 2: UIImageView

Step 3: UIPanGestureRecognizer

Step 4: UIPinchGestureRecognizer

Step 5: UIRotationGestureRecognizer

State Change - Re-render

Trigger:User drags, pinches, or rotates the image with fingers

Before

Image is at original position, scale 1.0, rotation 0 degrees

→

After

Image moves to new position, scales up or down, and/or rotates by user gesture

Re-renders:UIImageView updates its transform property to reflect new translation, scale, and rotation

UI Quiz - 3 Questions

Which gesture lets the user move the image around the screen?

A UIPinchGestureRecognizer

B UIPanGestureRecognizer

C UIRotationGestureRecognizer

D UITapGestureRecognizer

Key Insight

Combining multiple gesture recognizers on one view allows natural, intuitive interactions like dragging, zooming, and rotating. Updating the view's transform property smoothly applies these changes without rebuilding the UI.