Gesture recognition (drag, magnify, rotate) in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you drag the view with this code?

Consider this SwiftUI code snippet that handles drag gestures on a rectangle. What will be the final position of the rectangle after dragging?

iOS Swift

struct ContentView: View {
  @State private var offset = CGSize.zero
  var body: some View {
    Rectangle()
      .frame(width: 100, height: 100)
      .offset(offset)
      .gesture(
        DragGesture()
          .onChanged { gesture in
            offset = gesture.translation
          }
      )
  }
}

A The rectangle does not move at all because offset is not updated.

B The rectangle moves but snaps back to the original position after dragging ends.

C The rectangle moves randomly and does not follow the finger.

D The rectangle moves following the finger and stays at the last dragged position.

💡 Hint

Look at how the offset state is updated inside onChanged of DragGesture.

The offset state is updated continuously with the drag translation, so the rectangle moves with the finger and stays where the drag ended.

❓ ui_behavior

intermediate

What is the effect of this magnification gesture code?

Given this SwiftUI code snippet, what will happen when the user pinches to zoom on the circle?

iOS Swift

struct ContentView: View {
  @State private var scale: CGFloat = 1.0
  var body: some View {
    Circle()
      .frame(width: 100, height: 100)
      .scaleEffect(scale)
      .gesture(
        MagnificationGesture()
          .onChanged { value in
            scale = value
          }
      )
  }
}

A The circle scales only once after the pinch ends, not during the gesture.

B The circle does not scale because scaleEffect is not connected to the gesture.

C The circle scales up or down smoothly following the pinch gesture.

D The circle disappears when pinching because scale becomes zero.

💡 Hint

Check how scaleEffect uses the scale state updated in onChanged.

The scale state updates continuously with the magnification gesture value, so the circle scales smoothly as the user pinches.

❓ ui_behavior

advanced

What is the final rotation angle after this gesture ends?

Analyze this SwiftUI code that handles rotation gestures on an image. What will be the value of rotationAngle after the user rotates the image by 90 degrees and lifts their finger?

iOS Swift

struct ContentView: View {
  @State private var rotationAngle: Angle = .zero
  @State private var currentRotation: Angle = .zero
  var body: some View {
    Image(systemName: "arrow.right.circle.fill")
      .resizable()
      .frame(width: 100, height: 100)
      .rotationEffect(rotationAngle + currentRotation)
      .gesture(
        RotationGesture()
          .onChanged { angle in
            currentRotation = angle
          }
          .onEnded { angle in
            rotationAngle += angle
            currentRotation = .zero
          }
      )
  }
}

A rotationAngle will be 90 degrees (π/2 radians) after the gesture ends.

B rotationAngle will be zero because it resets after gesture ends.

C rotationAngle will be 180 degrees because it doubles the rotation.

D rotationAngle will be negative 90 degrees due to angle sign inversion.

💡 Hint

Look at how rotationAngle accumulates the angle on gesture end.

The rotationAngle accumulates the final gesture angle onEnded, so after rotating 90 degrees, rotationAngle becomes 90 degrees.

❓ lifecycle

advanced

Why does the drag gesture not reset the position after lifting the finger?

In this SwiftUI drag gesture code, why does the rectangle stay where it was dragged instead of snapping back to the start?

iOS Swift

struct ContentView: View {
  @State private var offset = CGSize.zero
  var body: some View {
    Rectangle()
      .frame(width: 100, height: 100)
      .offset(offset)
      .gesture(
        DragGesture()
          .onChanged { gesture in
            offset = gesture.translation
          }
          .onEnded { _ in
            // No code here
          }
      )
  }
}

A Because the rectangle has a fixed position and cannot move.

B Because offset is updated during onChanged and not reset in onEnded, the position stays.

C Because the offset resets to zero automatically after the gesture ends.

D Because the gesture is not attached properly, so offset never changes.

💡 Hint

Check what happens in onEnded closure.

Since offset is updated during dragging and onEnded does not reset it, the rectangle remains at the dragged position.

🔧 Debug

expert

Why does this combined gesture fail to recognize rotation?

This SwiftUI code tries to combine drag and rotation gestures on a view. Why does the rotation gesture never trigger?

iOS Swift

struct ContentView: View {
  @State private var offset = CGSize.zero
  @State private var rotation = Angle.zero
  var body: some View {
    Rectangle()
      .frame(width: 100, height: 100)
      .offset(offset)
      .rotationEffect(rotation)
      .gesture(
        DragGesture()
          .onChanged { gesture in
            offset = gesture.translation
          }
          .simultaneously(with: RotationGesture()
            .onChanged { angle in
              rotation = angle
            })
      )
  }
}

A Because simultaneously is called on DragGesture, rotation gesture is ignored; gestures must be combined differently.

B Because rotation gesture is inside simultaneously, it triggers correctly with drag.

C Because rotation gesture is not attached to the view, it never triggers.

D Because offset and rotation states conflict, causing gesture failure.

💡 Hint

Check how simultaneously is used and which gesture it is called on.

Calling simultaneously on DragGesture with RotationGesture inside causes only the drag gesture to be recognized; the rotation gesture is ignored. The correct approach is to combine gestures at the view level using .simultaneousGesture or .gesture with a combined gesture.

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