Working with Layout

PDF for offline use:
Sample Code:
Related SDKs:

Let us know how you feel about this.


0/250
Thanks for the feedback!

Designing layouts for the Apple Watch screen sizes presents unique challenges.

Design Tips

The key point is: make your user interface readable and useable on a small watch screen, with a large finger. Don't fall into the trap of designing for the iOS Simulator (which appears very large) and a mouse pointer (which works with tiny touch targets)!

  • Use a black background - it creates the illusion of a larger screen with the watch's black bezel.

  • Do not pad around your screen layout - the bezel forms a natural visual padding.

  • Focus on readability. Use font sizes and colors judiciously to ensure text is readable. Use the built-in text styles to get automatic Dynamic Type support.

  • Focus on touch target sizes. Buttons/tappable table rows with text labels should span the whole screen. Apple says "never place more than three items side-by-side", and if you do use icons and not text labels.

  • Use the Menu control to expose less-frequently used functionality to keep your app design clear and concise.

Implementation

Watch Kit includes the following controls to help you build attractive watch app layouts:

Interface Controller

The WKInterfaceController is the base class all of your scenes.

The design surface for the interface controller behaves like a vertical Group: you can drag other controls onto the interface controller and they will be automatically laid-out one above the other:

You can set the Position and Size properties on each control to control their appearance:

When the size is set to Relative to Container you can provide a proportional value and an offset adjustment. This screenshot shows a button that has been set to use 80% of the watch screen's width (0.8):

Group

WKInterfaceGroup is a simple layout container that can be configured to stack controls vertically or horizontally. It includes spacing between each control by default, but you can modify the spacing (and insets) in the Attributes inspector.

Groups can themselves be sized and positioned relative to the controls around them, and groups can be nested to create complex layouts.

Separator

The separator control is intended to help provide visual guidance in your layout. Use separators (or background colors or images) to help the user understand which content is related on your screen.

Note the blue and green separators that don't use the full width of the screen have been configured with either Fixed or Relative to Container sizes.

Content Controls

No layout would be complete without the Label, Image, Button, Switch, Slider, Map, and other controls. These can be positioned in your layouts using Groups or the position and size settings on each control.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.