時刻を表す

ウォッチフェイスの主な役割は時刻を表示することです。Watch Face Format では、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 属性を使用すると、時間、分、秒の組み合わせを使用して時刻を表す方法を制御できます。正確なオプションは、使用する Watch Face 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 に構成オプションを指定して、ユーザーが選択できるようにすることもできます（たとえば、AnalogClock 要素に tintColor="[CONFIGURATION.handColors.0] を追加するなど）。

ドロップ シャドウ

時計の針をリアルに表現するには、各針の背後にドロップ シャドウを使用すると、奥行きがあるように見えます。

これを実現するには、1 つの AnalogClock 内で各ハンドタイプを 2 つずつ使用し、一方を他方の背後にオフセットします。また、影を表すハンドには別のリソースを使用します。

フェイス デコレーション

アナログ ウォッチフェイスには、時間や分を示す装飾が文字盤の周囲に施されていることがよくあります。これを行うには、次の 2 つの方法があります。

  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