Create your custom view router with SwiftUI (2/X)
This article is the second part that builds upon the basics that were introduced in Create your own custom view router with SwiftUI (1/X).
In this second article we will extend the basics from the first article on apply some gestures to our project.
To make things work, we need to take a look at how gestures work in SwiftUI. This is indeed pretty straight forward; we basically declare a gesture, e.g.
DragGesture inside a
We can declare a
DragGesture either with no parameters, or we can pass
coordinateSpace. This way we can create a gesture with a minimum dragging distance and the coordinate space of the gesture's location. The
coordinateSpace can either be
named(). In this example we're using
.local as we want only to recognize the local gesture per view.
Extending The Basics
To switch the view based on the gesture, we can implement different functionalities. The one we’re deploying here is a function within our
ViewRouter enum to go either to the next or the previous view. We could also implement a switch statement in every view, but that would be unnecessary repetition.
This way we provide functions that can be accessed in our views, as we already reference to
Implementing The Changes
We start implementing the changes in
CustomPageView.swift. Previously, we had already referenced to
ViewRouter by implementing a
@State variable that holds our current page. We extend our variables by another
@State variable that holds a
Bool value called
showSettings. We will later use this to either show or hide a settings view.
- We introduce another variable that holds a Bool value. That value either is true or false, corresponding to the SettingsView being shown or hidden.
- We extended our views, as they not accept two parameters. They do accept our ViewRouter.page as a Binding as well as showSettings as a Binding. How this is exactly implement, will be shown down below.
- The settings view is the only view that is displayed in another way. It is shown as a sheet, which means, that it slides into view from the bottom edge.
Changes Made to Individual Views
As I said above, we also need to change our views a little bit to not break the code.
- We declare our new Binding in the same way we did with
- In this simple example we modify our
Textwith a gesture, that changes either
showSettingsbased on the gesture done. To do so, we introduce the
.gesture()modifier along with
DragGesture()as described further above. We also want some code to be triggered after the gesture, hence the
- Next we define what do to based on a
valueprovided by the gesture. Actually it's quite simple: if the width is smaller than zero, and the height is somewhere between -30 and 30, we assume a swipe to the left. We want then to go to the next page. Don't get confused by the second pair of paratheses, we need to put them there, because we didn't create an instance of ViewRouter but only reference to the type itself.
- The last step is to set
showSettingsto true, if we swipe up.