I am trying to create Graphic Complications for my Apple Watch app (namely Graphic Circular) and I've run into some problems. To support both multicolor and tinted watch faces, I use the following code to provide image for my complication:
let graphicCircularTemplate = CLKComplicationTemplateGraphicCircularImage()
if let tintedImage = UIImage(named: "GraphicCircular"), let fullColorImage = UIImage(named: "GraphicCircularOrange") {
let tintedImageProvider = CLKImageProvider(onePieceImage: tintedImage)
var imageProvider = CLKFullColorImageProvider()
if #available(watchOSApplicationExtension 6.0, *) {
imageProvider = CLKFullColorImageProvider(fullColorImage: fullColorImage, tintedImageProvider: tintedImageProvider)
} else {
imageProvider = CLKFullColorImageProvider(fullColorImage: fullColorImage)
}
graphicCircularTemplate.imageProvider = imageProvider
}
Now my fullColorImage
is following:
fullColorImage
Whereas the tinted image of same size is rendered as Template image: tintedImage
In multicolor Infograph watch face the full color image looks as expected: multicolor
But when I change watch face to a selected tint, my tinted image renders as pure white, and the system tint color does not get applied to it: tint color
So my question is what am I missing and why does my tintedImageProvider not provide any tint?
Besides, I've noticed that system complications of type Graphic Circular seem to have a slightly grey background which sets them apart in dark watch face environment. I have hardcoded same background color into full color image, but when face switches to tint mode - my complication's background goes completely black. Any ideas on how to achieve this grey background effect?
Well, solution came after reiterating through documentation several times - decided to post an answer in case someone else finds this solution as non-obvious as I did:
In Graphic complications that support multicolor watch faces with full-color complication images system tint is only applied to twoPieceImageForeground
parameter of tintedImageProvider
. Simply providing a template onePieceImage
doesn't do the trick.
Creating a two piece image also resolves the second part of my question regarding grey background for image in Graphic Circular complication. To solve this, I've created a plain rectangle image of required complication size, set its background color to black and alpha to 11%. Passing this image as twoPieceImageBackground
parameter to tintedImageProvider
creates the needed grey-background effect upon desaturation.