Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set the backgroundColor of a WKInterfaceController programmatically?

Tags:

watchkit

I couldn't find any way of changing the overall background color of the Watch app interface programmatically.

I therefore tried creating a fullscreen WKInterfaceGroup and changing the backgroundColor of that.

    centralGroup.setBackgroundColor(UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0))

However, I still have unfilled rounded corners and lines on borders.

enter image description here

Is there any way to achieve my goal, of an edge-to-edge background color that fills the screen?

like image 761
KIO Avatar asked Dec 30 '14 00:12

KIO


2 Answers

While you can set a background color for a WKInterfaceController in the storyboard, there is no API that lets you programmatically set it in the present Xcode 6.2 beta 3.

However, you can create a full screen WKInterfaceGroup and set the color of that programmatically. If you also setCornerRadius: to 0 you get the following result: Apple watch screen with screen filled with green Clearly, there are still black lines at the edges here. The other possibility was that setting a solid color image as the background might perhaps scale to fill the full screen with one of the scaling options, but I tested this and the result is identical to the above.

However, it is important to consider the hardware this will be running on. Apple have said more than once in their public statements about the Watch that the intersection between the laminated screen and the edges is so seamless that you essentially can't tell where the screen ends and the edges begin. Taking this at face value, as long as you set the background color of the WKInterfaceController to clear or black in interface builder, so that these edges are black to match the screen surround, then these black lines should be invisible to the end user and are something you can safely ignore.

like image 158
Duncan Babbage Avatar answered Nov 04 '22 15:11

Duncan Babbage


This is how I done it:

  1. Add WKInterfaceGroup and setCornerRadius to 0
  2. Go to WKInterfaceController Attribute Inspector and change Left/Right insets to 0 (Fig.1) (This will remove the extra black line on the left & right side)
  3. Change the color of the WKInterfaceGroup to whatever you want :)

Fig.1

Attribute Inspector

like image 5
aumanets Avatar answered Nov 04 '22 15:11

aumanets