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)