11

I'm building an Apple Watch app in SwiftUI and would like to implement page based navigation so when users swipe left on the home screen, they are taken to another view.

I understand how to use NavigationLink to let users move from one screen to another, but not how to let users navigate from screen to screen by swiping left or right.

Does anyone know how this can be done?

Ryan
  • 630
  • 8
  • 20
  • I just answered this question in another thread https://stackoverflow.com/questions/58036807/cannot-use-tabview-on-swiftui-watchos/58459514#58459514 – heinz_dieter Oct 19 '19 at 00:43

2 Answers2

8

Here is a guide how to implement page-based navigation for watchOS using SwiftUI. The description is based on Hacking with watchOS, SwiftUI edition:

First, create a new SwiftUI view, for example called CounterView.

Secondly, create a subclass of WKHostingController to show that new SwiftUI view. Just copy the controller already existing in HostingController.swift and change its name to CounterHostingController. The file HostingController.swift then contains these two controllers:

class HostingController: WKHostingController<ContentView> {
    override var body: ContentView {
        return ContentView()
    }
}

class CounterHostingController: WKHostingController<CounterView> {
    override var body: CounterView {
        return CounterView()
    }
}

Thirdly, create a storyboard scene to store that newly created hosting controller by opening the file Interface.storyboard and clicking the + button in the top right of the Xcode window. Type in "Hosting Controller" in the search box, drag out a new Hosting Controller and move it next to the existing Hosting Controller. In the identity inspector (click on the fourth item in the second menu from the top on the right side of the Xcode window, the one showing a document with a picture on the top left corner and text floating around it), change Class to "CounterHostingController", then check the "Inherit Module From Target" box.

Fourth, in order to connect these two screens as pages of the same user interface, in the storyboard press Ctrl and click with the mouse on the original hosting controller and hold the keys while dragging the mouse pointer onto the new controller and, after releasing the mouse button, select "next page" for the relationship segue.

  • This is immensely useful, but I'm wondering if there is someway to make another `WKHostingController` that can be attached and gotten to from the left of the Initial Controller. Using the `next page` segue adds it to the right, and I can't figure out how to make something to slide to to the left (`previous page` segue?) – yangnom Aug 14 '20 at 20:55
  • I guess this is not possible as such a non-standard navigation might lead to confusion on behalf of the users. – a learner has no name Aug 16 '20 at 13:40
  • What I'm trying to implement is something like the workout app on Apple Watch. You have the initial view that is showing you your current exercise, the view to the left is the pause/stop etc., the view to the right (of the current exercise) is Now Playing. I'd like to have 3 views, side by side, and have the initial view in the middle, but I'm not sure if that can be done with storyboards. – yangnom Aug 16 '20 at 16:01
  • @yangnom Check out https://developer.apple.com/documentation/watchkit/storyboard_elements/building_watchos_app_interfaces_using_the_storyboard/navigating_between_scenes and specifically the line that says "You can specify a different starting point by calling the interface controller’s becomeCurrentPage() method in its init() or awake(withContext:) method." – hesselbom Jan 11 '21 at 13:44
0

You can use multiple WKHostingControllers to bind them into pages using Storyboard. Every WKHostingController will represent the page in your navigation flow.

Mecid
  • 4,491
  • 6
  • 30
  • 30