Swift WatchKit Tutorials: Using Groups in WatchKit

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…

Screenshot 2015-04-12 11.58.10

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

image

You will get another window asking what configuration you want:

Screenshot 2015-04-14 07.56.38

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

image

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

Screenshot 2015-04-14 07.57.58

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

Screenshot 2015-04-14 07.58.31

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:

Screenshot 2015-04-15 06.30.05

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,

Screenshot 2015-04-15 06.35.35

and drag a group into the scene.

Screenshot 2015-04-15 06.41.54

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

Screenshot 2015-04-15 06.43.25

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.

Screenshot 2015-04-15 06.47.24

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.

adding button to group

Unfortunately, we seem to lose the label.

Screenshot 2015-04-15 06.47.58

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

Screenshot 2015-04-15 06.53.30

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.

Screenshot 2015-04-15 07.05.35

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:

Screenshot 2015-04-15 07.11.15

Add a Switch

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

Screenshot 2015-04-15 07.14.17

Drag it out to the storyboard scene

Screenshot 2015-04-15 07.14.59

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.

Screenshot 2015-04-15 07.20.54

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:

Screenshot 2015-04-15 08.02.57

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

Screenshot 2015-04-15 08.10.42

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:

Screenshot 2015-04-15 08.34.58

Quick Starting the Apple Watch app Simulator

You might see this:

Screenshot 2015-04-15 08.46.44

or this for more than a minute:

Screenshot 2015-04-16 07.07.37

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

Screenshot 2015-04-15 11.01.11

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.

notification startup

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.

 

 

One thought on “Swift WatchKit Tutorials: Using Groups in WatchKit”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s