텍스트 사용

디지털 시계의 경우 가능한 경우 DigitalClock를 사용하는 것이 좋습니다. DigitalClock를 사용하여 표현할 수 없는 다른 모든 텍스트 또는 시계의 경우 PartText는 텍스트 기반 렌더링의 컨테이너입니다.

원형 텍스트를 표시할지 일반 텍스트를 표시할지에 따라 PartText는 Text 또는 TextCircular 요소를 하나 포함해야 합니다.

글꼴 및 비트맵 글꼴 사용

맞춤 글꼴을 사용하면 시계 화면이 나만의 스타일로 돋보일 수 있습니다.

커스텀 글꼴을 사용하는 방법에는 두 가지가 있습니다. 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>

텍스트 효과

워치 페이스 형식은 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>