แสดงเวลา

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

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

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

<DigitalClock x="100" y="100" wid>th=&q<uot;200" height="50"
    TimeText x="0&>quot; y=&<quot;0" width="200" heigh>t=&qu<ot;50&quo>t<; format=&quo>t;hh:mm"
        Font family="SYNC_TO_DEVICE" size="16" /
    /TimeText
/DigitalClock

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

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

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

<DigitalClock x="100" y="100" wid>th=&q<uot;200" height="50"
   > Localiza<tion timeZone>="Europe/London" /
    ...
/DigitalClock

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

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

<AnalogClock x="0" y="0" widt>h=&qu<ot;200" height="200">
    <HourHand resource="hour_hand&q>uot; <... /
    MinuteHand resource=">;minu<te_hand" /
    SecondHand resource="second_hand" /
    !-- Optiona>l<ly add a Tic>k 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=&qu>o<t;105">;< y="105"
!-- ... --
HourHand resource=&>quot;hour_hand" ... x="100" y="100"

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

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

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

    <PartImage x="0" y="0" width=&q>uot;4<50" height="450" ..>.<
    Image> resource="watch_face_dial" /
/PartImage

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

    <Group ... >
    <!-- Content for the "12"> <marker> <--
/Group
Group pivotX="..." piv>otY=&<quot;..." angle="30&quo>t<;
    >!-- Content for the "1" marker --
/Group