DEV Community

Cover image for Exploring SwiftUI Basic Gestures
Rinalds Domanovs
Rinalds Domanovs

Posted on

Exploring SwiftUI Basic Gestures

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

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.

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.

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

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

LongGesture

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.

LongPressGesture(minimumDuration: 2)
Enter fullscreen mode Exit fullscreen mode

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

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

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

DragGesture

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

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

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.
Link on full project code on GitHub.

Discussion (0)