Mit Text arbeiten

Bei digitalen Uhren sollten Sie nach Möglichkeit DigitalClock verwenden. Für alle anderen Texte oder Uhren, die nicht mit DigitalClock dargestellt werden können, ist PartText der Container für das textbasierte Rendering.

Je nachdem, ob Sie kreisförmigen oder normalen Text anzeigen möchten, sollte das PartText-Element entweder ein Text- oder ein TextCircular-Element enthalten.

Mit Schriftarten und Bitmap-Schriftarten arbeiten

Mit benutzerdefinierten Schriftarten können Sie Ihr Zifferblatt durch einen eigenen Stil hervorheben.

Es gibt zwei Möglichkeiten, benutzerdefinierte Schriftarten zu verwenden, sowohl in TimeText- als auch in PartText-Containern.

  1. Geben Sie im Font-Element eine benutzerdefinierte Schriftart family an. Eine Reihe gängiger Formate werden unterstützt, die in res/font platziert werden müssen.

    Beispiel: Verwenden Sie die Schriftart „Pacifico“ aus Google Fonts und platzieren Sie das Asset unter „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. Alternativ können Sie einen BitmapFont definieren, der Bitmap-Bilder in res/drawable bereitstellt:

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

Beachten Sie, wie Zeichenfolgen besonders behandelt werden können. Wenn beispielsweise „12“ durch eine zusammengeführte 1 und 2 dargestellt werden soll, kann dies mit einem Word-Element erreicht werden.

So verwenden Sie die definierte Schriftart:

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

Texteffekte

Das Zifferblattformat bietet mehrere Texteffekte, die angewendet werden können, z. B. OutGlow und Shadow. Verwenden Sie sie als Unterelemente des Elements Font:

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

Mit Vorlagen arbeiten

Statt statischen Text müssen Sie den Text möglicherweise aus Datenquellen oder Ausdrücken erstellen.

Mit dem Element Template haben Sie folgende Möglichkeiten:

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

Mit Ressourcen arbeiten

Wenn der statische Text stattdessen in einer Ressource definiert ist, z. B. in res/values/strings.xml, kann er so referenziert werden:

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

So können Sie Ihr Zifferblatt auch mithilfe verschiedener Ressourcenqualifizierer lokalisieren.

Griffabstand

Bei der Arbeit mit Abständen und Text kann es zu einigen Herausforderungen kommen:

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

Das liegt daran, dass in XML die Abstände wichtig sind. Um dies zu vermeiden, sollten Sie den Font-Inhalt in ein CDATA-Element einschließen:

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

Ein weiteres Beispiel ist der Versuch, Text zentriert auszurichten:

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

Mehrzeiliger Text

Verwenden Sie das maxLines-Attribut auf Text, um mehrzeiligen Text zu erstellen:

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