# Gestures

## Overview

## Subjects

### Using Gestures

{% embed url="<https://youtu.be/kQhBS2qUKXc>" %}
[Hacking with Swift / 100 Days / Day-86 - How to use gestures in SwiftUI](https://www.hackingwithswift.com/books/ios-swiftui/how-to-use-gestures-in-swiftui)
{% endembed %}

**Tags**: #MagnificationGesture #onChanged #RotationGesture #rotationEffect

#### Magnification

```swift
struct ContentView: View {
    @State private var currentAmount = 0.0
    @State private var finalAmount = 1.0

    var body: some View {
        Text("Hello, World!")
            .scaleEffect(finalAmount + currentAmount)
            .gesture(
                MagnificationGesture()
                    .onChanged { amount in
                        currentAmount = amount - 1
                    }
                    .onEnded { amount in
                        finalAmount += currentAmount 
                        currentAmount = 0
                    }
            )
    }
}
```

#### Rotation

```swift
struct ContentView: View {
    @State private var currentAmount = Angle.zero
    @State private var finalAmount = Angle.zero

    var body: some View {
        Text("Hello, World!")
            .rotationEffect(currentAmount + finalAmount)
            .gesture(
                RotationGesture()
                    .onChanged { angle in
                        currentAmount = angle
                    }
                    .onEnded { angle in
                        finalAmount += currentAmount
                        currentAmount = .zero
                    }
            )
    }
}
```

#### Tapping

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .onTapGesture {
                    print("Text tapped")
                }
        }
        .onTapGesture {
            print("VStack tapped")
        }
    }
}
```

#### Dragging

{% embed url="<https://youtu.be/AaVC-tnC4pA>" %}
[Hacking with Swift / 100 Days / Day-88 - Moving views with DragGesture and offset()](https://www.hackingwithswift.com/books/ios-swiftui/moving-views-with-draggesture-and-offset)
{% endembed %}

**Tags**: #offset #DragGesture #CGSize #RotationEffect #removal #swipe

{% embed url="<https://youtu.be/XIxjmLhPWRc>" %}
[Hacking with Swift / 100 Days / Day-89 - Coloring views as we swipe](https://www.hackingwithswift.com/books/ios-swiftui/coloring-views-as-we-swipe)
{% endembed %}

**Tags**: #Swipe #Drag #DifferentiateWithoutColor #xmark #checkmark&#x20;

For colorblinds you may should use graphics instead of colors. Differentiate Without Color will help on this purpose.

#### High Priority Gesture

As default, SwiftUI gives priority to child gesture. To overcome that we should define the parent Gesture as a highpriority.

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .onTapGesture {
                    print("Text tapped")
                }
        }
        .highPriorityGesture(
            TapGesture()
                .onEnded { _ in
                    print("VStack tapped")
                }
        )
    }
}
```

#### Simultaneous Gesture

Trigers all the gestures at the same time.

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .onTapGesture {
                    print("Text tapped")
                }
        }
        .simultaneousGesture(
            TapGesture()
                .onEnded { _ in
                    print("VStack tapped")
                }
        )
    }
}
```

#### Sequential Gestures

First needs to be long pressed, an than it activates the second gesture.

```swift
struct ContentView: View {
    // how far the circle has been dragged
    @State private var offset = CGSize.zero

    // whether it is currently being dragged or not
    @State private var isDragging = false

    var body: some View {
        // a drag gesture that updates offset and isDragging as it moves around
        let dragGesture = DragGesture()
            .onChanged { value in offset = value.translation }
            .onEnded { _ in
                withAnimation {
                    offset = .zero
                    isDragging = false
                }
            }

        // a long press gesture that enables isDragging
        let pressGesture = LongPressGesture()
            .onEnded { value in
                withAnimation {
                    isDragging = true
                }
            }

        // a combined gesture that forces the user to long press then drag
        let combined = pressGesture.sequenced(before: dragGesture)

        // a 64x64 circle that scales up when it's dragged, sets its offset to whatever we had back from the drag gesture, and uses our combined gesture
        Circle()
            .fill(.red)
            .frame(width: 64, height: 64)
            .scaleEffect(isDragging ? 1.5 : 1)
            .offset(offset)
            .gesture(combined)
    }
}
```

## Solutions / Examples

### Dynamic Emoji

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FSetOrLr0OUkZZ2OOxC4v%2Fimage.png?alt=media\&token=220b7bb8-53fb-44c2-b857-286b4bf0d956)

<https://twitter.com/philipcdavis/status/1580211607627390976?s=12&t=PW_LE1rEl7C8W6gcTx0V3g>

## Sources

### Videos

{% embed url="<https://youtu.be/OtOUi60oeyg>" %}

### Articles / Documents

*

## See also

*