It is becoming common to see WatchKit UI that includes a chart-like animating image with text overlaid on top of it. Apple’s Activity app is a great example:
Yet, today when I tried to create this type of interface, I got stuck. I couldn’t put a Label on top of an Image! Go ahead, try it. I’ll wait.
It’s all about the Group
Turns out, the key here is working with a Group vs an Image. Thanks @JohnyJWilson for figuring this out.
The first step is to add the Group and configure it’s position and size to fit the screen or as appropriate:
You can add a Label inside the Group and configure it’s position to be in the center as needed:
Create IBOutlets for the Group and the Label.
Configure with Values
If you look into the WKInterfaceGroup interface, you can see that there are methods for setting and animating a background image!
Notice that you can even set a corner radius, which you cannot do for a WKInterfaceImage.
So now just set the group and label values, and you’re good to go!
Of course you can also set the values in the Storyboard, but I’m doing it specifically in code here because the image and label will most likely be dynamic in your own project.
You can download my sample project on Github here. Have fun!