テキストを操作する

デジタル時計の場合は、可能な限り DigitalClock を使用することをおすすめします。DigitalClock を使用して表すことができない他のすべてのテキストや時計の場合、PartText はテキストベースのレンダリング用のコンテナです。

円形のテキストと通常のテキストのどちらを表示するかに応じて、PartText には Text 要素または TextCircular 要素のいずれかを含める必要があります。

フォントとビットマップ フォントを使用する

カスタム フォントを使用すると、ウォッチフェイスに独自のスタイルを加えることができます。

カスタム フォントを使用する方法は 2 つあります。どちらも TimeText コンテナと PartText コンテナ内で使用できます。

  1. Font 要素でカスタム フォント family を指定します。さまざまな一般的な形式がサポートされています。これらは res/font に配置する必要があります。

    たとえば、Google Fonts の Pacifico フォントを使用して、アセットを 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. または、res/drawable でビットマップ画像を提供する BitmapFont を定義します。

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

文字列のシーケンスに特別な処理を適用する方法に注意してください。たとえば、「12」を 1 と 2 を結合して表す場合は、Word 要素を使用します。

定義したフォントを使用するには:

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

テキスト効果

Watch Face Format には、OutGlow や Shadow など、適用できるテキスト効果がいくつか用意されています。これらを使用するには、Font 要素のサブ要素として適用します。

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

テンプレートを使用する

静的テキストではなく、データソースまたは式からテキストを作成することが必要になる場合があります。

Template 要素を使用すると、次のことができます。

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

リソースを扱う

静的テキストが res/values/strings.xml などのリソースで定義されている場合は、次のように参照できます。

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

また、さまざまなリソース修飾子を使用してウォッチフェイスをローカライズすることもできます。

ハンドルの間隔

スペースとテキストの操作には、次のような課題があります。

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

これは、XML ではスペースが重要であるためです。この状況を回避するには、Font の内容を CDATA 要素でラップします。

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

別の例として、テキストを中央揃えにしようとすると、次のような問題が発生します。

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

複数行のテキスト

複数行のテキストを作成するには、Text の maxLines 属性を使用します。

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