WatchKit: Page-Based Navigation

I’m currently experimenting with Navigation on the Apple Watch. In the official WatchKit video, they mention that there is a Hierarchical and a Page-based Navigation for the Apple Watch. But there’s a catch! If you look at the available WatchKit controllers in the Interface Builder, you won’t see anything like a Navigation or PageView Controllers that we’re used to in iOS development.

Creating Navigation is actually much simpler with WatchKit!

Setup your Project

Walk through the steps I’ve outlined in my initial WatchKit post – How To Create A “Hello World” WatchKit App. Make sure the app is up and running!

Create Controllers

In your Interface.storyboard, add three different Interface Controllers (your pages), and change the background color of each so they’re easy to tell apart:

Now, just create Segues between each! Control + Drag from one controller to the next, and select the next page Relationship Segue option:

That’s it! If you run the app at this point in time, it’ll work!

Create Additional Interface Controllers

Of course you probably want your Interface Controllers to have more data than just a background color. You can create other Interface Controllers in your WatchKit Extension, and then specify these in the storyboard:

I put in print statements to understand the lifecycle of the three interface controllers as the user pages through them, and here is what I found:

• initWithContext is called for all three Interface Controllers in the page navigation stack when the app first launches
• willActivate is called when the user just scrolls to the page (similar to viewDidAppear in UIViewController)
• didDeactivate is called when the user is no longer on the page (similar to viewDidDisappear in UIViewController)

Enjoy paging with WatchKit!

Check out the source code on Github here.