Forem: Rinalds Domanovs

Exploring SwiftUI Basic Gestures

Rinalds Domanovs — Mon, 17 May 2021 08:05:53 +0000

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
LongPressGesture
DragGesture
MagnificationGesture
RotationGesture

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.

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.

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)

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.

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.

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

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.

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.

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.

Creating in SwiftUI UITextField Representable

Rinalds Domanovs — Wed, 21 Apr 2021 02:25:02 +0000

There may be cases when you would like bigger control over the TextField that you are adding in your app. Of course in most cases it's completely fine and enough to use SwiftUI Textfield, but I recently needed to create a UITextField representable and to be honest it wasn't so easy to do initially. So I want to share what I did in order to get working solution.

Result

For the tutorial we will create a custom URLTextField that will be used in SwiftUI app and is a UIViewRepresentable of UITextField.

Project

Let's start with creating project.

Open Xcode.
Choose an App template for your new project.
Create project name and make sure that you have selected SwiftUI interface and life cycle.

URLTextField

Now let's make URLTextField component that will be conforming to UIViewRepresentable protocol that is a wrapper for UIKit view which allows us to integrate that view into our SwiftUI.

Create new file Command + N
Save as URLTextField.swift

Now create URLTextField struct that conforms to UIViewRepresentable protocol and don't forget to import SwiftUI framework for the protocol.

Good, now we have error:

Type 'URLTextField' does not conform to protocol 'UIViewRepresentable'.

So now to satisfy UIViewRepresentable protocol requirements we need to implement two methods:

makeUIView() - here we will create our text field
updateUIView() - it's called whenever data in our text field will be changed

Actually we can already use this component in our SwiftUI view. Let's add it to ContentView.swift file.

Nice, we have a UITextField that is configured for typing URLs, but we need something more.
We want it to have a SwiftUI functionality that allows us to store its value into @State property wrapper and update it accordingly.
Sounds simple, let's create @Binding property wrapper inside our URLTextField struct that will store and update text value. And we can use now our updateUIView method for updating our view as it should do.

And update our ContentView.swift file. Add @State property wrapper and pass it to our URLTextField in order to track typed text.

It looks good, we have @State property wrapper that is passed to our URLTextField @Binding.

But we still need one more thing, we need to create a delegate and in order to communicate with our view we need to implement a Coordinator instance.
Basically in Coordinator you will create all UITextFieldDelegate methods that are communicated through makeCoordinator() method that is required now. And of course set the delegate property to context.coordinator.

Quite a lot of steps to be done and still not finished yet. Now the last part. We need to add one more @Binding method for tracking URLTextField text and we need to update that text manually through textFieldDidChangeSelection() delegate method. And also we need to use DispatchQueue in our textFieldDidChangeSelection() method or we will get an error while typing.

Modifying state during view update, this will cause undefined behavior.

So there is finished code you can use for such cases.

And here you can see result.

Final thoughts

Of course it's a lot of code just for creating TextField and as I mentioned previously for the most time you probably will be good for using SwiftUI TextField, but when I had a need to create more advanced UITextField where I can have a full power of UITextField delegate methods it wasn't so easy to understand for me how to implement it. So I wanted to write about it and strenghten my understanding on using UIViewRepresentable protocol.

Any critique, comments are highly welcome.
Follow on Twitter.
Link on full project code on GitHub.

SwiftUI Onboarding View

Rinalds Domanovs — Mon, 19 Apr 2021 12:55:16 +0000

This post is intended for iOS 14.0+ versions as I'm using PageTabViewStyle for creating this onboarding view.

What we will create

Creating project

Open Xcode.
Choose an App template for your new project.
Create project name and make sure that you have selected SwiftUI interface and life cycle.

Project assets

To follow along you can download project assets from GitHub.
Or even better find your own images for your onboarding view.

Take downloaded assets and move them into Xcode project Assets folder.

TabView

Now let's implement the TabView structure in our ContentView.swift file that will be used for this project.

Create a State property wrapper that will track which Tab is currently active.
Add TabView with sample views currently that will be later replaced with onboarding views.
Set .tag identifiers for each view so SwiftUI can differentiate our views. Tag values basically can be any type that conforms to Hashable protocol. By default these are String, integers, floating-point, and Boolean values. In our case we are just using Int values.

If we compile and run our app we now have the following:

And it doesn't do much. We can't use swipe to change the screen and actually in the bottom you can see that there is empty TabView appeared that you can tap and views will be changed, but this is not what we want to achieve.

Add to TabView following modifier:
.tabViewStyle(PageTabViewStyle())

And if you run your app again you will see that the TabView is disappeared from the bottom, but now you can use swipe control to switch between views. Looks good but we need one more modifier.
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

This modifier adds to the bottom of our view a paging dots that shows visually on which page you currently are.

Basically you have implemented the main part of the onboarding view experience. Now you can create your own SwiftUI views add it to TabView and don't forget to assign it's .tag attribute.

If you want you can follow to read and see my implementation of onboarding view or use this TabView structure and create your own.

Onboarding Views

For the tutorial we will have 3 onboarding views that have the same structure and style, just different images and text. So we will create re-usable OnboardingView component to which we will pass OnboardingData model that contains view images and text.

Let's start with OnboardingData struct.

Create new Swift File.
Call it OnboardingData.swift.
Create struct.
And also for the tutorial lets add all our sample data in our OnboardingData struct itself.
Additionally we will make this structer to conform Hashable, and Identifiable protocol so we can later use in our ContentView to iterate through ForEach.

Doing so we will be able to easily iterate through OnboardingData list and pass data to our onboarding views, and also we will use this four our SwiftUI preview debugging.

Now when we have created OnboardingData model we can start creating our OnboardingView.

Create new SwiftUI View.
Call it OnboardingView.swift.
Create an OnboardingData property.
Pass to our preview data to fix the error and allow to see in our assistant window dummy data so we can see and create UI.

And then create an UI. Nothing fancy here just two Image views that are positioned on top of another, two Text views, and a Button.

Looks good but lets add a small animation to make it live.

Add @State property wrapper for holding animation state.

@State private var isAnimating: Bool = false

Add scale effect modifier to second image.

.scaleEffect(isAnimating ? 1 : 0.9)

Trigger animation when View will appear. So every time when the user will swipe onboarding view we will get a small scale animation. See the finished OnboardingView.swift code.

And the last thing is update our ContentView.swift file so we can see our Onboarding views.

And that's all we have created a nice looking onboarding view.

Final thoughts

If you wonder why I'm resetting isAnimating state property wrapper on view appearing every time as it already is declared as false, then I did this because I received unexpected behaviour that the animation wasn't triggered smoothly every time I swiped the view. So I did this workaround and it works well. If you have any ideas why is that happening, let me know.
And please leave your critique, comments for this post as it's my first post ever made! I would really appreciate that!

Thank you!

Follow on Twitter.
Link on full project code on GitHub.