テキストを操作する

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

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

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

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

カスタム フォントを使用する方法は、TimeText コンテナと PartText コンテナの両方で 2 つあります。

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

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

    <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

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

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

<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

テキスト効果

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

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

テンプレートを使用する

静的テキストの代わりに、データソースまたは式からテキストを構築する必要がある場合があります。

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

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

リソースを扱う

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

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

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

ハンドルの間隔

XML でテキストのスペーシングを扱うのは難しい場合があります。テキストの周囲に余分なスペースがあると、中央揃えが正しく行われないなどのフォーマットの問題が発生したり、アプリで Android 文字列リソースが見つからなくなったりする可能性があります。

このような状況を回避するには、Font のコンテンツを CDATA 要素でラップします。

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

複数行のテキスト

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

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