Représenter l'heure

La fonction première d'un cadran est d'afficher l'heure. Watch Face Format vous permet de créer des horloges analogiques et numériques à l'aide des éléments AnalogClock et DigitalClock.

Horloges numériques

Une horloge numérique de base peut être définie à l'aide de l'élément DigitalClock et TimeText dans le Scene de votre cadran :

<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>
watchface_clocks.xml

L'attribut format vous permet de contrôler la façon dont l'heure est représentée à l'aide d'une combinaison d'heures, de minutes et de secondes. Les options exactes diffèrent selon la version de Watch Face Format utilisée. La version 2 étend les options ici.

Dans l'exemple précédent, Font est défini pour utiliser la police système.

Il peut également être utile d'afficher l'heure d'autres lieux dans le monde, par exemple une horloge mondiale. Pour ce faire, vous pouvez utiliser l'élément 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>
watchface_clocks.xml

Horloges analogiques

Pour créer une horloge analogique, utilisez l'élément AnalogClock. Chacun des éléments enfants HourHand, MinuteHand et SecondHand spécifie la ressource à utiliser pour le rendu :

<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>
watchface_clocks.xml

Spécifier le point de pivot

Chacune des ressources (heures, minutes et secondes) est pivotée au fur et à mesure que le temps avance, mais il est important de spécifier le point correct autour duquel chacune doit pivoter.

Dans certains cas, le point de pivot ne se trouve pas tout à fait en bas de la main et est centré horizontalement. Elle doit être spécifiée sous la forme <HourHand … pivotY="(pivot_ratio)" />, où :

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

Colorer les aiguilles de la montre

Pour permettre à l'utilisateur de personnaliser l'apparence du cadran, il est courant d'avoir une couleur configurable pour les aiguilles.

Pour ce faire, vous pouvez utiliser tintColor sur chacune des mains pour teinter chaque main séparément, ou sur AnalogClock pour teinter toutes les mains de la même couleur.

En plus de permettre aux utilisateurs de teinter des couleurs spécifiques, vous pouvez fournir une option de configuration à tintColor pour permettre à l'utilisateur de choisir, par exemple, en ajoutant tintColor="[CONFIGURATION.handColors.0] à l'élément AnalogClock.

Ombre projetée

Pour un effet réaliste, vous pouvez utiliser une ombre portée derrière chaque aiguille pour donner l'impression de profondeur.

Pour ce faire, utilisez deux de chaque type de main dans un seul AnalogClock, en décalant l'une derrière l'autre, et utilisez une ressource distincte pour la main qui représente l'ombre.

Décorations pour le visage

Les cadrans analogiques sont souvent décorés autour du cadran pour indiquer les heures ou les minutes. Pour ce faire, deux approches sont possibles :

  1. Incluez une image d'arrière-plan en plein écran contenant votre cadran pré-dessiné. Consultez "Utiliser des images".

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

  2. Dessinez des décorations distinctes et placez-les autour du visage en les faisant pivoter.

    <!-- 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 -->
    watchface_clocks.xml