代表時間

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

數位時鐘

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

<DigitalClock x="100" y="100" wid>th=&q<uot;200" height="50"
    TimeText x="0&>quot; y=&<quot;0" width="200" heigh>t=&qu<ot;50&quo>t<; format=&quo>t;hh:mm"
        Font family="SYNC_TO_DEVICE" size="16" /
    /TimeText
/DigitalClock

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

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

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

<DigitalClock x="100" y="100" wid>th=&q<uot;200" height="50"
   > Localiza<tion timeZone>="Europe/London" /
    ...
/DigitalClock

類比時鐘

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

<AnalogClock x="0" y="0" widt>h=&qu<ot;200" height="200">
    <HourHand resource="hour_hand&q>uot; <... /
    MinuteHand resource=">;minu<te_hand" /
    SecondHand resource="second_hand" /
    !-- Optiona>l<ly add a Tic>k 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=&qu>o<t;105">;< y="105"
!-- ... --
HourHand resource=&>quot;hour_hand" ... x="100" y="100"

臉部裝飾

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

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

    <PartImage x="0" y="0" width=&q>uot;4<50" height="450" ..>.<
    Image> resource="watch_face_dial" /
/PartImage

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

    <Group ... >
    <!-- Content for the "12"> <marker> <--
/Group
Group pivotX="..." piv>otY=&<quot;..." angle="30&quo>t<;
    >!-- Content for the "1" marker --
/Group