WatchKit: Let’s Create a Table

I can’t get enough of WatchKit. Sooooo much to learn! After staring with a simple Hello World app, I’ve moved on to building a Table-based WatchKit example:

Here is how to make a Table 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 a Table

In your Interface.storyboard, add a Table element:

Notice that each WKInterfaceTable row has a Table Row Controller. If you expand it, you’ll see a Group. Add a Label and an Image to the Group inside the Table Row Controller, and adjust the sizing as needed:

Create a Custom Table Row Controller

Since we’re going to have custom row elements, create a Table Row Controller. Despite it’s name, a Table Row Controller is actually an NSObject:

So you can create a your own custom NSObject, and subclass the Table Row Controller. To do that, just create a new NSObject file in your WatchKit Extension, and import WatchKit:

Now, you can subclass your Table Row Controller in the storyboard to this custom Table Row Controller:

Also make sure to add an identifier to your row:

Next, you can create an IBOutlet for your Image and Label:

Now, let’s populate some rows!

Create a Data Source

As with any Table, you need a data source. In my case, I’m going to create an array of minion names, whose image names match their names:

Load Table Data

Almost there! But first, don’t forget to create an IBOutlet for your Table in the InterfaceController:

We can now add the a loadTableData() function and call it in InterfaceController’s init:

With a few label and image sizing adjustments in Interface.storyboard, when you run the app, you can now see a pretty nice table of Minions!

Get the full source code on Github here!