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!
Top comments (0)