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!