Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set WKInterfacePicker color (text or outline)

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 any property items in code where I can set it.

Here's IB:

enter image description here

like image 605
SRMR Avatar asked Mar 10 '23 12:03

SRMR


1 Answers

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. enter image description here

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.

like image 197
honcheng Avatar answered Mar 23 '23 04:03

honcheng