代表時間

錶面的首要任務是顯示時間，而錶面格式可讓您使用 AnalogClock 和 DigitalClock 元素建立指針和數位時鐘。

數位時鐘

您可以使用錶面 Scene 中的 DigitalClock 和 TimeText 元素定義基本數位時鐘：

<DigitalClock x="100" y="100" 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>

format 屬性可讓您控制如何使用小時、分鐘和秒數組合來表示時間。具體選項會因所使用的錶面格式版本而異；第 2 版會擴充此處的選項。

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

您也可以顯示世界其他地區的時間，例如世界時鐘。您可以透過 Localization 元素達成此目標：

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

類比時鐘

如要建立類比時鐘，請使用 AnalogClock 元素。每個 HourHand, MinuteHand 和 SecondHand 子元素都會指定應在算繪作業中使用的資源：

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

指定樞紐點

每個小時、分鐘和秒資源都會隨著時間推移而旋轉，但請務必指定每個資源應以何處為基準點旋轉。

在某些情況下，樞紐點並非位於手掌底部，而是水平居中。應指定為 <HourHand … pivotY="(pivot_ratio)" />，其中：

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

為手錶指針著色

為了讓使用者自訂錶面的外觀，通常會提供可設定的指針顏色。

如要達成這一點，您可以透過各個手錶的 tintColor 分別為各個手錶著色，或是透過 AnalogClock 為所有手錶著色。

除了讓使用者套用特定色調，您也可以為 tintColor 提供設定選項，讓使用者選擇下列項目：

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

投射陰影

如要呈現逼真的錶針效果，請在每個錶針後方使用投影效果，以營造出深度感。如要實現這一效果，請使用兩個手型，並將其中一個手型置於另一個手型後方，為陰影提供個別資源：

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

臉部裝飾

類比錶面通常會在錶面周圍加上裝飾，用來顯示小時或分鐘。如要做到這一點，有兩種方法：

  1. 請附上全螢幕背景圖片，其中包含預先繪製的錶面。參閱處理圖片相關說明。

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

  2. 繪製個別裝飾，並使用旋轉功能將裝飾置於臉部周圍。

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>