Join Simon Allardice for an in-depth discussion in this video Developing UI for Apple Watch, part of Developing for Apple Watch First Look.
- Since the dawn of time, well, since 2009 anyway, there has been heated debate on whether it was best to create an iOS user interface visually, just using the interface builder point of Xcode, building your storyboards and connecting everything there. Or, instead, in code by writing Objective-C or Swift to manually instantiate and configure Ui objects or perhaps, some mixture of the two. If you were one of those folks who sneered at storyboards and mocked XIB files, and proudly proclaimed how you would only ever create your user interfaces purely in code, and how you haven't even looked at interface builder since Xcode 3, well, I'm afraid you bet on the wrong horse, because this code-only approach will not work here.
You can't create Apple Watch user interface programmatically, you must define it in storyboards. After all, you can't expect a user to launch your app on the watch, wait for it to launch the Watch extension on your phone, which then runs all the code to the phone to generate and configure the entire user interface, and then sends that whole thing images included, back over Bluetooth, over to your watch before you see anything at all. Now your user interface needs to be on the watch already. And that is all the Watch app part of your project is, it's your storyboard and your resources, any supporting graphics that you need, things like the icons for your app for the watch home screen.
So the WatchKit app really is just your user interface. But, Simon, you say, I can't just have a static user interface. I need to be able to change things, I need to be able to update my Ui with new values and new information. And of course you can do that. We already saw how to update the text in a label in the Watch app, using code written in the Watch extension, so you can certainly update your watch user interface elements in your code. What you can't do is create those elements in code, they must be all defined in the storyboard.
And you must define as much as possible about these Ui elements in the storyboard, using the interface builder inspectors, because there are restrictions on what you can programmatically affect. What I mean by that is just because you can change a property of a Ui element over here in the inspector, does not mean you'll be able to change it later in code. One specific example, so in this simple app, this label. And the label, we can use the inspectors to change the Text, we can change the Color of the label. We can change the Font and the Font Size, we can change the Alignment of the text in the label, we can say how many Lines this label is allowed to contain.
But, when writing code in your WatchKit extension, you can write code to change the text in the label, and you can write code to change the color of this label, but you can't change things like the alignment it uses, you can't change how many lines it has, those things all have to be defined up front in the storyboard. And more importantly, the fact that the label exists at all must be in the storyboard. You can write all the code you want, you will never be able to create and add a new label programmatically in a WatchKit extension.
So here's how we're gonna become comfortable with Watch user interfaces. We're going to start with a single screen, a single WatchKit interface, and first work with the straightforward Ui elements. We got labels and buttons, images, groups and separators, and switches and sliders, and we'll use these to understand the way that a watch Ui is arranged and configured. We'll re-create some typical screens from the built in Watch apps, not worrying too much yet about functionality, just about layout and the rules of layout. We'll then get into the more complex controls, specifically watch tables and rows.
And they're quite different from tables on iPhone and iPad. And once we're comfortable with creating Watch Ui for single screen, we'll see how to expand that WatchKit app into having multiple screens of content, and the different ways that can be done. First up, a few general principles of Watch user interface layout.
- Core concepts and architecture
- Creating a user interface for Apple Watch
- Handling scrollable content
- Creating menus, buttons, and groups
- Using control and lifecycle events
- Creating and populating Apple Watch tables
- Building glances and notifications