แสดงเวลา

งานหลักของหน้าปัดคือการแสดงเวลา และ Watch Face Format ช่วยให้คุณสร้างทั้งนาฬิกาแบบแอนะล็อกและแบบดิจิทัลได้โดยใช้องค์ประกอบ AnalogClock และ DigitalClock

นาฬิกาดิจิทัล

คุณกำหนดนาฬิกาดิจิทัลพื้นฐานได้โดยใช้องค์ประกอบ DigitalClock และ TimeText ภายในหน้าปัด Scene ดังนี้

<DigitalClock x="100" y="100" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>

แอตทริบิวต์ format ช่วยให้คุณควบคุมวิธีแสดงเวลาโดยใช้การผสมผสานระหว่างชั่วโมง นาที และวินาที ตัวเลือกที่แน่นอนจะแตกต่างกันไปตามเวอร์ชันของ Watch Face Format ที่ใช้ โดยเวอร์ชัน 2 จะขยายตัวเลือกที่นี่

ในตัวอย่างก่อนหน้านี้ Font ได้รับการตั้งค่าให้ใช้แบบอักษรของระบบ

นอกจากนี้ยังอาจมีประโยชน์ในการแสดงเวลาของสถานที่อื่นๆ ในโลก เช่น นาฬิกาบอกเวลาโลก ซึ่งทำได้ผ่านองค์ประกอบ Localization ดังนี้

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

นาฬิกาแอนะล็อก

หากต้องการสร้างนาฬิกาอะนาล็อก ให้ใช้องค์ประกอบ AnalogClock องค์ประกอบย่อย HourHand, MinuteHand และ SecondHand แต่ละรายการระบุทรัพยากรที่ควรใช้ในการแสดงผล

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

ระบุจุดหมุน

ทรัพยากรชั่วโมง นาที และวินาทีแต่ละรายการจะหมุนไปเรื่อยๆ ตามเวลา แต่คุณควรระบุจุดที่ถูกต้องซึ่งแต่ละรายการควรหมุนรอบ

ในบางกรณี จุดหมุนไม่ได้อยู่ที่ด้านล่างของมือ แต่อยู่กึ่งกลางในแนวนอน ซึ่งควรระบุเป็น <HourHand … pivotY="(pivot_ratio)" /> โดยที่

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

ระบายสีเข็มนาฬิกา

โดยทั่วไปแล้ว หน้าปัดจะมีสีของเข็มนาฬิกาที่ปรับแต่งได้เพื่อให้ผู้ใช้ปรับแต่งลักษณะของหน้าปัดได้

วิธีทำคือใช้ tintColor บนมือแต่ละข้างเพื่อปรับสีมือแต่ละข้างแยกกัน หรือใช้ AnalogClock เพื่อปรับสีมือทั้งหมดให้เป็นสีเดียวกัน

นอกจากการเปิดใช้ให้ผู้ใช้ปรับสีที่ต้องการแล้ว คุณยังระบุตัวเลือกการกำหนดค่าให้กับ tintColor เพื่ออนุญาตให้ผู้ใช้เลือกสิ่งต่อไปนี้ได้ด้วย

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

เงาตกกระทบ

หากต้องการให้เข็มนาฬิกาดูสมจริง ให้ใช้เงาตกหลังเข็มแต่ละเข็มเพื่อให้ดูเหมือนมีมิติ วิธีทำคือใช้มือแต่ละประเภท 2 มือ โดยวางซ้อนกันโดยให้มือหนึ่งอยู่หลังอีกมือหนึ่ง แล้วใส่ทรัพยากรแยกต่างหากสำหรับเงา

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

การตกแต่งใบหน้า

หน้าปัดแอนะล็อกมักจะมีการตกแต่งรอบๆ หน้าปัดซึ่งแสดงชั่วโมงหรือนาที ซึ่งทำได้ 2 วิธีดังนี้

  1. ใส่ภาพพื้นหลังแบบเต็มหน้าจอซึ่งมีหน้าปัดที่คุณวาดไว้ล่วงหน้า ดูการทํางานกับรูปภาพ

    <PartImage x="0" y="0" width="450" height="450" ...>
    <Image resource="watch_face_dial" />
</PartImage>

  2. วาดการตกแต่งแยกต่างหากและวางไว้รอบๆ ใบหน้าโดยใช้การหมุน

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>