paint-brush
Swipe, Tap, and Pinch Gestures in iOS 18 - #30DaysOfSwiftby@vaibhavdwivedi
167 reads

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

by Vaibhav
Vaibhav HackerNoon profile picture

Vaibhav

@vaibhavdwivedi

Building Shipios.app to make it easier to launch iOS Apps!

October 23rd, 2024
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In my twelfth post of the #30DaysOfSwift series, let me tell you about the Gesture Recognizers in SwiftUI.
featured image - Swipe, Tap, and Pinch Gestures in iOS 18 - #30DaysOfSwift
1x
Read by Dr. One voice-avatar

Listen to this story

Vaibhav HackerNoon profile picture
Vaibhav

Vaibhav

@vaibhavdwivedi

Building Shipios.app to make it easier to launch iOS Apps!

Learn More
LEARN MORE ABOUT @VAIBHAVDWIVEDI'S
EXPERTISE AND PLACE ON THE INTERNET.
0-item

STORY’S CREDIBILITY

Code License

Code License

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

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


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!

L O A D I N G
. . . comments & more!

About Author

Vaibhav HackerNoon profile picture
Vaibhav@vaibhavdwivedi
Building Shipios.app to make it easier to launch iOS Apps!

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X
Threads
X REMOVE AD