La función principal de una cara de reloj es mostrar la hora, y el Formato de Caras de Relojes te permite crear relojes analógicos y digitales con los elementos AnalogClock y DigitalClock.
Relojes digitales
Se puede definir un reloj digital básico con los elementos DigitalClock y TimeText dentro de la Scene de la cara de reloj:
<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>
El atributo format te permite controlar cómo se representa la hora con una combinación de horas, minutos y segundos. Las opciones exactas difieren según la versión del Formato de Caras de Relojes que se use. La versión 2 expande las opciones aquí.
En el ejemplo anterior, Font está configurado para usar la fuente del sistema.
También puede ser útil mostrar la hora de otras ubicaciones del mundo, por ejemplo, un reloj mundial. Esto se puede lograr a través del elemento Localization:
<DigitalClock x="100" y="100" width="200" height="50">
<Localization timeZone="Europe/London" />
...
</DigitalClock>
Relojes analógicos
Para crear un reloj analógico, usa el elemento AnalogClock. Cada uno de los elementos secundarios HourHand, MinuteHand y SecondHand especifica el recurso que se debe usar en la renderización:
<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>
Especifica el punto de inflexión
Cada uno de los recursos de hora, minuto y segundo se rota a medida que avanza el tiempo, pero es importante especificar el punto correcto alrededor del cual debe pivotar cada uno.
En algunas situaciones, el punto de pivote no está en la parte inferior de la mano y se centra horizontalmente. Esto se debe especificar como <HourHand …
pivotY="(pivot_ratio)" />, donde:
Cómo aplicar color a las manecillas del reloj
Para permitir que el usuario personalice el aspecto de la cara de reloj, es común tener un color configurable para las manecillas del reloj.
Una forma de lograrlo es a través de tintColor en cada una de las manos para teñir cada una por separado, o en AnalogClock, para teñir todas las manos del mismo color.
Además de permitir que los usuarios tomen colores específicos, puedes proporcionar una opción de configuración a tintColor para permitir que el usuario elija lo siguiente:
<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />
Sombra paralela
Para obtener un efecto de manecillas de reloj realista, usar una sombra detrás de cada manecillas puede dar la apariencia de profundidad. Para lograrlo, usa dos de cada tipo de mano, compensa una detrás de la otra y proporciona un recurso independiente para la 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">
Decoraciones para el rostro
Las caras de reloj analógicas suelen tener decoraciones alrededor de la cara que muestran las horas o los minutos. Para lograrlo, existen dos enfoques:
Incluye una imagen de fondo de pantalla completa que contenga la cara de reloj dibujada previamente. Consulta cómo trabajar con imágenes.
<PartImage x="0" y="0" width="450" height="450" ...> <Image resource="watch_face_dial" /> </PartImage>Dibuja decoraciones separadas y colócalas alrededor del rostro con rotaciones.
<Group ... > <!-- Content for the "12" marker --> </Group> <Group pivotX="..." pivotY="..." angle="30"> <!-- Content for the "1" marker --> </Group>