แสดงเวลา

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

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

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

<DigitalClock x="125" y="50" 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>watchface_clocks.xml

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

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

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

<DigitalClock x="125" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    <!-- TimeText goes here -->
    <!-- START_EXCLUDE -->
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
    <!-- END_EXCLUDE -->
</DigitalClock>watchface_clocks.xml

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

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

<AnalogClock x="0" y="0" width="450" height="450">
    <HourHand resource="hour" x="220" y="55" width="20" height="190"
        pivotX="0.5" pivotY="0.9210" />
    <MinuteHand resource="minute" x="222" y="30" width="16" height="220"
        pivotX="0.5" pivotY="0.9" />
    <SecondHand resource="second" x="226" y="20" width="8" height="245"
        pivotX="0.5" pivotY="0.8571" />
</AnalogClock>watchface_clocks.xml

ระบุจุดหมุน

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

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

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

เปลี่ยนสีเข็มนาฬิกา

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

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

นอกเหนือจากการอนุญาตให้ผู้ใช้ปรับสีที่เฉพาะเจาะจงแล้ว คุณยังสามารถระบุตัวเลือกการกำหนดค่าให้กับ tintColor เพื่ออนุญาตให้ผู้ใช้เลือกได้ เช่น การเพิ่ม tintColor="[CONFIGURATION.handColors.0] ลงในองค์ประกอบ AnalogClock

เงาตกกระทบ

หากต้องการให้เข็มนาฬิกาดูสมจริง การใช้เงาตกกระทบด้านหลังเข็มแต่ละเข็มจะช่วยให้ ดูมีมิติ

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

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

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

ใส่ภาพพื้นหลังแบบเต็มหน้าจอซึ่งมีหน้าปัดนาฬิกาที่คุณวาดไว้ล่วงหน้า ดูการทำงานกับรูปภาพ
```
<PartImage x="0" y="0" width="450" height="450">
    <Image resource="watch_face_dial" />
</PartImage>watchface_clocks.xml
```

วาดของตกแต่งแยกกันแล้ววางไว้รอบใบหน้าโดยใช้การหมุน

<!-- Content for the "12" -->
<Group x="200" y="0" width="50" height="450">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[12]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- Content for the "1" -->
<Group x="200" y="0" width="50" height="450" angle="30">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[1]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- etc -->watchface_clocks.xml

แสดงเวลา จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ