Représenter l'heure

La principale fonction d'un cadran est d'afficher l'heure. Le format de cadran vous permet de créer des horloges analogiques et numériques à l'aide des éléments AnalogClock et DigitalClock.

Horloges numériques

Vous pouvez définir une horloge numérique de base à l'aide des éléments DigitalClock et TimeText dans le cadran 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>

L'attribut format vous permet de contrôler la représentation de l'heure à l'aide d'une combinaison d'heures, de minutes et de secondes. Les options exactes diffèrent selon la version du format de cadran utilisée. La version 2 offre plus d'options ici.

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

Il peut également être utile d'afficher l'heure d'autres endroits du monde, par exemple une horloge mondiale. Pour ce faire, utilisez l'élément Localization:

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

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

Spécifier le point pivot

Chaque ressource d'heure, de minute et de seconde est pivotée au fil du temps, mais il est important de spécifier le point correct autour duquel chacune doit pivoter.

Dans certains cas, le point d'inflexion n'est pas tout à fait en bas de la main et est centré horizontalement. Cette valeur doit être spécifiée sous la forme <HourHand … pivotY="(pivot_ratio)" />, où:

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

Colorier les aiguilles de la montre

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

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

En plus d'autoriser les utilisateurs à teinter des couleurs spécifiques, vous pouvez fournir une option de configuration à tintColor pour permettre à l'utilisateur de choisir:

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

Ombre projetée

Pour un effet aiguille de montre réaliste, utiliser une ombre portée derrière chaque aiguille peut donner l'impression de profondeur. Pour ce faire, utilisez deux types de mains, en les décalant l'une derrière l'autre, en fournissant une ressource distincte pour l'ombre:

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

Décorations pour le visage

Les cadrans analogiques comportent souvent des décorations autour du cadran indiquant les heures ou les minutes. Pour ce faire, vous pouvez suivre deux approches:

  1. Incluez une image de fond en plein écran, qui contient votre cadran prédéfini. Consultez la section Utiliser des images.

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

  2. Dessinez des décorations distinctes et placez-les autour du visage à l'aide de rotations.

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