Представляют время

Основная задача циферблата — показывать время, а формат циферблата позволяет создавать как аналоговые, так и цифровые часы, используя элементы 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>
watchface_clocks.xml

Атрибут format позволяет управлять отображением времени, используя комбинацию часов, минут и секунд. Точные параметры различаются в зависимости от используемой версии Watch Face Format; в версии 2 эти параметры расширены.

В приведенном выше примере параметр «Шрифт» установлен на использование системного шрифта.

Также может быть полезно отображать время для других мест в мире, например, мировые часы . Этого можно добиться с помощью элемента 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