Set WKInterfacePicker color (text or outline)

Question

Does anyone know how to set the Text color or Focus Style Outline color of a WKInterfacePicker?

I don\'t see it Interface Builder, not am I able to find

Answer 1

In fact, the selected answer did not work for me (WatchOS 5, 6), maybe because I've got two WKInterfacePicker objects side by side. The picker uses up all the space in the surrounding group, so the background (color or image) is completely invisible.

However, based on @honcheng answer, I found a 'work around', that creates a 'custom color' selection indicator. But it doesn't look exactly like the original one...

• Create a WKInterfaceGroup object that contains the WKInterfacePicker object.
• Optional: Set the corner radius of this group (and all parent groups it lives in) to '0' [a].
• In 'awakeWithContext:' call 'setContentInset:UIEdgeInsetsMake(1, 0, 1, 0)' [b] on the WKInterfaceGroup object and set it's background color to black by calling 'setBackgroundColor:UIColor.blackColor'.
• In the 'pickerDidFocus:' callback call 'setBackgroundColor:UIColor.redColor' [c] to enable the focus indicator.
• In the 'pickerDidResignFocus:' callback call 'setBackgroundColor:UIColor.blackColor' again to remove the focus indicator.

This is, what the final selection indicator would look like

[a]: Unfortunately the WKInterfacePicker object itself hasn't got a corner radius but is a sharp edged rectangle, so if you would like to have a full rectangle as the focus indicator, the picker will draw over the rounded corners. To avoid this, the corner radius must be removed. I decided to create a top/bottom indicator instead. The image shows a small 'glitch' where the corner radius interferes with the focus indication (left side of the lines). This glitch is removed, when setting all corner radiuses to '0' as mentioned above.

[b]: The (1, 0, 1, 0) creates a one pixel inset at the top and the bottom, of course an full rectangle is also possible (1, 1, 1, 1).

[c]: Of course any color (even a background image) is possible.

The 'glitch', with 'cornerRadius' not set to '0'

Answer 2

You cannot change the color of the default picker.

But you can manipulate the views to make it look like it without slowing down the app.

I created this with 2 WKInterfaceGroup aligned vertically. The group on top has a WKInterfaceLabel for custom caption label, and the group below has a WKInterfacePicker. The WKInterfacePicker is configured as such:

Style: List 
Focus Style: None
Indicator: Disabled 

This will hide the default tint & caption so that we can create custom ones.

In the WKInterfaceGroup for label, I set a corner radius and a background color. In the WKInterfaceGroup for picker, I set a background image, which is an image of a stroked rounded rect.

I use pickerDidFocus and pickerDidResignFocus callbacks to change the background color of the WKInterfaceGroup for label, and background image for WKInterfaceGroup for picker.

Use the picker action whenever the index changes, to update the custom action label.

The result is a custom picker that looks exactly like the built-in WKInterfacePicker, but with a custom tint.