Travailler avec du texte

Pour les horloges numériques, vous devez essayer 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 du rendu basé sur le texte.

Selon que vous souhaitez afficher du texte circulaire ou régulier, 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 par 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 prise en charge, qui doit être placée 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="100" width="450" height="250">
  <Text align="CENTER">
    <Font family="pacifico" size="96">Hello!</Font>
  </Text>
</PartText>

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

    <WatchFace width="450" height="450" clipShape="CIRCLE">
<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>
<!-- ... -->

Notez que les séquences de caractères peuvent être traitées de manière spéciale. Par exemple, si "12" devait être représenté avec un 1 et un 2 joints, cela pourrait être réalisé à l'aide d'un élément Word.

Pour utiliser la police définie:

<TimeText ... format="hh:mm">
  <BitmapFont family="myhandwriting" size="48" color="#ff0000" />
</TimeText>

Effets de texte

Le format de cadran propose plusieurs effets de texte pouvant ê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>

Utiliser des modèles

Au lieu d'un 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:

<PartText x="100" y="150" width="300" height="120" >
  <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
      <Template>Day: %s<Parameter expression="[DAY_OF_WEEK_S]" /></Template>
    </Font>
  </Text>
</PartText>

Utiliser des ressources

Si votre texte statique est défini dans une ressource, comme dans res/values/strings.xml, il peut être référencé comme suit:

<PartText x="100" y="150" width="300" height="120" >
  <Text align="CENTER">
    <!-- greeting defined in res/values/strings.xml -->
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">greeting</Font>
  </Text>
</PartText>

Vous pouvez ainsi localiser votre cadran à l'aide de différents qualificateurs de ressources.

Espacement des poignées

Le travail avec l'espacement et le texte peut présenter certains défis:

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

<!-- Does not render in the right place because of whitespace -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
    greeting
</Font>

En effet, l'espacement est important dans le code XML. Pour éviter cette situation, encapsulez le contenu de Font dans un élément CDATA:

<!-- Works correctly -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
  <![CDATA[greeting]]>
</Font>

Un autre exemple peut être observé lorsque vous essayez de justifier le texte au centre:

<!-- Does not render as expected - leading spaces are a problem -->
<PartText x="100" y="150" width="250" height="120" >
  <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
       Hello
    </Font>
  </Text>
</PartText>

<!-- Works correctly -->
<PartText x="100" y="150" width="250" height="120" >
    <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
        <![CDATA[Hello]]>
    </Font>
    </Text>
</PartText>

Texte multiligne

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

<PartText x="75" y="100" width="300" height="350" >
  <Text align="CENTER" maxLines="2">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
      <![CDATA[Hello Wear OS world]]>
    </Font>
  </Text>
</PartText>