TwoPieceImage Complication

Question

I would like to show a multicolor Complication icon, similar to the default timer app icon:

This is my code to show the icon in multicolor:

CLKComplicationTemplateModularSmallStackImage* template=[[CLKComplicationTemplateModularSmallStackImage alloc]init];

template.line1ImageProvider=[CLKImageProvider imageProviderWithOnePieceImage:[UIImage imageNamed:@"Complication/Modular"] 
    twoPieceImageBackground:[UIImage imageNamed:@"ComplicationForeground/Modular"] 
    twoPieceImageForeground:[UIImage imageNamed:@"ComplicationBackgroud/Modular"]];

entry = [CLKComplicationTimelineEntry entryWithDate:[NSDate date]
                                           complicationTemplate:template];

Both two-piece images have clear backgrounds. How do I color the center image with whiteColor and the extern image with another color?

Answer 1

Use the tintColor property to specify the tint color for two-piece image background.

For example, if you wanted the two-piece image background color to be green, you could specify:

template.line1ImageProvider.tintColor = [UIColor greenColor]; // Objective-C

template.line1ImageProvider?.tintColor = UIColor.greenColor() // Swift

For more information, refer to the CLKImageProvider Class Reference:

Two-piece images are displayed only in multicolor environments and take priority over one-piece images in those environments. A two-piece image consists of a foreground image layered on top of a background image. Both images are template images. ClockKit applies the color in the tintColor property to the background image, falling back to the color in the underlying template or white if no custom color is specified. ClockKit always applies a white color to the foreground image. Two-piece images are not used in monochrome environments.