This content originally appeared on HackerNoon and was authored by Vaibhav
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!
This content originally appeared on HackerNoon and was authored by Vaibhav
Vaibhav | Sciencx (2024-10-23T23:19:35+00:00) Swipe, Tap, and Pinch Gestures in iOS 18 – #30DaysOfSwift. Retrieved from https://www.scien.cx/2024/10/23/swipe-tap-and-pinch-gestures-in-ios-18-30daysofswift/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.