A new UI elements picker is introduced in WatchKit. Two classes WKInterfacePicker and WKPickerItem are involved. WKInterfacePicker stands for a list of WKPickerItems you can look through and select with Digital Crown.

For different use cases, there are three styles for picker. They are list, stack and sequence. Let’s see one by one.

The list style is the simple one. Normally, the UI elements in each WKPickerItem include main title and accessory image. with turning Digital Crown, the list will scroll vertically. Let’s see an example.

First, set up iOS app project with a single view and add new target for watchOS application.

image

Drag a picker and a label from the Object library at bottom right to the storyboard for watch app.

image

Generate the IBOutlets

image

Add the IBAction

Here is the result.

gif

In each style, there is two sub-style setting: Focus Style and Indicator. We can set both settings in Attributes Inspector on top left. If set Foucus Style to Outline With Caption, you can get different picker theme.

image

Note: We can’t get indicator in simulator even set Indicator in Attributes Inspector. If you get it, please teach me how. Thanks.