Show Menu

Looking for an iOS Developer?

Submit your 30 day Job Listing for FREE

In this Swift, WatchKit Glance Tutorial I am going to show you how to provide succinct and useful information to the users of the Apple Watch. In what is called a Glance which is an extension of WatchKit. For this we will be utilizing the WKInterfaceController object

This WatchKit Glance tutorial assumes that you have a basic understand of the Swift Programming Language and Xcode basics. It also assumes that you are familiar with watchOS and WatchKit. Check out our watchOS 2 Tutorials to get you unto speed.

Jump To:

What is a Glance?

A WatchKit Glance is delivered as part of your Watch app. The interface for your glance is located in your apps storyboard file and is managed using the WKInterfaceController object. From the official Apple Docs:

A glance is a supplemental way for the user to view important information from your app. Not all apps need a glance. A glance provides immediately relevant information in a timely manner. For example, the glance for a calendar app might show information about the user’s next meeting, whereas the glance for an airline app might display gate information for an upcoming flight. [ 1 ]

If you think of the tiny Watch, or even if you have used one, you know how hard it can be to load an app, you are pressing the wrong one, swiping here and there. With this WatchKit Glance Tutorial I am going to show you how easy it is to create an easily accessible WatchKit extension (Glance) that will only have your users swipe up once, and then right to find your Glance.

The easier to use your app, the more people will appreciate it, and it’s down to us as app developers to make life easy for the user.

The Glance Life cycle

The Glance interface controller is initialized very early on in your app so that it can be delivered to the user much sooner. Other than that, the glance interface controller is pretty much the same as the rest of the interface controllers in your swift application. There is also a method: willActivate that you should perform checks on when initializing as this will make sure that the information displayed is the most up to date.

When you first load your application, WatchKit will automatically load up your storyboard that is relevant to the current interaction, then when the user views the glance, WatchKit will load the glance scene.

Action Performed WatchKit Action
Initial App Launch WatchKit will automatically load the storyboard scene that is appropriate for that current user interaction
User Views App Glance WatchKit loads the glance scene from the storyboard
User launches App Directly WatchKit loads the initial scene for your app. After it loads the scene, WatchKit asks the WatchKit extension to create the corresponding interface controller object, which you use to prepare the scene for display to the user.

Here is a graphical representation from the official Apple Documentation :

WatchKit Life Cycle

Create a WatchKit Glance

Now you have a basic understanding of WatchKit Glances I am going to show you how to create a WatchKit Glance. The first thing you need to do is to create a new Single View Application in Xcode. I am going to assume that you know how to do this and therefor do not need me to show you.

Add WatchKit Target

Xcode implements a watchOS Application as two new targets; a WatchKit Extender and a WatchKit App. Add these by going to: File -> New -> Target, once you have either opened up an existing WatchOS application, or created a new Single View Application. This will open up a dialogue window where you should select Apple Watch under iOS, choose WatchKit, and Click Continue:

swift add watch kit glance target

Once you have clicked continue you will then be taken to another window that will ask you to add in your project options:

watchkit project options dialogue

For the names etc.. you can add in anything that you want. However, make sure that Include Glance Scene is selected an Include Notification Scene is unchecked. Click the Activate button.

Glance UI

By default, new watchOS Applications only display the time. However in this WatchKit Glance tutorial I am going to show you how add text and display an image as part of your glance.
In the Project Navigation pane, select the folder: Glance WatchKit App so it opens and then select the: Interface.storyboard. Now, go to the Glance interface. This is where we will be editing the WatchKit Glance UI. Now you should see:

watchkit glance storyboard

From the Xcode Object Library (Lower Left), drag a UILabel to the upper group in the glance interface graphic. Also, drag an UIImage object to the lower group in the graphic and link that up with a stored image image. Now you should have this:

watchkit storyboard final

WKInterfaceLabel

Split your screens so that you can see both the Glance Storyboard and the GlanceController.Swift. Link up your UILabel either programmatically or by drawing and dropping just like you would in any application so that we have an IBOutlet. This should be inside the WKInterfaceController Class:


class GlanceController: WKInterfaceController {
 @IBOutlet weak var label: WKInterfaceLabel!

//...
}

NOTE:
Do not subclass or create instances of this class yourself. Instead, define outlets in your interface controller class and connect them to the corresponding objects in your storyboard file. For example, to refer to a label object in your interface, define a property with the following syntax in your interface controller class. [ 2 ]

Finally, Let’s set it so that we can change the text in the label for the Glance. Go to the override func willActivate(). Inside that we are going to add:


label.setText("Hello Glance")

Make sure this is above super.willActivate().

Select the dropdown near the run/stop icons and choose Glance – Glance Watchkit App. You might need to select Apple Watch as the External Display under the Hardware menu.

Voila, You have just created your first WatchKit Glance in Swift.

Summary

In this WatchKit Glance tutorial I have explained what Glances are, Their life cycle and why they are an important and cool feature for your watchOS applications. You should now have an introductory level to create Glance Scenes and adding WatchKit Extensions. I have shown you how to edit the WKInterfaceController class to allow us to use the willActivate() method. Finally, I have reminded you about changing the deployment target so that you can run your watchOS app in the simulator.

References

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


Written by:

I work in the shadows. You can thank me by being a good soul.

Comments

comments