ทำงานกับข้อความ

สำหรับนาฬิกาดิจิทัล คุณควรใช้ DigitalClock เมื่อเป็นไปได้ สำหรับข้อความหรือนาฬิกาอื่นๆ ทั้งหมดที่ไม่สามารถแสดงโดยใช้ DigitalClock PartText จะเป็นคอนเทนเนอร์สำหรับการเรนเดอร์แบบข้อความ

PartText ควรมีองค์ประกอบ Text หรือ TextCircular อย่างใดอย่างหนึ่ง ทั้งนี้ขึ้นอยู่กับว่าคุณต้องการแสดงข้อความแบบวงกลมหรือแบบปกติ

ทำงานกับแบบอักษรและแบบอักษรบิตแมป

การใช้แบบอักษรที่กำหนดเองช่วยให้หน้าปัดโดดเด่นด้วยสไตล์ที่เป็นเอกลักษณ์

คุณใช้แบบอักษรที่กำหนดเองได้ 2 วิธี ทั้งภายในคอนเทนเนอร์ TimeText และ PartText

  1. ระบุแบบอักษรที่กำหนดเอง family ในองค์ประกอบ Font ระบบรองรับรูปแบบทั่วไปที่หลากหลาย ซึ่งต้องวางไว้ใน res/font

    ตัวอย่างเช่น การใช้แบบอักษร Pacifico จาก Google Fonts และวางชิ้นงานเป็น 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. หรือจะกำหนด BitmapFont ที่ระบุรูปภาพบิตแมปใน 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>
    <!-- ... -->
    

โปรดทราบว่าลำดับอักขระได้รับการดำเนินการพิเศษอย่างไร เช่น หากต้องการแสดง "12" ด้วย 1 และ 2 ที่เชื่อมกัน คุณจะทำได้โดยการใช้องค์ประกอบ Word

วิธีใช้แบบอักษรที่กําหนด

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

เอฟเฟกต์ข้อความ

Watch Face Format มีเอฟเฟกต์ข้อความหลายรายการที่ใช้ได้ เช่น 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>

ข้อความหลายบรรทัด

หากต้องการสร้างข้อความหลายบรรทัด ให้ใช้แอตทริบิวต์ maxLines ใน 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>