I’ve written before that, having lived with the Apple Watch for a while, I felt the watch faces lacked variety. So, I wrote a watch face app, which I now use for the majority of the time.
For my next watch face, I thought it would be pretty cool to recreate the look of my beloved Tissot watch. One of its best features is that extra functionality is controlled by twisting/pressing the bezel. It supports date/time/stopwatch/timer – or you can hide the digital display altogether. Although WatchKit doesn’t allow you to capture a button press, you can use the digital crown to scroll between choices – so I thought I’d offer a couple of date formats as well as the option to hide the date altogether.
Add a Picker control onto your storyboard and connect it to a WKInterfacePicker in your InterfaceController. There are a number of styles that you can choose, but for my purposes, I chose the default List style:
Then it’s a matter of populating the picker’s list of items – for example, this code could go in function awake(withContext):
let blankLine = WKPickerItem() blankLine.title = "" let currentDate = Date() let dayDateMonthLine = WKPickerItem() dayDateMonthLine.title = "\(currentDate.dayOfWeek()) \(currentDate.dayOfMonth()) \(currentDate.monthAsString())" let dateMonthYearLine = WKPickerItem() dateMonthYearLine.title = "\(currentDate.dayOfMonth()) \(currentDate.monthAsString()) \(currentDate.year())" InfoPicker.setHidden( false ) InfoPicker.setItems( [ blankLine, dayDateMonthLine, dateMonthYearLine, blankLine ] ) InfoPicker.focus()
I set the focus on the picker so that the digital crown is immediately responsive (otherwise, you’d have to select the picker first on the touch screen). I also put a blank line before and after the date formats, to make the usage more natural. The code above also uses some extension methods on Date.
Seeing how good this looks, I think Apple are missing a trick. All of their analogue Apple Watch faces are round – I hope they ship a couple of rectangular faces in the next Watch OS upgrade.
2 responses to “How to use the Digital Crown in a Watch Face App”
could you please post the code for the watch app? i cant figure out how to get it to draw the hands
Hi – I’ve added some code on how to write a watch face app to help you with drawing the hands.