Representar o tempo

A função principal de um mostrador do relógio é mostrar a hora. O formato do mostrador do relógio permite criar relógios analógicos e digitais usando os elementos AnalogClock e DigitalClock.

Relógios digitais

Um relógio digital básico pode ser definido usando o elemento DigitalClock e TimeText no mostrador do relógio 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>

O atributo format permite controlar como o tempo é representado usando uma combinação de horas, minutos e segundos. As opções exatas variam de acordo com a versão do formato de mostrador do relógio usado. A versão 2 expande as opções aqui.

No exemplo anterior, Font está definido para usar a fonte do sistema.

Também pode ser útil mostrar a hora em outros locais do mundo, por exemplo, um relógio mundial. Isso pode ser feito pelo elemento Localization:

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

Relógios analógicos

Para criar um relógio analógico, use o elemento AnalogClock. Cada um dos elementos filhos HourHand, MinuteHand e SecondHand especifica o recurso que deve ser usado na renderização:

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

Especificar o ponto de pivot

Cada um dos recursos de hora, minuto e segundo é girado à medida que o tempo avança, mas é importante especificar o ponto correto em torno do qual cada um deles deve girar.

Em algumas situações, o ponto de pivote não fica na parte de baixo da mão, e é centralizado horizontalmente. Isso precisa ser especificado como <HourHand … pivotY="(pivot_ratio)" />, em que:

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

Colorir os ponteiros do relógio

Para permitir que o usuário personalize a aparência do mostrador do relógio, é comum ter uma cor configurável para os ponteiros.

Uma maneira de fazer isso é usando tintColor em cada uma das mãos para tingir cada uma delas separadamente ou em AnalogClock, para tingir todas as mãos da mesma cor.

Além de permitir que os usuários apliquem cores específicas, você pode fornecer uma opção de configuração para tintColor para permitir que o usuário escolha:

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

Sombra projetada

Para um efeito realista de ponteiro do relógio, usar uma sombra atrás de cada ponteiro pode dar a aparência de profundidade. Para fazer isso, use dois tipos de mão, compensando um atrás do outro, fornecendo um recurso separado para a sombra:

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

Decorações para o rosto

Os mostradores de relógio analógico geralmente têm decorações ao redor que mostram as horas ou minutos. Para fazer isso, há duas abordagens:

  1. Inclua uma imagem de plano de fundo em tela cheia, que contém o mostrador do relógio pré-desenhado. Saiba como trabalhar com imagens.

    <PartImage x="0" y="0" width="450" height="450" ...>
    <Image resource="watch_face_dial" />
</PartImage>

  2. Desenhe decorações separadas e posicione-as ao redor do rosto usando rotações.

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>