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

Основная задача циферблата — показывать время, а формат циферблата позволяет создавать как аналоговые, так и цифровые часы с использованием элементов AnalogClock и DigitalClock .

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

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

<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 позволяет вам контролировать, как время представлено с помощью комбинации часов, минут и секунд. Точные параметры различаются в зависимости от используемой версии Watch Face Format; версия 2 расширяет эти параметры.

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

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