Adding Detail to a Screen

The Go Running screen in your TapALap app is pretty bare at the moment—just a green button. There’s more information you want to display on this screen: the track on which the user is about to run (with the ability to edit it) as well as some stats about the runner’s overall performance. Let’s do the performance stats first.

Using Groups for Advanced Layout

Your users will want to know how many runs they’ve been on and their average pace. To that end, let’s add one group for each of those topics to the interface controller. Drag out a new group and add two labels to it. This will be the group for the number of times the user has run using your app. Change the text of the first label to a number—I use 5 in my example—so you know what it’ll look like with data in it. Change the text of the second one to “Runs.” It doesn’t look fantastic yet, so let’s make some changes to improve its appearance. Select the group and then, in the Attributes Inspector, set Layout to Vertical. Give it a dark-gray color to fill in the background, and change the Spacing property to 0. The Spacing property adjusts how close child elements are to one another, and for this example you want the labels to be relatively tight. For the size of this group, select Relative To Container for Width and enter 0.35; you can leave the height at Size To Fit Content.

Next, select the number label and increase its text size. I selected the System Bold font at 35 points. To select the font, tap the icon at the right of the font name (see the following screenshot). Set its Horizontal position to Center and its Vertical position to Top. This makes it nice and prominent in the group. For the other label, I selected the built-in Footnote text style. Change its Horizontal position to Center and its Vertical position to Bottom. For both labels, you can leave the Width and Height settings as they are.

For the second group, you can select the group you just made and copy and paste it into the Document Outline. Starting with the copy of this group, you can make a few small changes. Change the width of the new group to 0.65 relative to its container and change its horizontal position to Right. Change the text of the top label to something that looks like a time; I used 9:12 even if that’s a bit optimistic for my real-life running speed. Change Runs to Average Pace. I also changed the font of the pace label from Bold to Regular weight. When you’ve finished you’ll have two groups, but they won’t be next to each other (as you see here).

Select both groups, click Editor → Embed In → Horizontal Group, and they’ll fit next to each other beautifully, as shown here.

You also need a way to edit the track. For that, you’ll add another WKInterfaceButton, but this one will be unlike the others you’ve seen so far: the button itself will be a group.

Using Groups for Button Contents

Drag a new button onto the interface controller. You’ll put this one at the top. Instead of setting a title, change the Content setting in Xcode’s Attributes Inspector from Text to Group. Its appearance changes from the default button appearance to an empty group. Add three labels to the group. You’ll configure them for your content next.

The first label will be a heading for this group. Change its text to “Selected Track” and its font to the built-in Headline style. This label’s text won’t change, so you’re finished with it at this point. For the second label, change its text to “Gym” and its font to Subhead. You’ll use this label for the name of the track. In case this name gets long, change its Min Scale property in the Attributes Inspector to 0.8; this allows WatchKit to shrink the text in the label by up to 20% to make things fit, maintaining a minimum font scale that you set. (The minimum font scale setting doesn’t work for multiline labels; instead, they’ll expand to fit their text, up to the number of lines you specify. If you specify 0 lines, the label will automatically use as many lines as it takes to fit its content.) The third label will show how long each lap of the track is. Change its text to “0.25 mi” and its font to Caption 2. Change its minimum scale to 0.75.

The button is looking OK, but it could look better. Let’s start with the label positioning. First, change the group inside the button’s layout to Vertical. Change the lap distance label’s Horizontal position to Right, and then embed it and the track name label in a horizontal group. This places them side by side and frees up some screen space. Next, you want to bring the contents in a little; by default, they extend to the edge a bit too much for my taste. Select the group directly underneath the button in the Document Outline, open Xcode’s Attributes Inspector, and change its Insets value to Custom. When you do, you’ll notice four new values to set. Change the Top and Bottom insets to 2 and the Left and Right insets to 4. This will bring in your content nicely. Next, set the Color property of the group to the same dark-gray color you used for the statistics groups.

Build and run the app. Notice that you can tap the Start Run button, and it will compress when you tap it, but you can also tap the Selected Track button, and it will compress with all of its contents. This may be confusing to users, because the top button looks similar to the lower groups, so let’s make one final change. Similar to the disclosure indicator for a table-view cell on iOS, you’ll use a right-facing chevron to indicate that tapping the button will go to a different interface controller. I’ve created a simple chevron image that you can find in the book’s source code.^[6] In the Project Navigator, open the Assets.xcassets asset collection in the TapALap WatchKit App group. Add [email protected] as a new image asset named chevron. Head back to the button group and add a new WKInterfaceImage (named Image in the library) to it. In the Attributes Inspector, change its Image property to chevron, and you’ll see the image you added. It will be there but in the wrong place entirely.

To fix the positioning of this image, you need more groups. Ideally the chevron image will be at the right side of the button, centered vertically. To begin, set its horizontal position to Right and its vertical position to Center. Now, you want to put this in a horizontal group with your other content, but you want the existing content to remain vertically oriented. Select the Selected Track label and the group containing the other labels, and embed them in their own vertical group. This won’t fix the problem, but it will let you perform the next step: change the group directly underneath the button’s layout back to Horizontal. The image disappears! It’s actually still there but pushed offscreen. Select the vertical group you made for the three labels and change its Width property to Relative To Container. To bring in the right side and display the image, set the Adjustment property to –12. Now you can see all of the labels as well as the chevron image. If your interface controller looks like the image here, you’ve done everything correctly.

As you can see, groups give you fine-grained control over your app’s contents. Apps aren’t design comps, however; they move around, respond to their users, and update accordingly. So next let’s see how groups can help you with amazing animations.