Gesture recognition (drag, magnify, rotate) in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a pan gesture recognizer to the view.

iOS Swift

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

Drag options to blanks, or click blank then click option'

AaddGestureRecognizer

BremoveGestureRecognizer

CbringSubviewToFront

DaddSubview

Attempts:

3 left

💡 Hint

Common Mistakes

Using addSubview instead of addGestureRecognizer

Trying to remove gesture recognizer instead of adding

To detect drag gestures, you add a UIPanGestureRecognizer to the view using addGestureRecognizer.

2fill in blank

medium

Complete the code to get the translation point from the pan gesture recognizer.

iOS Swift

let translation = sender.[1](in: view)

Drag options to blanks, or click blank then click option'

Atranslation

Bstate

Cvelocity

Dlocation

Attempts:

3 left

💡 Hint

Common Mistakes

Using location instead of translation

Using velocity which gives speed, not distance

The translation(in:) method gives the drag distance of the gesture in the view's coordinate system.

3fill in blank

hard

Fix the error in the magnification gesture handler to get the scale value.

iOS Swift

func handlePinch(_ sender: UIPinchGestureRecognizer) {
    let scale = sender.[1]
    view.transform = view.transform.scaledBy(x: scale, y: scale)
    sender.scale = 1.0
}

Drag options to blanks, or click blank then click option'

Alocation

Bvelocity

Ctranslation

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using velocity or translation instead of scale

Trying to call a method instead of accessing a property

The scale property of UIPinchGestureRecognizer gives the pinch scale factor.

4fill in blank

hard

Fill both blanks to get the rotation angle and apply it to the view transform.

iOS Swift

func handleRotation(_ sender: UIRotationGestureRecognizer) {
    let rotation = sender.[1]
    view.transform = view.transform.[2](by: rotation)
    sender.rotation = 0
}

Drag options to blanks, or click blank then click option'

Arotation

Bscale

Crotated

DscaledBy

Attempts:

3 left

💡 Hint

Common Mistakes

Using scale property for rotation

Using scaledBy method instead of rotated

The rotation property gives the rotation angle. The rotated(by:) method applies rotation to the transform.

5fill in blank

hard

Fill all three blanks to reset the view transform after gestures.

iOS Swift

func resetTransform() {
    UIView.animate(withDuration: [1]) {
        self.view.transform = CGAffineTransform.[2]()
    } completion: { _ in
        print("Transform [3]")
    }
}

Drag options to blanks, or click blank then click option'

A0.3

Bidentity

Creset

D0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong duration value

Using non-existent transform methods

Printing wrong status message

Animation duration is 0.5 seconds. CGAffineTransform.identity() resets the transform. The print statement confirms the reset.

Practice

1. Which gesture recognizer in SwiftUI detects a dragging motion on a view?

easy

A. MagnificationGesture

B. RotationGesture

C. DragGesture

D. TapGesture

Solution

1. Step 1: Understand gesture types

   DragGesture detects dragging motions, MagnificationGesture detects pinch zoom, RotationGesture detects rotation, and TapGesture detects taps.

2. Step 2: Match gesture to dragging

   Since dragging means moving finger across the screen, DragGesture is the correct recognizer.

3. Final Answer:

   DragGesture -> Option C

4. Quick Check:

   DragGesture = dragging motion [OK]

Hint: DragGesture is for dragging, Magnification for pinch zoom [OK]

Common Mistakes:

• Confusing MagnificationGesture with dragging
• Choosing TapGesture for drag
• Mixing RotationGesture with drag

2. Which of the following is the correct syntax to add a rotation gesture recognizer to a SwiftUI view?

easy

A. .gesture(RotationGesture().onChanged { angle in /* code */ })

B. .onTapGesture { /* code */ }

C. .gesture(DragGesture().onEnded { _ in /* code */ })

D. .gesture(MagnificationGesture().onChanged { scale in /* code */ })

Solution

1. Step 1: Identify rotation gesture syntax

   RotationGesture() is the correct gesture for rotation, and .gesture() modifier adds it to a view.

2. Step 2: Confirm onChanged closure usage

   onChanged receives the rotation angle, so the syntax .gesture(RotationGesture().onChanged { angle in ... }) is correct.

3. Final Answer:

   .gesture(RotationGesture().onChanged { angle in /* code */ }) -> Option A

4. Quick Check:

   RotationGesture syntax = .gesture(RotationGesture().onChanged { angle in /* code */ }) [OK]

Hint: Use .gesture(RotationGesture().onChanged) for rotation [OK]

Common Mistakes:

• Using DragGesture instead of RotationGesture
• Using .onTapGesture for rotation
• Confusing MagnificationGesture with rotation

3. What will be the effect of this SwiftUI code snippet on a view?

Image("photo")
  .scaleEffect(scale)
  .rotationEffect(angle)
  .offset(dragAmount)
  .gesture(
    DragGesture()
      .onChanged { dragAmount = $0.translation }
      .onEnded { _ in dragAmount = .zero }
  )
  .gesture(
    MagnificationGesture()
      .onChanged { scale = $0 }
  )
  .gesture(
    RotationGesture()
      .onChanged { angle = $0 }
  )

medium

A. Only dragging works; zoom and rotation gestures are ignored.

B. The image can be dragged, zoomed, and rotated by user gestures.

C. Only zooming works; drag and rotation gestures are ignored.

D. The image is static and does not respond to gestures.

Solution

1. Step 1: Analyze gesture modifiers

   The code adds three gestures: DragGesture updates dragAmount offset, MagnificationGesture updates scale, RotationGesture updates angle.

2. Step 2: Understand combined effects

   The view applies scaleEffect, rotationEffect, and offset using these state variables, so all gestures affect the image interactively.

3. Final Answer:

   The image can be dragged, zoomed, and rotated by user gestures. -> Option B

4. Quick Check:

   All gestures update view transforms = The image can be dragged, zoomed, and rotated by user gestures. [OK]

Hint: Multiple gestures update scale, rotation, and offset simultaneously [OK]

Common Mistakes:

• Assuming only one gesture works at a time
• Ignoring that gestures update state variables
• Thinking gestures override each other

4. Identify the error in this SwiftUI gesture code snippet:

Circle()
  .gesture(DragGesture().onChanged { value in
    dragAmount = value.translation
  })
  .gesture(MagnificationGesture().onChanged { scale = $0 })

medium

A. Only the MagnificationGesture will work; DragGesture is ignored.

B. Both gestures work correctly without conflict.

C. The code will cause a compile-time error due to multiple gestures.

D. DragGesture will override MagnificationGesture, so only drag works.

Solution

1. Step 1: Understand gesture modifiers stacking

   Applying multiple .gesture modifiers separately causes only the last one to be active.

2. Step 2: Identify which gesture is active

   Since MagnificationGesture is added last, it overrides DragGesture, so only magnification works.

3. Final Answer:

   Only the MagnificationGesture will work; DragGesture is ignored. -> Option A

4. Quick Check:

   Last .gesture overrides previous = Only the MagnificationGesture will work; DragGesture is ignored. [OK]

Hint: Multiple .gesture modifiers override; combine gestures with simultaneousGesture [OK]

Common Mistakes:

• Assuming both gestures work independently
• Expecting compile error for multiple gestures
• Thinking first gesture always wins

5. You want to allow a user to drag, zoom, and rotate a photo simultaneously in SwiftUI. Which approach correctly combines these gestures so all work together smoothly?

hard

A. Use only one gesture recognizer that detects drag, zoom, and rotate at once.

B. Add three separate .gesture modifiers for each gesture on the view.

C. Use .gesture for DragGesture and ignore zoom and rotate gestures.

D. Use .simultaneousGesture to combine DragGesture, MagnificationGesture, and RotationGesture on the view.

Solution

1. Step 1: Understand gesture combination in SwiftUI

   Multiple .gesture modifiers override each other, so to combine gestures, use .simultaneousGesture.

2. Step 2: Apply simultaneousGesture for all three

   By nesting .simultaneousGesture for DragGesture, MagnificationGesture, and RotationGesture, all gestures work together smoothly.

3. Final Answer:

   Use .simultaneousGesture to combine DragGesture, MagnificationGesture, and RotationGesture on the view. -> Option D

4. Quick Check:

   Combine gestures with simultaneousGesture = Use .simultaneousGesture to combine DragGesture, MagnificationGesture, and RotationGesture on the view. [OK]

Hint: Combine gestures with .simultaneousGesture for multi-touch support [OK]

Common Mistakes:

• Adding multiple .gesture modifiers separately
• Expecting one gesture to handle all types
• Ignoring zoom and rotate gestures