watchOS 4 Tutorial Part 2: Tables

In Part 1 of this series, you learned about the basics of watchOS 4 development by creating your first interface controller.

In this second part of the series, you’ll add a table to your app that displays a list of flights.

In the process, you’ll learn:

• How to add a new interface controller, add a table to it, and build the prototype row.
• How to create a subclass of WKInterfaceController to populate the table, configure the rows, and handle selection.
• How to present an interface controller modally, and pass it data to present.

And with that, let’s get going! ┗(°0°)┛

Getting Started

Open Watch\Interface.storyboard, and drag another interface controller from the Object Library onto the storyboard canvas, to the left of the existing Flight controller.

With the new interface controller selected, open the Attributes inspector, and make the following changes:

• Set Identifier to Schedule.
• Set Title to Air Aber.
• Check Is Initial Controller.
• Check Activity Indicator On Load is checked.

As with the Flight controller, you set the identifier so you can refer to this interface controller in code. This is the real initial controller for the Watch app, so you set its title, and check the box. This controller loads a table from some data source, so you display the activity indicator.

Now for the interface: drag a table from the Object Library onto the new interface controller:

Select the Table Row Controller in the document outline:

Use the Attributes inspector to set its Identifier to FlightRow. The identifier doubles as the row type when you’re informing the table which rows it should be instantiating, which is why it’s important that you set it.

Building the Row’s Interface

The table row is actually a group, so you can set it up with a layout as complex as you want.

Your first task is to make two changes to the default layout group. In the document outline, select the group inside the table row, then use the Attributes inspector to set Spacing to 6 and Height to Size To Fit Content.

Table rows have a standard, fixed height by default. However, most of the time you’ll want your rows to display all the interface objects you add to them, so it’s always worthwhile changing the Height attribute in this way.

Next, drag a separator from the Object Library into the table row’s group. You won’t be using it to actually separate anything, but just to add a little visual flair to your table row. With the separator selected, use the Attributes inspector to make the following changes:

• Set Color to #FA114F (recently used color Air Aber pink).
• Set Vertical Alignment to Center.
• Set Height to Relative to Container.
• Set Adjustment to –4.

The inspector should now look like the following:

The table row suddenly grows to fill the screen! But you’ll fix that now, as you layout the row.

Drag a group from the Object Library onto the table row, to the right of the separator. With the group still selected, change the following attributes in the Attributes inspector:

• Set Layout to Vertical.
• Set Spacing to 0.
• Set Width to Size To Fit Content.

You’ve probably noticed that you’re often manipulating the Spacing attribute; this simply tightens up the space between each of the interface objects in the group, and makes things look a little sharper on the small screen.

Drag another group into the group you just added, and make the following changes:

• Set Spacing to 4.
• Set Height to Fixed, with a value of 32.

Now the table row is back to a reasonable height!

Next, add a label and an image to this new group. You’ll configure the label, then copy and update it, to display the origin and destination of each flight.

Now you need something to put in that image. Download this image, and add it to Watch\Assets.xcassets. This should create a new image set called Plane, with the actual image in the 2x slot:

You want to tint this image to Air Aber pink, so select the image, then use the Attributes inspector to set Render As to Template Image.

Re-open Watch\Interface.storyboard, and select the image in the document outline. Using the Attributes inspector, make the following changes:

• Set Image to Plane.
• Set Tint to #FA114F.
• Set Horizontal and Vertical Alignment to Center.
• Set Width to Fixed, with a value of 24.
• Set Height to Fixed, with a value of 20.

Select the label, and set its Text to MEL. Next, change its Font to System, with a style of Semibold and a size of 20. Finally set its Vertical Alignment to Center.

Copy the label, then paste it on the right of the image. Change its text to SFO and its Horizontal Alignment to Right. Your table row should now look like the following:

The interface object hierarchy should now resemble the following:

You’re almost done with the table row’s interface; you just need to add the flight number and status.

Drag another group from the Object Library onto the table row, making sure it’s a sibling of the group that contains the origin and destination labels:

As you continue to build this interface, you’re seeing further examples of how you can use nested groups with mixed layouts to create complex layouts. Who needs Auto Layout?! ;]

Drag two labels into this new horizontal group. Use the Attributes inspector to make these changes to the left label:

• Set Text to AA123.
• Set Text Color to Light Gray Color.
• Set Font to Caption 2.
• Set Vertical Alignment to Bottom.

Next, make these changes to the right label:

• Set Text to On time.
• Set Text Color to #04DE71.
• Set Font to Caption 2.
• Set Horizontal Alignment to Right.
• Set Vertical Alignment to Bottom.

With these final changes, the completed table row should look like this:

Now that the table is set up in Interface Builder, it’s time to populate it with some data.