отображать время;

Основная задача циферблата – показывать время. Формат Watch Face Format позволяет создавать аналоговые и цифровые часы с помощью элементов AnalogClock и DigitalClock.

Цифровые часы

Простые цифровые часы можно задать с помощью элемента DigitalClock и TimeText в циферблате Scene:

<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>

Атрибут "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>

Аналоговые часы

Чтобы создать аналоговые часы, используйте элемент 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>

Как указать точку поворота

Ресурсы часов, минут и секунд вращаются по мере того, как проходит время, но важно указать правильную точку, вокруг которой каждый из них должен вращаться.

В некоторых случаях точка поворота находится не в нижней части руки, а по центру по горизонтали. Его нужно указать в формате <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>

  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 -->