Building a Simple Tap Gesture Element in SwiftUI

Photo by Blake Wisz on Unsplash

Creating a simple tap gesture in SwiftUI is quite straightforward. Here’s a basic example of how you can add a tap gesture to a text element that changes its color upon being tapped:

//  GestureRecognizer.swift
//  GestureRecognizer
//  Created by Md. Jamal Uddin on 11/5/24.

import SwiftUI

struct GestureRecognizer: View {
    @State private var flag = false
    
    var body: some View {
        VStack {
            Text("Gesture Recognizer").font(.title)
            Text("Tap Me")
                .font(.largeTitle)
                .foregroundColor(.white)
                .padding(15)
                .background(flag ? Color.green : Color.gray)
                .onTapGesture {
                    flag.toggle()
                }
        }
    }
}

#Preview {
    GestureRecognizer()
}

Run the code on the iOS simulator that will look same as below:

Button color change on Tap

In this example, the @State property flag keeps track of whether the text has been tapped. The .onTapGesture modifier is used to change the state when the text is tapped, causing the view to re-render with the new color.

If you’re looking to handle multiple taps, such as a double tap, you can specify the count parameter within the .onTapGesture modifier:

.onTapGesture(count: 2) {
  flag.toggle()
}

For more advanced gestures, you can use the gesturemodifier with gesture structs like DragGesture, LongPressGesture, MagnifyGesture, RotateGesture, and TapGesture. These provide onEnded and onChanged modifiers to take action when the gestures are completed or in flight, respectively.

Gestures | Apple Developer Documentation

Remember, SwiftUI makes it easy to combine gestures and create complex interactions, so feel free to experiment with different combinations to achieve the desired user experience in your app.

Happy coding! 🚀