WatchKit: Page-Based Navigation

Posted on

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:

WatchKit Interface Controllers

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

WatchKit Relationship

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:

Interface_storyboard_—_Edited

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.

Enjoy the article? Join over 17,500+ Swift developers and enthusiasts who get my weekly updates.

  • Benjammann

    Hey, Thanks for doing these tutorials. They are awesome. Keep it up!

  • Mrugesh Tank

    i am getting error while overriding the initWithContext method i also tried to write same code as you provided on GitHub but still getting error.
    can you help me…..

    • You shouldn’t have to override initWithContext, it comes in the boilerplate code in the InterfaceController. If you’re using XCode 6.2 Beta 2, it’s been re-named to awakeWithContext:

      • Mrugesh Tank

        Yeah, i searched on google and completed that.
        You should mention that in tutorial

        Otherwise all tutorial are amazing….

  • gutte

    what if you want to present the same controller with different data on a page-based navigation (i.e swiping to see data for next day). do you need to copy the same controller over and over in storyboard? how do you pass information between controllers on a page based segue?

    • Matt

      this might be a little late but you can do something like this:

      presentControllerWithNames( [AnyObject], contexts: [AnyObject]) where names is the identifiers of the views you want to present and then contexts are the contexts that link to the identifiers. so you can do this to present multiple of the same controller with different contexts

      presentControllerWithNames(Array(count: 10, repeatedValue: “Identifier”), contexts: objects)

    • Jon

      What if you want intercept a segue *just before* it occurs, and set the context (the analog to prepareForSegue in StoryBoard)? Can’t seem to find any documentation for this. Any thoughts?

  • Jon

    [Sorry.. meant for this to be here, not as reply to gutte below]
    What if you want intercept a segue *just before* it occurs, and set the context (the analog to prepareForSegue in StoryBoard)? Can’t seem to find any documentation for this. Any thoughts?

  • Redge

    Can n number of pages be added programmatically?

  • Shornozzle

    Hi Natasha! I’ve played with this too and it seems to have been implemented exclusively in a linear way. In the example you have above, could you show how to load the watchkit app at the Blue screen and then swipe left for Green and right for Pink, instead of being forced to load the app at Green? When I tried this is permanently hides green and only adds the segue for Blue and Pink.

  • zhnl

    Hi there,

    I am doing something like this and want to know that how can I create an page-based navigation app where all pages tables feeded with Restful service.

    For detail I asked same Question on stackoverflow link is:

    http://stackoverflow.com/questions/35140608/apple-watch-2-page-based-navigation-display-http-data-on-page-changed