WatchKit is not UIKit.  How you program for Apple watch differs greatly from how you program a iPhone or iPad. There are controls that look familiar, but act very differently.  In this lesson you’ll learn about  groups, a layout mechanism which is, but should not be, compared to subviews. We’ll also introduce glances and notifications, and show a little workaround using them if your simulator is being stubborn.

Start by creating a new app for your phone by Command-Shift-N and picking a single view template. Name the project SwiftWatchKitButtons using Swift as the language. We won’t be writing anything for the phone, we just need it as a base. I left the device type as Universal. Save the project.

From the editor, select Editor> Add Target…

Another window pops up asking which template to use for the template. Use the WatchKit App Template found under Apple Watch

You will get another window asking what configuration you want:

For this app, check the Include Notification Scene and Include Glance Scene.  Press Finish. You will get this message:

Activate the scheme. You will be in the extension. Look at the Navigator and you will see some unfamiliar files from the last :

There is now controllers for the glance and the notification in the extension folder. There is also new scenes in the storyboard.

The top is the watch app. The center scene is the Glance, and the bottom is the Notification.

Using Groups

Take a look at the glance and you will see two objects already on the scene:

These two objects are groups. Groups allow us to make sub-arrangements of objects either vertically like we have on a blank scene or horizontally.

Using Groups

We can add groups to our own objects.  We’ll leave the glance alone for now, but go to the app scene. Find the group in the object library,

and drag a group into the scene.

In the attributes inspector, you’ll see the layout setting is Horizontal.

Groups have two settings Horizontal or Vertical. The vertical setting is the behavior we saw in the last lesson: new objects added to the scene get placed above or below existing objects. The horizontal setting in groups let you place objects to the left and right of each other.  Drag out a label and place it into the group.

Now place a button in the group just to the right of the label. In the last lesson, the storyboard wouldn’t let you do this, but within the horizontal group it will do this.

Unfortunately, we seem to lose the label.

With the button selected, look at the Size section of the attributes inspector.

Our width is relative to the entire size of the container, so it hogs the space. Change width to Size to Fit Content, and the label re-appears with a properly sized button.

Change the button’s horizontal position to Right horizontal and Center vertical in the attributes inspector.  Make the background Light Gray and the title text Black. Change the title of the button to Work Out! Select the label. Set its vertical position to Center.  Select between the label and the button to select the group. Position the group vertically on the bottom. Your scene should look like this:

Add a Switch

Another control that might look familiar is a switch. Find a switch in the object library

Drag it out to the storyboard scene

You’ll notice that unlike an iOS switch, this one has a label. This switch is essentially a pre-defined group. We can access it components either by the attributes inspector or by code.  In the attribute inspector, change the title to Run, and set a vertical position of Center.

Drag a group onto the storyboard. Change the Layout to Vertical. Drag a timer into the group. Make the horizontal position center.  Drag another group. Leave the second group horizontal. Add two labels to this sub group.  Change the right label to Eat Pizza!! You should have this:

To see the groups nested, change the background colors of the two groups:

We’ve completed the layout for the watch app. Make sure you have the WatchKit app scheme selected.  Build and run. you should see this:

Quick Starting the Apple Watch app Simulator

You might see this:

or this for more than a minute:

You can wait a minute or two and then you might see the scene.  I’m not sure why this happens but watch apps sometimes do not connect correctly, particularly in Xcode 6.3. You might find that it never connects.  There is a trick I found that does work: Launch the blank  glance  or notification instead.

Glances are meant to give a fast status of a running app. They convey information only. Tapping on the glance launches the watch app.  We’ll set one up completely in another lesson, but for now we’ll just leave the basic glance template. Set the Scheme to Glance

Build and Run. You still get a blank screen, but you can click anywhere  on  the glance.  You might need to click it a few times — the simulator is slow and not as sensitive as the force touch watch.  You can also do the same with the notification.  In Xcode, Set the scheme to Notification. For the notification click on the first button button.

And you get our app.  In the next lesson, we’ll continue building this app with adding outlets and actions for our button, switch, labels and timer.