El trabajo 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="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>
El atributo format te permite controlar cómo se representa el tiempo 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 usa. La versión 2 amplía las opciones aquí.
En el ejemplo anterior, Font se configura para usar la fuente del sistema.
También puede ser útil para 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="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>
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="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>
Cómo especificar el punto de pivote
Cada uno de los recursos de horas, minutos y segundos se rota a medida que avanza el tiempo, pero es importante especificar el punto correcto alrededor del cual debe girar cada uno.
En algunas situaciones, el punto de pivote no se encuentra exactamente en la parte inferior de la mano y está centrado horizontalmente. Se debe especificar como <HourHand …
pivotY="(pivot_ratio)" />, donde:
Cómo colorear las agujas del reloj
Para permitir que el usuario personalice la apariencia 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 mano por separado, o en AnalogClock, para teñir todas las manos del mismo color.
Además de permitir que los usuarios apliquen un tono a colores específicos, puedes proporcionar una opción de configuración a tintColor para permitir que el usuario elija, por ejemplo, agregar tintColor="[CONFIGURATION.handColors.0] al elemento AnalogClock.
Sombra paralela
Para lograr un efecto realista en las manecillas del reloj, puedes usar una sombra detrás de cada una para dar la apariencia de profundidad.
Para lograrlo, usa dos de cada tipo de mano dentro de un solo AnalogClock, desplaza una detrás de la otra y usa un recurso independiente para la mano que representa la sombra.
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 en pantalla completa que contenga la cara de reloj prediseñada. 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.
<!-- 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 -->