Trabalhar com texto

Para relógios digitais, tente usar DigitalClock sempre que possível. Para todos os outros textos ou relógios que não podem ser representados usando DigitalClock, PartText é o contêiner para renderização baseada em texto.

Dependendo se você quer mostrar texto circular ou regular, o PartText precisa conter um elemento Text ou TextCircular.

Trabalhar com fontes e fontes de bitmap

O uso de fontes personalizadas permite que o mostrador do relógio se destaque com o próprio estilo.

Há duas maneiras de usar fontes personalizadas, ambas nos contêineres TimeText e PartText.

  1. Especifique uma fonte personalizada family no elemento Font. Vários formatos comuns são compatíveis e precisam ser colocados em res/font.

    Por exemplo, usando a fonte Pacifico do Google Fonts e colocando o recurso como 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. Como alternativa, defina um BitmapFont que forneça imagens de bitmap em 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>
<!-- ... -->

Observe como sequências de caracteres podem receber um tratamento especial. Por exemplo, se "12" fosse representado com uma união de 1 e 2, isso poderia ser feito usando um elemento Word.

Para usar a fonte definida:

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

Efeitos de texto

O Formato do mostrador do relógio oferece vários efeitos de texto que podem ser aplicados, como OutGlow e Shadow. Para usar esses elementos, aplique-os como subelementos do elemento Font:

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

Trabalhar com modelos

Em vez de texto estático, talvez seja necessário criar o texto com base em fontes de dados ou expressões.

O elemento Template permite fazer o seguinte:

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

Trabalhar com recursos

Se o texto estático for definido em um recurso, como em res/values/strings.xml, ele poderá ser referenciado da seguinte maneira:

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

Isso também permite localizar o mostrador do relógio usando diferentes qualificadores de recursos.

Espaçamento entre alças

Pode haver alguns desafios ao trabalhar com espaçamento e texto:

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

Isso ocorre porque o espaçamento é importante no XML. Para evitar essa situação, envolva o conteúdo Font em um elemento CDATA:

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

Outro exemplo pode ser visto ao tentar justificar o texto no centro:

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

Texto de várias linhas

Para criar texto de várias linhas, use o atributo maxLines em 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>