Interface Object Layout

By far the most striking difference between WatchKit and UIKit user interface development is their different approaches to layout. On iOS you have free control over the placement of views. You can overlap them, rotate them, and place them anywhere onscreen. WatchKit, as you may have noticed, places everything for you. Try it out: go to your storyboard, make a new interface controller, and drag in a few buttons or labels. You’ll notice that they appear in order, one below the next; the system places them on the screen in the order in which they appear in the Document Outline. If you add tons of interface objects, you’ll notice that interface controllers automatically scroll their contents when necessary; this is accomplished by swiping or by rotating the Digital Crown (on a real device only).

Order matters in WatchKit’s UI system. The storyboard’s Document Outline, accessible by selecting Editor → Show Document Outline, reveals the order of your objects and allows you to reorder them by dragging. Aside from this order, there are some Interface Builder settings you can use to force the layout to do your bidding. By setting the Vertical and Horizontal values under Position in the Attributes Inspector, you can make an object left-, center-, or right-aligned horizontally and top-, center-, or bottom-aligned vertically. In the following screenshot, labels A, B, C, and D are in order alphabetically, but since label C is configured to be at the bottom vertically, it’s moved below label D.

These controls over alignment are indispensable for getting your layout to where you want it. You can also adjust the size of interface objects. Most of them default to Size To Fit Content, but you can override that with either a fixed size in points or a size relative to the object’s container. Setting an object’s height relative to its container to 0.5, for instance, will cause it to fill up half of the container vertically.

For a better handle on custom layouts, it’s time to get your feet wet with WatchKit. Let’s start creating TapALap, the sample app that you will work on in this book.