表示时间

表盘的主要作用是显示时间，而表盘格式可让您使用 AnalogClock 和 DigitalClock 元素创建模拟时钟和数字时钟。

数字时钟

您可以使用表盘 Scene 中的 DigitalClock 和 TimeText 元素定义基本数字时钟：

<DigitalClock x="125" y="50" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>
watchface_clocks.xml

借助 format 属性，您可以控制如何使用时、分和秒的组合来表示时间。具体选项因所使用的表盘格式版本而异；版本 2 扩展了此处的选项。

在上述示例中，字体设置为使用系统字体。

显示世界其他地区的时间（例如世界时钟）也很有用。您可以通过 Localization 元素实现此目的：

<DigitalClock x="125" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    <!-- TimeText goes here -->
    <!-- START_EXCLUDE -->
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
    <!-- END_EXCLUDE -->
</DigitalClock>
watchface_clocks.xml

指针式时钟

如需创建模拟时钟，请使用 AnalogClock 元素。每个 HourHand, MinuteHand 和 SecondHand 子元素都指定了应在渲染中使用的资源：

<AnalogClock x="0" y="0" width="450" height="450">
    <HourHand resource="hour" x="220" y="55" width="20" height="190"
        pivotX="0.5" pivotY="0.9210" />
    <MinuteHand resource="minute" x="222" y="30" width="16" height="220"
        pivotX="0.5" pivotY="0.9" />
    <SecondHand resource="second" x="226" y="20" width="8" height="245"
        pivotX="0.5" pivotY="0.8571" />
</AnalogClock>
watchface_clocks.xml

指定透视点

小时、分钟和秒资源会随着时间的推移而轮换，但务必要指定每个资源应围绕哪个点进行旋转。

在某些情况下，支点并不完全位于手部底部，而是水平居中。应将其指定为 <HourHand … pivotY="(pivot_ratio)" />，其中：

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

为表针着色

为了让用户能够自定义表盘的外观，通常会为表针设置可配置的颜色。

实现此目的的一种方法是使用每只手上的 tintColor 分别为每只手着色，或者使用 AnalogClock 为所有手着色。

除了让用户为特定颜色着色之外，您还可以为 tintColor 提供配置选项，让用户选择（例如，将 tintColor="[CONFIGURATION.handColors.0] 添加到 AnalogClock 元素）。

阴影

为了获得逼真的表针效果，在每个表针后面使用阴影可以营造出深度感。

为此，请在单个 AnalogClock 中使用每种手部类型的两个实例，一个在另一个后面偏移，并使用单独的资源来表示阴影的手。

面部装饰

模拟表盘通常在表盘周围有显示小时或分钟的装饰。您可以通过以下两种方法实现此目的：

  1. 包含预先绘制的表盘的全屏背景图片。请参阅“使用图片”。

    <PartImage x="0" y="0" width="450" height="450">
    <Image resource="watch_face_dial" />
</PartImage>
    watchface_clocks.xml

  2. 绘制单独的装饰，然后使用旋转功能将其放置在面部周围。

    <!-- Content for the "12" -->
<Group x="200" y="0" width="50" height="450">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[12]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- Content for the "1" -->
<Group x="200" y="0" width="50" height="450" angle="30">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[1]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- etc -->
    watchface_clocks.xml