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.

\

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) } }

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

\ Happy Coding!