Apple Watch ⌚ / WatchKit / UI Elements / Features / Cheat sheet


For the past week I have been looking at the WatchKit SDK released by Apple.

My aim was to find out all the limitations and have a look at what can be achieved with this new/young API.

I was very surprised to find out that not a lot was exposed to the developers and It feels like we regressed quite a lot in terms of programming.

There are no getters and the extension should keep track of the state change of its elements

The root class is WKIterfaceObject and the only properties you can change is Hidden / Alpha / Width / Height

You cannot create any elements dynamically!

The most useful object is WKInterfaceGroup

WKInterfaceGroup

You can add UI Elements inside the group and set the layout to be either Horizontal or Vertical.

There are no overlaps between elements (e.g. You cannot add a label on top of an image)
Everything has to be created Up-Front in a storyboard

Some elements have background images. WKInterfaceGroup, WKInterfaceButton, WKInterfaceController all have background images.

The Apple Watch relies heavily on animated UIImages to simulate animations. James Frost created a library on github that generates images from UIViews.

I’ve recently converted the code into Objective-C if anyone is interested.

Below is what I’ve compiled so far about WatchKit, I’ve taken screenshots from the WatchKit catalog / Storyboard / Interface of each Element. I hope this is useful to developers.

WatchKit Cheat Sheet

I would suggest to all developers to sit down with designers and start creating mockups for existing client apps. That way you can start educating designers of what you can/cannot do with Apple Watch. It’s a very useful exercise that will benefit any company.

Thank you all!