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.

Does it show if you don't set `tintColor` in your providers? The localizable text provider might not support multiple colors. — EmilioPelaez, Oct 12 '18 at 21:03
@Bernd I am running into the same problem here. Have you been able to resolve this yet? — Bocaxica, Feb 12 '19 at 16:00

Patrick 2N · Answer 1 · 2019-01-21T16:45:02.363

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

score 0 · Answer 2 · answered Feb 12 '19 at 17:36

I ran into the same problem. I couldn't get CLKTextProvider.localizableTextProvider(withStringsFileFormatKey:, textProviders: ) combined with a ckcomplication.strings to work.

I ended up using this Objective-C category on CLKTextProvider.

It needed little customization for my own needs, but other than that it seems to work for me, I now get multi-coloured text in the inner ring.

Multicolor Complication Text

2 Answers2