How to Make a Slide to Unlock Button in SwiftUI
Mobile
5
 min read
July 19, 2022

How to Make a Slide to Unlock Button in SwiftUI

Valeriia Abelovska
Valeriia Abelovska
iOS Developer
LinkedIn Logo

The tutorial doesn’t require adding any third party. The button is built with native SF Symbols and Views. Presented components & modifiers are available for the iOS 13. There is one exception — an improvement mentioned in the 6th step that requires iOS 15. Used colors can be found at the end of the article.

Step 1. Adding a Drag Gesture

We can achieve a “slide” effect by adding a recognition of the drag gesture. The .gesture(DragGesture() modifier attaches a drag gesture to the view . To access the gesture’s values and perform actions let’s use an instance method .onChanged(:). Its closure parameter includes a CGSize from the starting point of the drag gesture to the current position  - value.translation, where width represents a  horizontal axis. Animations below illustrate a size change of the views depending on a dragging distance.

The DraggingComponent containing a gesture modifier is the first step to create an UnlockButton view.

Step 2. Applying Limits & Visual Details

Additionally to minimum width, we need to limit the maximum size of the DraggingComponent, it can be defined from the parent container. GeometryReader changes the view’s size to the maximum available, this behavior is unnecessary for child views.

DragGesture has an instance method .onEnded(_:), that adds an action triggred when the gesture ends. Plus let’s add some haptics and an image that layers in front of the current view with trailing alignment.

Step 3. Staging Background

The UnlockButton isn’t completed without a background and a hint note. The BackgroundComponent needs to be placed behind a layer of the DraggingComponent.

Well done! Unlock button is ready to use 🚀

Golden Touches ✨

Caution! Following steps may cause a creativity burst.

Step 4. Adjusting Color Intensity

SwiftUI has pretty convenient modifiers to work with colors and adapt views to the required design. The hueRotation() modifier allows adjust and animate dominant colors. In color theory Hue can be presented as a circle and angles are used as indicators of color changes.

Let’s add this modifier to the BackgroundComponent.

DraggingComponent needs a small adjustment too. Depending on the value of the  drag gesture we can change transparency of the background view, so the background becomes gradually less transparent as closer it gets to the “unlocked” position.

Step 5. Supporting Simultaneous Gestures

The current appearance of the UnlockButton view doesn’t have classical button attributes — a tap gesture recognizer and a visual response for the pressed state. The best & native way to access and modify button properties is to use the ButtonStyleConfiguration. To complete this step, we will create a base button style, wrap the DraggingComponent into a Button view and apply the created style to it with the .buttonStyle() modifier, and last but not least support both gestures.

A. Creating a Button Style

B. Wrapping the Component into the Button & Applying the Button Style

C. Supporting Simultaneous Gestures

Step 6. Embracing Asynchrony

In case the unlock action requires a response from the backend, let’s add a loading state. To simplify it, I will simulate the request directly in the view, please stick to MVVM in your project.

The last what left is to add an additional state of the button view in the DraggingComponent.

You’ve completed the tutorial. Great job! 🥳

In spite of the fact that the SwiftUI is a young framework with its limitations, it allows you to create beautiful design components pretty fast in so many different ways.

Resources

💡 Source code can be found on GitHub.

Do you want to create breakthrough solutions? Become a member of our iOS team 🍎

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.