Adding a Glance

As you learned earlier,, each watch app can have one Glance to display information to the user right from the watch face. To add one to HelloWatch, open the project in Xcode and open its Interface.storyboard file. In the Object Library in the lower right (available by pressing ⌃⌥⌘3), find the Glance Interface Controller object, and drag it onto the canvas. You’ll notice it’s full of interface objects, roughly organized into sections. We will discuss these sections, called groups, more later in their own chapter, but it’s important to note that there are two sections to the Glance, upper and lower.

The Glance interface controller is pretty unique in that you can’t directly control its child objects. Try to delete one of the labels, and you’ll see that you can’t! Similarly, you can’t drag new objects onto it from the Object Library. Don’t despair, however; a modicum of customization is still available to you. Select the Glance interface controller and open the Attributes Inspector in Xcode (⌥⌘4). You’ll see the upper and lower groups with their child objects. Clicking a group will allow you to select from the various templates in Xcode. While these templates don’t allow perfect freedom in customizing the Glance, they do offer a range of different user interfaces for it. Select some templates, and then modify the labels to show some content. You may have difficulty fitting text on larger labels; to get around that, adjust the Min font scale setting in the label’s Attributes Inspector to allow the text to shrink to fit. Here’s an example of a Glance:

The first thing you’ll want to do with a Glance is update its content. Glances are interface controllers just like the InterfaceController you modified earlier, so now you need to create a new one for the Glance. Select File → New → File… in Xcode and choose WatchKit Class from the watchOS templates. Name it GlanceInterfaceController and make it a subclass of WKInterfaceController. Make sure the language is set to Swift to match the rest of the project, and click Next. Save it in the HelloWatch WatchKit Extension folder and ensure that the WatchKit extension is the only target checked at the bottom of the dialog. Click Create, and your new class is available. You don’t need to write any code in it; instead, head back to Interface.storyboard and select the Glance interface controller you created. Open the Identity Inspector (⌥⌘3) and enter GlanceInterfaceController for the Class value. Now WatchKit knows what class to create for your Glance. To update content, it’s just the same as our HelloWatch example: set @IBOutlet connections for the UI elements and update their contents.

How do you test your Glance? The easiest way is to set up a new scheme in Xcode to launch the Glance. Select Product → Scheme → Manage Schemes in Xcode and a scheme dialog will appear. You should see HelloWatch and HelloWatch WatchKit App as schemes. Click the WatchKit App scheme; then click the gear icon at the bottom of the dialog and select Duplicate. In the next dialog, change the name from Copy Of HelloWatch WatchKit App to HelloWatch WatchKit App - Glance. Select Run from the left column and open the Info tab. Change the value next to Watch Interface from Main to Glance. This will run the Glance when you run this scheme from Xcode. Try it now; you should see your labels from the storyboard. If you click the Glance’s UI, the main WatchKit app will open.

Glances are a nice way to provide some quick information to your users. Used properly, they can integrate your app into your users’ daily routine and really become a part of their life. You’ll see more on Glances later in the book and learn how powerful they can be. Now that you’ve seen some more of how WatchKit extensions are organized, you might be wondering why HelloWatch has three parts: an iOS app, a WatchKit app, and a WatchKit extension. Let’s look at the relationship among the three.