watchOS: Complications
Full-color
We’ve got a new sample app for this episode, so, open up the starter Happy xcode project.
Then press Control-0 to select the Happy WatchKit App (Complication) scheme.
This part of the course focuses solely on the complication, not the app itself, so switching to the complication scheme makes sense instead of running the app.
Build and run!
Once launched, long-press the watch face to bring up the face editor.
Then swipe left to get to the add new face screen:
Tap Add, then scroll to the bottom of the list to select the X-Large face:
Once you’ve tapped Add, the color selection screen will appear. Scroll to the MULTICOLOR choice if it’s not already selected:
Swipe left again to see the empty complications screen.
After tapping the empty square, scroll down to the Happy app:
Tap to select it, then press the home button twice.
Looks amazing, right?
But what happens to this cat face when the watch face is tinted?
Desaturation
By default, if the user selects a tint color for the watch face, watchOS will desaturate the full-color image.
Desaturation is the process of making colors more muted, less vibrant!
To see that in action:
- Long-press the watch face.
- Tap Edit.
- Swipe right to the color screen.
- Scroll through the colors, and you’ll see what the image would look like for each tint color.
Depending on the image you’re using, desaturation might work just fine.
However, if your colors are too similar to each other in hue or value, the desaturation might not work as the image blends into itself too much. You can see that happening a bit here with the teal and pink.
Return to the Home screen by pressing the Digital Crown twice.
Layered images
When you need more control over how the image looks while tinted, you can split it into two separate images.
Let’s take a look at what we’re working with to visualize that.
Open the Assets catalog, and you’ll see the full image currently in use.
To break this cat face up into two separate parts, you could think of the colored part of the face as the background, and the outlines as the foreground.
Lucky for us, there are also two other images in this asset catalog!
Click background, and you’ll see just the colored fur pattern.
And, as you might expect, outlines is just the lines part.
When using layered images, watchOS only uses the opacity. It completely ignores the color. So, it doesn’t matter at all that the “background” image is pink and teal. It only cares about the alpha channel.
So, how is it different to set this up in code?
Open ComplicationController.swift and down in localizableSampleTemplate(for:), add the background and outlines images to the guard statement.
guard
let full = UIImage(named: "full"),
let background = UIImage(named: "background"),
let outlines = UIImage(named: "outlines")
else {
fatalError("Images are missing from the asset catalog.")
}
So that our complication can deal with full color images, and tinted images, use the two-parameter initializer to CLKFullColorImageProvider. Specify the full-color image, and then background as the background, and outlines as the foreground.
let template = CLKComplicationTemplateGraphicExtraLargeCircularImage(
imageProvider: CLKFullColorImageProvider(
// 2
fullColorImage: full,
tintedImageProvider: .init(
onePieceImage: full,
twoPieceImageBackground: background,
twoPieceImageForeground: outlines
)
)
)
watchOS will apply tinting based on the two separate layers you provide.
Sometimes it will tint the foreground layer. Other times it will tint the background layer.
Which tint receives the user’s preferred color is dependent on the type of complication family you select.
Build and run again.
After the app starts and the simulator updates, you’ll see the effect of your changes!
Long-press the watch face and tap Edit to get back to the color selection screen.
Scroll through a few to see the effect in other tint colors.
As you can see, when using a Graphic Extra Large Circular Image template, watchOS will apply the tint color to the background. watchOS chooses the foreground color.