Làm việc với văn bản

Đối với đồng hồ kỹ thuật số, bạn nên sử dụng DigitalClock nếu có thể. Đối với tất cả văn bản hoặc đồng hồ khác không thể biểu thị bằng DigitalClock, PartText là vùng chứa để hiển thị dựa trên văn bản.

Tuỳ thuộc vào việc bạn muốn hiển thị văn bản tròn hay văn bản thông thường, PartText phải chứa một phần tử Text hoặc TextCircular.

Làm việc với phông chữ và phông chữ bitmap

Việc sử dụng phông chữ tuỳ chỉnh giúp mặt đồng hồ của bạn nổi bật với phong cách riêng.

Có hai cách để sử dụng phông chữ tuỳ chỉnh, cả trong vùng chứa TimeText và PartText.

  1. Chỉ định phông chữ tuỳ chỉnh family trong phần tử Font. Một loạt định dạng phổ biến được hỗ trợ và phải được đặt trong res/font

    Ví dụ: sử dụng phông chữ Pacifico từ Google Fonts và đặt tài sản dưới dạng 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. Ngoài ra, hãy xác định một BitmapFont cung cấp hình ảnh bitmap trong 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>
<!-- ... -->

Lưu ý cách xử lý đặc biệt các chuỗi ký tự. Ví dụ: nếu "12" được biểu thị bằng 1 và 2 được nối với nhau, thì bạn có thể thực hiện việc này bằng cách sử dụng phần tử Word.

Cách sử dụng phông chữ đã xác định:

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

Hiệu ứng cho văn bản

Định dạng mặt đồng hồ cung cấp một số hiệu ứng văn bản có thể áp dụng, chẳng hạn như OutGlow và Shadow. Để sử dụng các phần tử này, hãy áp dụng chúng dưới dạng phần tử con của phần tử Font:

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

Làm việc với mẫu

Thay vì văn bản tĩnh, bạn có thể cần tạo văn bản từ các nguồn dữ liệu hoặc biểu thức.

Phần tử Template cho phép bạn làm việc này:

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

Làm việc với các tài nguyên

Nếu văn bản tĩnh được xác định trong một tài nguyên, chẳng hạn như trong res/values/strings.xml, thì bạn có thể tham chiếu văn bản đó như sau:

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

Điều này cũng cho phép bạn bản địa hoá mặt đồng hồ bằng nhiều bộ hạn định tài nguyên.

Khoảng cách tay cầm

Có thể gặp một số vấn đề khi xử lý khoảng cách và văn bản:

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

Điều này là do khoảng cách rất quan trọng trong XML. Để tránh trường hợp này, hãy gói nội dung Font trong phần tử CDATA:

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

Bạn có thể xem một ví dụ khác khi cố gắng căn giữa văn bản:

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

Văn bản nhiều dòng

Để tạo văn bản nhiều dòng, hãy sử dụng thuộc tính maxLines trên 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>