WatchKit: Hierarchical Navigation

I’m currently experimenting with Navigation on the Apple Watch. In my last post, I covered Page-Based Navigation. This time I’m going to look into Hierarchical navigation. Again, I want to point out that there is no such thing as a Navigation Controller in WatchKit!

Since a Table is one of the best use-cases for Hierarchical navigation, I’m going to expand on the Minions Table I created in a previous post – Let’s Create a Table. So go through the steps mentioned there to get your project set up!

In this post, I’m going to go through the part of selecting a Table Cell, and going to a Detail Interface Controller.

Create a Detail Interface Controller

Of course the first step is to create the next Interface for the Hierarchy to happen! Just drag another InterfaceController to the Storyboard, and get it set up:

Screen Shot 2014-11-19 at 9.00.13 AM

As you can see, my detail interface has a label and an image. I also created a custom MinionDetailInterfaceController, in which I added the IBOutlets for my Label and Image:

Interface

Create a Segue

Now comes the easy part. Just create a push segue (Control + Drag) between the Table Row Controller and the Detail Interface Controller.

Segue Push

Now, when you run the app, select the cell, and it goes to the detail view!

As you can see, we want to pass information between the two interface controllers for it to be useful…

Pass Information

You can pass the information via between the Interface Controllers via the segue. In the InterfaceController, just add this function:

context for segue watchkit

Now, in the MinionDetailInterfaceController, you get this context object in init!

Context Detail WatchKit

Now, when you run the app, you can see the full functionality!

That’s it! It’s that simple.

You can view the full sourcecode on Github here.

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

  • Aslı Sabancı

    Since init(context: AnyObject?) doesn’t exist anymore, the viewers of this tutorial can replace that overridden function with this:

    override func awakeWithContext(context: AnyObject?)
    {
    super.awakeWithContext(context)

    if let minionName = context as? String
    {
    interfaceLabel.setText(minionName)
    }
    }

  • Jen Looper

    This was so helpful, thank you!!

  • acrookston

    Thanks to @gosalyn:disqus. It would be helpful for people not reading the comments if the screenshot with the init(context..) could be updated. I ended up checking the Github source to find the init thing.

    Great tutorial though, thanks!