EducaSwift

Gestures are an essential part of creating interactive and engaging user interfaces in iOS. SwiftUI provides a powerful, declarative approach to handling common gestures like taps, long presses, swipes, and drags. In this article, we’ll cover how to add each of these gestures to your SwiftUI views.

Tap Gesture

The tap gesture is the simplest and most commonly used gesture, often used for triggering actions with a single tap on a view. To use a tap gesture, apply the .onTapGesture modifier to the view:

import SwiftUI

struct ContentView: View {
    @State private var isTapped = false

    var body: some View {
        Circle()
            .fill(isTapped ? Color.green : Color.blue)
            .frame(width: 100, height: 100)
            .onTapGesture {
                isTapped.toggle()
            }
    }
}

Long Press Gesture

The LongPressGesture is used when you want an action to occur after the user holds down on a view for a certain duration. You can customize the minimum duration for the long press, and even add a press-and-hold effect. Here’s an example:

struct ContentView: View {

    @State private var isPressed = false
    @State private var isPressing = false

    var body: some View {
        Circle()
            .fill(isPressed ? Color.red : Color.orange)
            .frame(width: 100, height: 100)
            .scaleEffect(isPressing ? 1.2 : 1.0)
            .onLongPressGesture(minimumDuration: 1.0, perform: {
                isPressed = true
            }, onPressingChanged: { isPressing in
                if isPressing {
                    // When transition starts, animate scale
                    withAnimation(.easeOut(duration: 1)) {
                        self.isPressing = true
                    }
                }
                else {
                    // When transition ends, reset values immediately
                    isPressed = false
                    self.isPressing = false
                }
            })
    }
}

Swipe Gesture

Although SwiftUI doesn’t have a built-in swipe gesture like UISwipeGestureRecognizer, you can detect swipes using the DragGesture and interpret the direction of the drag. Here’s an example:

struct ContentView: View {
    @State private var swipeDirection = "Swipe in any direction"

    var body: some View {
        Text(swipeDirection)
            .padding()
            .background(Color.yellow)
            .gesture(
                DragGesture()
                    .onEnded { value in
                        let horizontalAmount = value.translation.width
                        let verticalAmount = value.translation.height
                        
                        if abs(horizontalAmount) > abs(verticalAmount) {
                            swipeDirection = horizontalAmount > 0 ? "Swiped Right" : "Swiped Left"
                        } else {
                            swipeDirection = verticalAmount > 0 ? "Swiped Down" : "Swiped Up"
                        }
                    }
            )
            .frame(width: 300, height: 200)
    }
}

Drag Gesture

The DragGesture provides the capability to track the movement of a user’s finger across the screen. This is particularly useful for creating draggable elements in the UI. Here’s a simple example:

struct ContentView: View {
    @State private var offset = CGSize.zero

    var body: some View {
        Circle()
            .fill(Color.purple)
            .frame(width: 100, height: 100)
            .offset(offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        offset = value.translation
                    }
                    .onEnded { _ in
                        offset = .zero
                    }
            )
    }
}

Combining Gestures

SwiftUI also allows you to combine gestures for more complex interactions. For example, you can combine tap and long press gestures:

struct ContentView: View {
    @State private var text = "Tap or Long Press"

    var body: some View {
        Text(text)
            .padding()
            .background(Color.gray.opacity(0.2))
            .onTapGesture {
                text = "Tapped!"
            }
            .onLongPressGesture(minimumDuration: 1.0) {
                text = "Long Pressed!"
            }
    }
}