How can I set the backgroundColor of a WKInterface

Question

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.

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

Answer 1

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: 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.

Answer 2

Change insets of Your WKInterfaceController to custom and set all to 0. Also, change corner radius of group to 0 too. Enjoy.

Answer 3

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

Answer 4

Try changing the corner radius of the WKInterfaceGroup to 0. You can use setCornerRadius: to change the corner radius.