A principal função de um mostrador de relógio é mostrar a hora, e 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 Scene do mostrador do relógio:
<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>
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 do Mostrador do Relógio usada. A versão 2 amplia as opções aqui.
No exemplo anterior, Fonte está definido para usar a fonte do sistema.
Também pode ser útil mostrar a hora de outros locais do mundo, por exemplo, um relógio mundial. Isso pode ser feito com o elemento 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>
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="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>
Especificar o ponto de rotação
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 deve girar.
Em algumas situações, o ponto de rotação não fica exatamente na parte de baixo da mão e é centralizado horizontalmente. Isso precisa ser especificado como <HourHand …
pivotY="(pivot_ratio)" />, em que:
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 é usar o tintColor em cada uma das mãos para
tingir cada mão separadamente ou em AnalogClock para tingir todas as mãos da mesma
cor.
Além de permitir que os usuários matizem cores específicas, você pode fornecer uma opção de configuração para tintColor e permitir que o usuário escolha, por exemplo, adicionar tintColor="[CONFIGURATION.handColors.0] ao elemento AnalogClock.
Sombra projetada
Para um efeito realista de ponteiro de relógio, use uma sombra projetada atrás de cada ponteiro para dar a aparência de profundidade.
Para isso, use duas de cada tipo de mão em um único AnalogClock, deslocando uma atrás da outra, e use um recurso separado para a mão que representa a sombra.
Decorações faciais
Os mostradores analógicos geralmente têm decorações ao redor mostrando as horas ou minutos. Para fazer isso, há duas abordagens:
Inclua uma imagem de plano de fundo em tela cheia com 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>
Desenhe decorações separadas e posicione-as ao redor do rosto usando rotações.
<!-- 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 -->