代表時間

錶面的主要用途是顯示時間，而錶面格式可讓您使用 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 會擴充此處的選項。

在上述範例中，「Font」已設為使用系統字型。

顯示世界其他地區的時間也很有用，例如世界時鐘。這可以透過 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