Group Basics

You can think of every interface controller in your app as its own group. When you add interface objects to the interface controller, WatchKit’s layout system places them in order, top to bottom. The first cool feature of groups is that you can control the direction of the layout—while the interface controller in the storyboard defaults to arranging its objects top to bottom, a group can also arrange its objects left to right. You can also specify the size of the group relative to its container, whether that’s the interface controller itself or another group. And you can pick a background image or background color. Best of all, you can add a group to another group, allowing for nested groups. Nested groups allow for some extremely complicated bits of user interface, as you’ll see when you build a more complicated UI later in this book. The following figure shows a quick example of nested groups.

This interface controller has two groups as children: Group A (with a green background color) and Group B. Groups A and B are set to have the full width of their container and half its height. You can see this in the Attributes Editor in the screenshot; values are in the range 0–1, so the height is set to 0.5. Group B, which is set to a horizontal group, has two children, Groups C and D. Each of those is set to the full height of its container and half its width, so they split it down the middle. With some labels in Groups A, C, and D, all set to center themselves horizontally and vertically, you see the result. By using groups in this example, you’re able to place two elements next to one another; without Group B, Groups C and D would still appear one after another vertically, even if set to left and right, as shown here.

You can nest groups to your heart’s content, using the relative sizes to adjust positioning. You can also set precise sizes for either width or height using points, allowing you to control the exact size of a group. These are the basics of using groups. To see more advanced features, let’s head back to TapALap and make the UI more expressive.