DEV Community

Cover image for Swipe, Tap and Pinch Gestures in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

Swipe, Tap and Pinch Gestures in iOS 18 - #30DaysOfSwift

Day 12: Mastering Gestures – Swipe, Tap, and Pinch

In my twelfth post of the #30DaysOfSwift series, let me tell you about the Gesture Recognizers in SwiftUI.

They are swipe, tap, and pinch that can bring an intuitive feel to your app, making it engaging for your users.

Image description

Steps to Add Gesture Recognizers:

Implement Tap Gesture:

  • A single tap will change the color of a circle.

Implement Swipe Gesture:

  • We’ll detect horizontal swipe gestures to move a card left or right.

Implement Pinch Gesture:

  • Pinching will resize an image interactively.
import SwiftUI

struct GestureRecognizersView: View {
    @State private var circleColor = Color.blue // Color for tap gesture
    @State private var offsetX: CGFloat = 0.0 // X-offset for swipe gesture
    @State private var scale: CGFloat = 1.0 // Scale for pinch gesture

    var body: some View {
        VStack(spacing: 40) {
            // Circle with Tap Gesture
            Circle()
                .fill(circleColor)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    // Change color on tap
                    circleColor = circleColor == .blue ? .red : .blue
                }
                .overlay(Text("Tap Me").foregroundColor(.white)) // Label on the circle

            // Rectangle with Swipe Gesture
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.green)
                .frame(width: 200, height: 100)
                .offset(x: offsetX) // Move based on swipe
                .gesture(
                    DragGesture()
                        .onEnded { value in
                            if value.translation.width > 0 {
                                // Swipe right
                                offsetX += 100
                            } else {
                                // Swipe left
                                offsetX -= 100
                            }
                        }
                )
                .overlay(Text("Swipe Me").foregroundColor(.white)) // Label on the rectangle

            // Image with Pinch Gesture
            Image(systemName: "photo")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 150, height: 150)
                .scaleEffect(scale) // Scale based on pinch
                .gesture(
                    MagnificationGesture()
                        .onChanged { value in
                            scale = value.magnitude // Pinch scaling
                        }
                )
                .overlay(Text("Pinch Me").foregroundColor(.black)) // Label on the image
        }
        .padding()
        .animation(.easeInOut, value: scale) // Smooth animations
        .animation(.easeInOut, value: offsetX)
    }
}
Enter fullscreen mode Exit fullscreen mode

Now that you've learned how to implement Tap, Swipe, and Pinch gestures, start adding them to enhance your app’s interactivity! ✨

Happy Coding!

Top comments (0)