Multicolor Complication Text

Question

I am creating a .graphicCorner ClockKit complication using the template CLKComplicationTemplateGraphicCornerTextImage. As mentioned in the Tech Talk Developing Complications for Apple Watch Series 4 it should be possible to combine multiple differently tinted Text Providers.

Unfortunately I can make it work.

Here's my code from ComplicationController.swift

func getLocalizableSampleTemplate(for complication: CLKComplication, withHandler handler: @escaping (CLKComplicationTemplate?) -> Void) {
    switch complication.family {
…
    case .graphicCorner:
        if #available(watchOSApplicationExtension 5.0, *) {
            let template = CLKComplicationTemplateGraphicCornerStackText()
            let firstTextProvider = CLKSimpleTextProvider(text: "first")
            firstTextProvider.tintColor = UIColor.green
            let secondTextProvider = CLKSimpleTextProvider(text: "second")
            secondTextProvider.tintColor = UIColor.red
            let thirdTextProvider = CLKSimpleTextProvider(text: "third")
            thirdTextProvider.tintColor = UIColor.blue
            template.outerTextProvider = firstTextProvider
            template.innerTextProvider = CLKTextProvider.localizableTextProvider(withStringsFileFormatKey: "STRINGFORMAT", textProviders: [secondTextProvider, thirdTextProvider])
            handler(template)
        } else {
            handler(nil)  // Fallback on earlier versions
        }

    default:
        handler(nil)
    }

}

and the content of my ckcomplication.strings

"STRINGFORMAT" = "%@ %@";

No text will show up. What am I doing wrong here? I appreciate any idea or working examples.

Answer 1

This seems to be the expected behaviour, at least for outerTextProvider:

The complication ignores the text provider’s tint color. It always displays the outer text as white.

outerTextProvider

It works for the innerTextProvider though, at least in here:

case .graphicCorner:
                let graphicCorner = CLKComplicationTemplateGraphicCornerStackText()
                let metarColor = UIColor.green
                graphicCorner.outerTextProvider = CLKSimpleTextProvider(text: "EGLL")
                    graphicCorner.innerTextProvider = CLKSimpleTextProvider(text: "MVFR 27' ago")
                    graphicCorner.innerTextProvider.tintColor = metarColor ?? UIColor.white
                    let entry = CLKComplicationTimelineEntry(date: NSDate( as Date, complicationTemplate : graphicCorner)
                    timelineEntries.append(entry)

Screenshot