Travailler avec du texte

Pour les horloges numériques, essayez d'utiliser DigitalClock dans la mesure du possible. Pour tous les autres textes ou horloges qui ne peuvent pas être représentés à l'aide de DigitalClock, PartText est le conteneur pour le rendu basé sur le texte.

Selon que vous souhaitez afficher du texte circulaire ou normal, l'élément PartText doit contenir soit un élément Text, soit un élément TextCircular.

Utiliser des polices et des polices bitmap

L'utilisation de polices personnalisées permet à votre cadran de se démarquer avec son propre style.

Il existe deux façons d'utiliser des polices personnalisées, à la fois dans les conteneurs TimeText et PartText.

  1. Spécifiez une police personnalisée family dans l'élément Font. Une gamme de formats courants est acceptée. Ils doivent être placés dans res/font.

    Par exemple, en utilisant la police Pacifico de Google Fonts et en plaçant l'élément en tant que res/font/pacifico.ttf :

    <PartText x="0" y="50" width="450" height="250">
    <Text align="CENTER">
        <Font family="pacifico" size="96">Hello!</Font>
    </Text>
</PartText>
    watchface_text.xml

  2. Vous pouvez également définir un BitmapFont fournissant des images bitmap dans res/drawable :

    <BitmapFonts>
    <BitmapFont name="myhandwriting">
        <Character name="1" resource="digit1" width="50" height="100" />
        <Character name="2" resource="digit2" width="50" height="100" />
        <Character name="3" resource="digit3" width="50" height="100" />
        <Character name="4" resource="digit4" width="50" height="100" />
        <!-- ... -->
        <!-- Treat "12" specially, instead of a 1 followed by a 2-->
        <Word name="12" resource="digit12" width="80" height="100" />
    </BitmapFont>
</BitmapFonts>
    watchface_text.xml

Notez que les séquences de caractères peuvent être traitées de manière spéciale. Par exemple, si vous souhaitez représenter le nombre 12 avec un 1 et un 2 accolés, vous pouvez utiliser un élément Word.

Pour utiliser la police définie :

<DigitalClock x="125" y="120" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <BitmapFont family="myhandwriting" size="48" color="#FF00FF"/>
    </TimeText>
</DigitalClock>
watchface_text.xml

Effets de texte

Watch Face Format propose plusieurs effets de texte qui peuvent être appliqués, tels que OutGlow et Shadow. Pour les utiliser, appliquez-les en tant que sous-éléments de l'élément Font :

<Font family="pacifico" size="96" color="#e2a0ff">
    <OutGlow color="#e8ffb7" radius="30">Hello!</OutGlow>
</Font>
watchface_text.xml

Utiliser des modèles

Au lieu d'utiliser du texte statique, vous devrez peut-être construire votre texte à partir de sources de données ou d'expressions.

L'élément Template vous permet d'effectuer les opérations suivantes :

<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
    <Template>Day: %s<Parameter expression="[DAY_OF_WEEK_S]" /></Template>
</Font>
watchface_text.xml

Utiliser des ressources

Si votre texte statique est défini dans une ressource, comme dans res/values/strings.xml, vous pouvez y faire référence comme suit :

<!-- greeting defined in res/values/strings.xml -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">greeting</Font>
watchface_text.xml

Cela vous permet également de localiser votre cadran à l'aide de différents qualificateurs de ressources.

Espacement des poignées

Il peut être difficile de travailler avec l'espacement du texte en XML. Des espaces supplémentaires autour du texte peuvent entraîner des problèmes de mise en forme, comme un centrage incorrect, ou empêcher votre application de trouver des ressources de chaîne Android.

Pour éviter ces situations, encapsulez le contenu de votre Font dans un élément CDATA :

<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
    <![CDATA[Hello]]>
</Font>
watchface_text.xml

Texte multiligne

Pour créer du texte multiligne, utilisez l'attribut maxLines sur Text :

<Text align="CENTER" maxLines="2">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
        <![CDATA[Hello Wear OS world]]>
    </Font>
</Text>
watchface_text.xml