Positioning Tutorial in WatchKit

Positioning objects in WatchKit is limited in comparison to iPhone apps. There is no Auto Layout, the objects are stacked vertically by default. To position objects next to each other a group object must be created. This tutorial will display the four main directions of a compass. This tutorial is created with Xcode 6.2, which includes the WatchKit SDK.

Open Xcode and create a new Single View Application. For product name, use WatchKitPositioningTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Select Swift as Language and make sure iPhone is selected in Devices.

.From the File menu, select New -> Target. Navigate to iOS -> Apple Watch and select Watch App

Choose Next.Deselect the Include Notification Scene, leave the other options at default. click Finish.

The objective of this tutorial is to position labels with the main directions of the compass: 

  • North - top center
  • West - left center
  • East - right center
  • South - bottom center

The final result will look like this.

Go to the Storyboard in the WatchKitPositioningTutorial Watch App target folder. Add four Labels and give them a title of North,West,East,South. Position the labels using the positioning section in the Attributes Inspector. The Storyboard should like this.

The objects are stacked vertically by default, so it isn't possible to align the West and East labels horizontally. To make this possible we need to  add a group. Drag a group from the Object Library to the storyboard and center it horizontally and vertically. Drag the West and East labels into the group. This can be best done in the Document Outline.

The final storyboard should look like this.

Select the WatchKitTutorial Watch App Scheme and Build and Run the project, using the normal iPhone Simulator, the screen is still blank. Inside the Simulator go to Hardware -> External Displays menu and select one of the Apple Watch simulators. Again, run the project and the Labels are displayed on the Apple Watch Simulator.

You can download the source code of the WatchKitPositioningTutorial at the ioscreator repository on Github.