Graphic

Use graphic templates to display visually rich content on a variety of watch faces, including the Infograph, Infograph Modular, and Solar Dial faces.

Overview

Graphic templates support multicolor text, full-color images, and gauges with color gradients.

Figure 1

Graphic Corner template

Graphic Corner template
Figure 2

Graphic Circular template

Graphic Circular template
Figure 3

Graphic Bezel template

Graphic Bezel template
Figure 4

Graphic Rectangular template

Graphic Rectangular template

Tinted Graphic Complications

Any watch face that supports graphic complications can display a lower-color version of the complication using the tinted mode.

The tinted mode makes the following changes:

  • Gauges display a solid color instead of a color gradient. The system bases this color on the watch-face color the user selected.

  • Text displays a color based on the user’s watch-face color. Multicolor text providers display only a single color.

  • The system automatically desaturates images by default; however, you can use the CLKFullColorImageProvider class’s tintedImageProvider property to provide a tinted version for the image. Note that the complication ignores the tinted image provider’s tintColor property, using a color based on the user’s watch-face color instead.

Figure 5

Tinted Graphic Corner template

Tinted Graphic Corner template

Figure 6

Tinted Graphic Circular template

Tinted Graphic Circular template
Figure 7

Tinted Graphic Bezel template

Tinted Graphic Bezel template
Figure 8

Tinted Graphic Rectangular template

Tinted Graphic Rectangular template

For more information, see Exploring Tinted Graphic Complications.

Topics

Corner

class CLKComplicationTemplateGraphicCornerCircularImage

A template for displaying an image in the clock face’s corner.

class CLKComplicationTemplateGraphicCornerGaugeImage

A template for displaying an image and a gauge in the clock face’s corner.

class CLKComplicationTemplateGraphicCornerGaugeText

A template for displaying text and a gauge in the clock face’s corner.

class CLKComplicationTemplateGraphicCornerStackText

A template for displaying stacked text in the clock face’s corner.

class CLKComplicationTemplateGraphicCornerTextImage

A template for displaying an image and text in the clock face’s corner.

Circular

class CLKComplicationTemplateGraphicCircularImage

A template for displaying a full-color circular image.

class CLKComplicationTemplateGraphicCircularStackImage

A template for displaying a full-color circular image and text.

class CLKComplicationTemplateGraphicCircularStackText

A template for displaying two rows of text.

class CLKComplicationTemplateGraphicCircularClosedGaugeImage

A template for displaying a full-color circular image and a closed circular gauge.

class CLKComplicationTemplateGraphicCircularOpenGaugeImage

A template for displaying a full-color circular image, an open gauge, and text.

class CLKComplicationTemplateGraphicCircularClosedGaugeText

A template for displaying text inside a closed circular gauge.

class CLKComplicationTemplateGraphicCircularOpenGaugeSimpleText

A template for displaying text inside an open gauge, with a single piece of text for the gauge.

class CLKComplicationTemplateGraphicCircularOpenGaugeRangeText

A template for displaying text inside an open gauge, with leading and trailing text for the gauge.

class CLKComplicationTemplateGraphicCircular

An abstract superclass for all the circular graphic templates.

Bezel

class CLKComplicationTemplateGraphicBezelCircularText

A template for displaying a circular complication with text along the bezel.

Rectangular

class CLKComplicationTemplateGraphicRectangularStandardBody

A template for displaying a large rectangle containing text.

class CLKComplicationTemplateGraphicRectangularTextGauge

A template for displaying a large rectangle containing text and a gauge.

class CLKComplicationTemplateGraphicRectangularLargeImage

A template for displaying a large rectangle containing header text and an image.

See Also

Templates

Circular Small

Use circular small templates to display content in the corners of the Color watch face.

Extra Large

Use the extra large templates to display content on the X-Large watch faces.

Modular Small

Use modular small templates to display content in the smaller spaces of the Modular watch face.

Modular Large

Use modular large templates to display multiple rows of content on the Modular watch face.

Utilitarian

Use the utilitarian templates to display content on a variety of watch faces, including the Utility, Chronograph, Simple, and character watch faces.

class CLKComplicationTemplate

An abstract class that defines the base behavior for all templates.

enum CLKComplicationFamily

Constants indicating the template groups.

property list key CLKComplicationSupportedFamilies

The complication families for which the app can provide data.

Name: ClockKit Complication - Supported Families