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.
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.
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 🚀
Caution! Following steps may cause a creativity burst.
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.
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
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.
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.
💡 Source code can be found on GitHub.
Do you want to create breakthrough solutions? Become a member of our iOS team 🍎
