Row Types and Storyboard Groups

Every WKInterfaceTable delivers content to the user in vertically stacked rows. To demonstrate this, let’s create a new interface controller in our running app. Once the user is finished with a run, she’ll want to be able to quickly scroll through a history of her runs, comparing distances and paces as she goes. To that end, let’s make an interface controller with a table in it that displays one row for each run, with the newest at the top.

First, open your watch app’s storyboard and drag in a new interface controller. Give it the title “Run Log.” Next, create a new WKInterfaceController subclass and name it RunLogInterfaceController, being sure to add it to your WatchKit extension and not your iPhone app. You’ll come back and implement some methods later on, but for now you just need the class to exist. Head back to the storyboard and select the interface controller you just made. In Xcode’s Identity Inspector, under Custom Class, set the Class value to RunLogInterfaceController. Now your storyboard and your subclass are in sync. Finally, drag the Main arrow to the interface controller so the app starts right at that screen.

To implement the UI, you’ll need to head over to the Object Library and drag a new WKInterfaceTable, listed simply as Table, onto the interface controller. By default, it has one group inside. Each row type in the table is represented by a group in your storyboard; the table will re-create that group for every row of that type. For this row, you want to show the user the run’s date, distance, and duration. You’ll use three WKInterfaceLabel objects for it and arrange them in the group. As you saw in the chapter on groups, you can use subgroups to arrange these labels nicely, and that’s what you’re going to do.

First, create the three labels by dragging them from Xcode’s Object Library to the row group. To help keep track of them as you lay them out, you’ll give them custom titles. In the Document Outline of the storyboard (if you don’t see it on the left side of the storyboard, click Editor → Show Document Outline), you can press ↩ and change the display name of a selected item. Instead of Label, name these “Date Label,” “Distance Label,” and “Duration Label.” Now you can see what you’re doing. The result you want is the date label in large, bold text above the distance label, with the duration label on the right side. To that end, select both date and distance labels and select Editor → Embed In → Vertical Group. The duration label disappears; since the vertical group is by default set to match the width of its container, it pushes everything else away. Select the new group and, in Xcode’s Attributes Inspector, change its width to Size To Fit Content. Now you’ll see all three on the same screen.

Select the duration label, change its font to the built-in Subhead style, and set its horizontal position to Right. Change the date label’s font to the Headline style and the distance label’s font to the Footnote style. Now your row is looking pretty good, if a bit stretched out. There’s a lot of vertical space, so select the group that contains the left two labels, open the Attributes Inspector, and give it a custom spacing of 0. Now that you’ve done all this, your interface controller in the storyboard should look like the following image.

Snazzy! After admiring your handiwork for a bit, you can start putting real data into this row and see how it works. To do that, you need to create a row controller object.