Exploring SwiftUI Basic Gestures
Tags: swift, swiftui, ios, tutorial
Published: 2021-05-17 08:05:53

In `SwiftUI` we can make our Apps more interactive by adding different interactions that respond on our taps, clicks, and swipes.

Today we will review `SwiftUI` Basic Gestures:

- [TapGesture](#tapGesture)
- [LongPressGesture](#longPressGesture)
- [DragGesture](#dragGesture)
- [MagnificationGesture](#magnificationGesture)
- [RotationGesture](#rotationGesture)

## TapGesture <a name="tapGesture"/>

Tap gestures allow us to recognise one or more taps on `View`.
We have several options how we can add a tap gesture.

First one is by using `.onTapGesture` modifier directly.

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=TapGesture1X_01.swift %}

And other option that is being used in `SwiftUI` documentation is by creating and configuring a gesture as a property and then use it with `.gesture(_:including:)` modifier.
But remember that in order to do something or respond to a tap we need to use `.onEnded` action closure that is triggered when the gesture ends.

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=TapGesture1X_02.swift %}

Actually second approach I like better as in such way we can create different gestures and re-use them through our code.

So if we put together code we can start making something like this.

![Single Tap](https://media.giphy.com/media/kO6Lyz0GluRuZGe3Jz/giphy.gif)

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=TapGesture1X_full.swift %}

Similarly we can control on how many taps we want to respond by just using `TapGesture(count: Int)` initializer.
In this case case you need to tap 3 times in order to trigger `.onEnded` action closure.

![Multiple Taps](https://media.giphy.com/media/rEn90qFllwX7rzukkI/giphy.gif)

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=TapGesture3X_full.swift %}

## LongGesture <a name="longPressGesture"/>

Long Press Gesture allows us to perform action after user has long-pressed our defined time and during the time while user is long-pressing.

We can set a minimum duration that must be met in order to recognise our long-press gesture. It can be set in `LongPressGesture` initialiser.

```swift
LongPressGesture(minimumDuration: 2)
```
 
Then we can use `.updating` method to perform action during the long-press and `.onEnded` to perform action when our gesture is recognised.

In this example I'm updating `Circle()` size and color during the long-press action, and when gesture is recognised I'm showing `Text` done.

Additionally I'm here using a `GestureState` property wrapper that is set to `true` during the long-press and it's set to `false` when the gesture ends. I'm using this property wrapper for sample animations.

![LongPressGesture](https://media.giphy.com/media/eNHX7pDzqgVSx0CCz6/giphy.gif) 

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=LongPressGesture_full.swift %}

## DragGesture <a name="dragGesture"/>

Drag Gesture allows us to perform an action when `View` is dragged.

We can take advantage and use `.onChanged` and `.onEnded` closure methods to perform some action. Both of those methods provide us great attribute `DragGesture.Value` that stores the following drag action information:

- location
- predictedEndLocation
- predictedEndTranslation
- startLocation
- time
- translation

We can use this attribute to create movable `Views`. In current example I'm using `.onChanged` method to update `Circle()` location coordinates.

![DragGesture](https://media.giphy.com/media/feZxhEyRtkNuwsDLig/giphy.gif)

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=DragGesture_01.swift %}

And here I've added `.onEnded` method to reset `Circle()` location coordinates when drag has ended.

![DragGesture](https://media.giphy.com/media/MAXVvk8K0bdsn6PlOg/giphy.gif)

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=DragGesture_02.swift %}

## MagnificationGesture <a name="magnificationGesture"/>

Magnification gesture allows to respond with some action when we are applying a magnification motion on `View`. 

Here we also have `.onChanged`, and `.onEnded` closures that we can use in order to respond during magnification action or when it's ended. As an attribute we receive `MagnificationGesture.Value` that is `CGFloat`. We can use this to change `View` size as an example.

![MagnificationGesture](https://media.giphy.com/media/hbnMu8vCYGu7DzFcOv/giphy.gif)

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=MagnificationGesture.swift %}

## RotationGesture <a name="rotationGesture"/>

Rotation gesture allows to rotate `View` and respond with some action during rotation and when rotation has ended.

It also provides us with `.onChanged`, and `.onEnded` closures that gives us `RotationGesture.Value` that represents gestures `Angle` value. We can use this value to rotate `View`.

![RotationGesture](https://media.giphy.com/media/zycjf4usBZed4nB6FE/giphy.gif)

{% gist https://gist.github.com/Sangsom/c4f1a9a9499612c7816073228602339e file=RotationGesture.swift %}

## Final thoughts

This was only review of the basic Gestures that `SwiftUI` gives us. And we can do a lot with them to make our apps `live`. For more advanced use gestures can be combined or used simultaneously to make response or we can make our own custom gestures.

Follow on [Twitter](https://twitter.com/domanovdev).
Link on full project code on [GitHub](https://github.com/Sangsom/SwiftUI-Basic-Gestures).