Trabajar con texto

En el caso de los relojes digitales, debes intentar usar DigitalClock siempre que sea posible. Para todo el texto o los relojes que no se pueden representar con DigitalClock, PartText es el contenedor para la renderización basada en texto.

Según si deseas mostrar texto circular o normal, el PartText debe contener ya sea un elemento Text o TextCircular.

Cómo trabajar con fuentes y fuentes de mapa de bits

El uso de fuentes personalizadas permite que tu cara de reloj se destaque con su propio estilo.

Existen dos formas de usar fuentes personalizadas, tanto dentro de los contenedores TimeText como de PartText.

  1. Especifica una fuente personalizada family en el elemento Font. Se admite un rango de formatos comunes, que se deben colocar en res/font.

    Por ejemplo, usa la fuente Pacifico de Google Fonts y coloca el activo 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, define un BitmapFont que proporcione imágenes de mapa de bits en 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>
<!-- ... -->

Observa cómo se puede dar un tratamiento especial a las secuencias de caracteres. Por ejemplo, si “12” se representara con un 1 y un 2 unidos, esto se podría lograr con un elemento Word.

Para usar la fuente definida, haz lo siguiente:

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

Efectos de texto

El Formato de Caras de Relojes proporciona varios efectos de texto que se pueden aplicar, como OutGlow y Shadow. Para usarlos, aplícalos como subelementos del elemento Font:

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

Cómo trabajar con plantillas

En lugar de texto estático, es posible que debas crearlo a partir de fuentes de datos o expresiones.

El elemento Template te permite hacer lo siguiente:

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

Cómo trabajar con recursos

Si, en cambio, tu texto estático se define en un recurso, como en res/values/strings.xml, se puede hacer referencia a él de la siguiente manera:

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

Esto también te permite localizar tu cara de reloj con diferentes calificadores de recursos.

Espaciado de la manija

Puede haber algunos desafíos para trabajar con el espaciado y el 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>

Esto se debe a que el espaciado es importante en XML. Para evitar esta situación, une el contenido de Font en un elemento CDATA:

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

Otro ejemplo se puede ver cuando se intenta centrar el texto:

<!-- 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 varias líneas

Para crear texto de varias líneas, usa el atributo maxLines en 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>