A Quick View Into Apple WatchKit

Get a tour of the basics of Apple Watch development!

Apple released their much awaited Apple Watch SDK called WatchKit this week.  Through the WatchKit we start to get an idea of just what the Apple Watch is capable of and also what it’s not.  Here are some of the things to know to help get you started building Apple Watch Apps.

Architecture

Perhaps the most important thing to understand is that every Apple Watch app is an extension of an iPhone app.  The Apple Watch app consists of the bundle of storyboard and static resources required to display the app UI on the watch, but the real power for any app comes from its parent iPhone app. UI elements cannot be dynamically added or removed on the watch by the Watch App.  Communications between the iPhone app and the Watch App is performed via a WatchKit Extension as shown in this diagram.  This extension allows actions taken on the Watch to be communicated to the iPhone app and the iPhone app then drives the UI on the watch.

Screens

There are three types of screens available for developers on a watch app.  These are:

1. Watch App UI – This is the primary user interface for your watch app.
2. Glance – Glance screens offer a way for an app to provide data to the user based on the user swiping up on the watch face.  These are all template based and will cause the watch app to launch if not already started.
3. Notifications – These screens consist of short and long look notifications.  A short-look notification is a limited view with only an icon, title text, and the name of the app itself visible to the user.  If however the user continues to hold up the watch, the UI will switch to the long-look notification view which offers more of a customizable UI along with a configurable “sash”.  In your watch app you’ll need to supply static notification screens for times when data access or connectivity with the phone is not possible.

WKInterfaceController

There’s a 1-to-1 correlation between screens on the watch app and interface controllers.  The WKInterfaceController class that you create manages the UI elements on the screen through the use of Outlets and follows a target-action design pattern similar to other iOS app development.  This is the primary driver for your watch app.  The lifecycle for WKInterfaceController is as follows:

1. The app is launched from the watch the WatchKit Extension on the iPhone is launched.
2. The storyboard is loaded on the watch and initial interface controller is loaded on the iPhone.
3. When the UI is ready on the watch, the interface controller will receive the initWithContext message via the WatchKit Extension on the iPhone.
4. Just before the UI is displayed on the watch screen the willActivate message is called on the WatchKit Extension.
5. As the wearer interacts with the UI on the watch, interface controller action methods are called allowing you to update the UI elements on the watch.
6. The didDeactivate message is called on the interface controller when the UI is no longer visible on the watch and the WatchKit Extension will be suspended.

Many of the common UI elements from iPhone development are available on the watch UI including buttons, images, switches, sliders, and labels.  There are however some special UI controls for the watch.  These include the separator object, as well as Date and Timer objects.  There are other objects available for layout and display that are very watch specific.  These are:

• WKInterfaceGroup – The WKInterfaceGroup object is used to manage layout of the UI.  It can be configured for horizontal or vertical flows as well as be nested to provide complex layout options.
• WKInterfaceTable – The WKInterfaceTable object is meant for dynamically content.  The object can support multiple row types and each row is backed by a row controller object.  Selection of the items in the table are managed by your interface controller.
•  WKInterfaceMap – The WKInterfaceMap object is used to display a static non-interactive map image to the user.  This image is created dynamically on the iPhone and then sent to display on the watch.  It can also contain up to 5 annotations including pins or custom images.
• WKinterfaceDevice – The WKInterfaceDevice object is used to allow your interface controller to inspect the features of the UI.  Apple Watch comes in two sizes and each size sports a different resolution.  The 42mm watch has a screen that is 312×390 pixels and the 38mm watch has a screen that is 272×340 pixels.  This object also provides information on the current locale as well as any sizing preferences the user may have selected.

Navigation

There are basically two options for navigation, either Hierarchical or Page Based.  Hierarchical navigation behaves similar to UINavigationController on iOS.  Page based navigation behaves similar to the UIPageViewController on iOS.  The navigation styles can’t be mixed on a watch app.  There is a slight variation of this in that any navigation style can launch a modal page based navigation controller.

Menus

Menus can contain 1 to 4 items and includes an icon and a label.  There are default menu items available for use and the menu controllers can launch modal interface controllers when touched.

There’s quite a bit more going on under the hood of Apple’s “Next Big Thing”.  If you want to learn more about Apple Watch development, check out the Apple Developer site.  If you are just getting started with iOS development these courses will get you writing apps in no time.

• Building Your First iOS App with Objective-C by Paul Usher
• iOS Development with Objective-C: Now You’re Serious by Paul Usher