ตั้งค่า Watch Face Format

หมายเหตุ: หน้านี้แสดงขั้นตอนในกระบวนการจัดการการกำหนดค่าหน้าปัดด้วยตนเอง หากต้องการออกแบบหน้าปัดโดยใช้เครื่องมือสไตล์ WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) แทน ให้ดูคำแนะนำของ Watch Face Studio ก่อน

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

เริ่มต้นใช้งาน Android Studio

วิธีที่ง่ายที่สุดในการเริ่มต้นพัฒนาหน้าปัดด้วยตนเองคือการใช้ Android Studio การรองรับหน้าปัดพร้อมให้บริการในเวอร์ชัน Canary

1. คลิก File > New Project
2. ในส่วน Wear OS ให้เลือกหน้าปัดนาฬิกาพื้นฐาน

ซึ่งจะสร้างโครงสร้างที่จำเป็นสำหรับหน้าปัดที่ทำงานได้อย่างเต็มที่

โครงสร้างโปรเจ็กต์

เมื่อสร้างหน้าปัดที่กำหนดเองซึ่งใช้ Watch Face Format คุณจะต้องแยก Android App Bundle ที่มีไฟล์หน้าปัดที่กำหนดเองออกจาก Android App Bundle ที่มีตรรกะของแอป Wear OS โดยสมบูรณ์ App Store บางแห่ง รวมถึง Google Play ไม่อนุญาตให้คุณอัปโหลด Android App Bundle ที่มีทั้งตรรกะของ Wear OS และหน้าปัดที่กำหนดเอง

ประกาศเวอร์ชัน Watch Face Format

ในไฟล์ Manifest ของแอปใหม่ (AndroidManifest.xml) ให้ตรวจสอบพร็อพเพอร์ตี้แอปพลิเคชัน ที่ระบุการใช้ Watch Face Format

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

<manifest ...>
    <!--
        Use SDK version 33 to support Watch Face Format (WFF) version 1 and
        higher, SDK version 34 to support WFF version 2 and higher, and so on.
    -->
    <uses-sdk
        android:minSdkVersion="34"
        android:targetSdkVersion="34" />

    <!--
        WFF is a resource-only format, so the hasCode attribute should be set to
        false to reflect this.
    -->
    <application
        android:label="@string/watch_face_name"
        android:hasCode="false"
        ...>
        <meta-data android:name="com.google.android.wearable.standalone"
            android:value="true" />
        <property
            android:name="com.google.wear.watchface.format.version"
            android:value="2" />
    </application>
</manifest>

ประกาศข้อมูลเมตาของหน้าปัด

ในres/xmlไดเรกทอรีทรัพยากรของแอป จะมีไฟล์ชื่อ watch_face_info.xml คุณกำหนดข้อมูลเมตาของหน้าปัดได้ที่นี่

<?xml version="1.0" encoding="utf-8"?>
<WatchFaceInfo>

    <Preview value="@drawable/watch_face_preview" />
    <Category value="CATEGORY_EMPTY" />
    <AvailableInRetail value="true" />
    <MultipleInstancesAllowed value="true" />
    <Editable value="true" />
</WatchFaceInfo>

ฟิลด์ในไฟล์นี้แสดงรายละเอียดต่อไปนี้

Preview

อ้างอิงถึง Drawable ที่มีรูปภาพตัวอย่างของหน้าปัดนาฬิกา

Category

กำหนดหมวดหมู่ของหน้าปัด ต้องเป็นสตริงหรือการอ้างอิงไปยังสตริง เช่น @string/ref_name ผู้ผลิตอุปกรณ์แต่ละรายสามารถกำหนด ชุดหมวดหมู่หน้าปัดของตนเองได้

ค่าเริ่มต้น: empty_category_meta ซึ่งจะจัดกลุ่มหน้าปัดนี้ร่วมกับหน้าปัด "หมวดหมู่ว่าง" อื่นๆ ที่ด้านล่างของมุมมองตัวเลือกหน้าปัด

AvailableInRetail

ดูว่าหน้าปัดพร้อมใช้งานในโหมดสาธิตสำหรับร้านค้าปลีกของอุปกรณ์หรือไม่ ต้องเป็นค่าบูลีนหรือการอ้างอิงค่าบูลีน เช่น @bool/watch_face_available_in_retail

ค่าเริ่มต้น: false

MultipleInstancesAllowed

หน้าปัดมีรายการโปรดได้หลายรายการหรือไม่ ต้องเป็นค่าบูลีน หรือการอ้างอิงค่าบูลีน เช่น @bool/watch_face_multiple_instances_allowed

ค่าเริ่มต้น: false

Editable

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

ค่าเริ่มต้น: false

ประกาศชื่อหน้าปัด

ในไฟล์ Manifest ของแอป (AndroidManifest.xml) ให้ตั้งค่าแอตทริบิวต์ android:label เป็นชื่อของหน้าปัดนาฬิกา

<application android:label="@string/watch_face_name" >

ประกาศรายละเอียดหน้าปัด

โครงสร้างของเอกสารหน้าปัด WFF พื้นฐานมีดังนี้

<WatchFace width="450" height="450">
  <Scene>
    <!-- Content to be rendered -->
  </Scene>
</WatchFace>

เทมเพลต Android Studio มีเอกสารพื้นฐานใน res/raw/watchface.xml หากต้องการรองรับรูปร่างและขนาดหน้าจอต่างๆ ประกาศการรองรับรูปร่างและขนาดหลายรายการ

องค์ประกอบรูทคือ WatchFace เสมอ height และ width กำหนด ขอบเขตของพื้นที่พิกัดที่จะใช้ในหน้าปัด และหน้าปัด จะปรับขนาดให้พอดีกับอุปกรณ์ที่ใช้ height และ width ไม่ได้ แสดงถึงพิกเซลจริง

Watch Face Format จะจัดระเบียบรายละเอียดต่างๆ เกี่ยวกับหน้าปัด ดังนี้

• ข้อมูลเมตา เช่น เวลาและจำนวนก้าวที่แสดงในรูปภาพตัวอย่างของหน้าปัดนาฬิกา
• การกำหนดค่าของผู้ใช้ เช่น ธีมสีต่างๆ สำหรับหน้าปัด องค์ประกอบที่ผู้ใช้เปิด/ปิดได้ และการเลือกจากองค์ประกอบหลายรายการ Watch Face Format เวอร์ชัน 2 มีรูปแบบซึ่งจะปรากฏในการกำหนดค่าของผู้ใช้ แต่ละรูปแบบจะระบุการกำหนดค่าผู้ใช้ที่กำหนดไว้ล่วงหน้า โดยระบุ ประเภทและสไตล์ขององค์ประกอบที่ปรากฏพร้อมกับเวลาในหน้าปัด ค่าที่กำหนดล่วงหน้าเหล่านี้จะช่วยให้คุณสร้างกลุ่มองค์ประกอบที่ ดูดีได้ง่ายขึ้น ในแอป Wear OS ที่ใช้ร่วมกัน ผู้ใช้จะเห็น รูปแบบต่างๆ ของหน้าปัดของคุณในแถวที่เลื่อนได้
• ฉากที่มีองค์ประกอบภาพของหน้าปัด องค์ประกอบที่ ปรากฏใกล้กับตอนท้ายของฉากจะอยู่เหนือองค์ประกอบอื่นๆ ดังนั้น ลำดับปกติจึงเป็นดังนี้
  • เข็มสำหรับนาฬิกาแอนะล็อกหรือข้อความสำหรับนาฬิกาดิจิทัล
  • ภาวะแทรกซ้อนที่แสดงข้อมูลเพิ่มเติม เช่น วันในสัปดาห์หรือจำนวนก้าวของผู้ใช้
  • กราฟิกอื่นๆ ที่สร้างความน่าสนใจหรือตกแต่งหน้าปัด เช่น รูปภาพค่ายพักแรม
• กลุ่มขององค์ประกอบ ซึ่งช่วยให้คุณแก้ไของค์ประกอบหลายรายการได้พร้อมกัน คุณสร้างตัวแปรของกลุ่มเหล่านี้ภายในฉากได้ ซึ่งจะช่วยให้คุณซ่อนหรือแก้ไขเนื้อหาได้ตามต้องการเมื่อระบบเข้าสู่โหมดแอมเบียนต์ประหยัดพลังงาน

แอตทริบิวต์เป็นแบบคงที่และมีหลักเกณฑ์เกี่ยวกับความถี่และค่าที่ถูกต้อง เพื่อหลีกเลี่ยงแหล่งที่มาของข้อผิดพลาดส่วนใหญ่เมื่อสร้างหน้าปัดนาฬิกา

หมายเหตุ: ขณะกำหนดค่าหน้าปัดนาฬิกา ให้เพิ่มประสิทธิภาพการใช้หน่วยความจำ

ประกาศการรองรับรูปร่างหน้าปัด (ไม่บังคับ)

ขั้นตอนนี้จำเป็นเฉพาะในกรณีที่คุณต้องการรองรับลักษณะการทำงานที่แตกต่างกันสำหรับหน้าปัดนาฬิกาขนาดต่างๆ คุณข้ามขั้นตอนนี้ได้หากต้องการให้หน้าปัด นาฬิกาปรับขนาดตามขนาดของนาฬิกา

ในres/xmlไดเรกทอรีทรัพยากรwatch_face_shapes.xmlของแอป ให้ประกาศชุดรูปร่างหน้าปัดนาฬิกาที่คุณรองรับใน

<WatchFaces>
    <WatchFace shape="CIRCLE" width="300" height="300"
               file="@raw/watchface"/>
    <WatchFace shape="CIRCLE" width="450" height="450"
               file="@raw/watchface_large_circle"/>
<WatchFaces>

จากนั้นกำหนดลักษณะที่ปรากฏและลักษณะการทำงานของหน้าปัดสำหรับรูปร่างหน้าปัดแต่ละแบบ หากไม่ได้กำหนดไฟล์รูปร่าง คุณจะต้องมีเพียงไฟล์เดียว watchface.xml

หากใช้ตัวอย่างจากส่วนนี้ ไฟล์ XML ดิบจะมีลักษณะดังนี้

• res/raw/watchface.xml
• res/raw/watchface_large_circle.xml

ระบุผู้เผยแพร่หน้าปัด (ไม่บังคับ)

คุณอาจประกาศสตริงที่กำหนดเองในไฟล์ Manifest ของแอป ซึ่งคุณใช้เพื่อระบุผู้เผยแพร่หน้าปัดนาฬิกา หรือชื่อเครื่องมือและเวอร์ชันที่คุณใช้ได้

<application ...>
    ...
    <property
        android:name="com.google.wear.watchface.format.publisher"
        android:value="<var>{toolName}-{toolVersion}</var>" />
</application>

ตรวจสอบความถูกต้องและประสิทธิภาพของหน้าปัด

ในระหว่างการพัฒนาและก่อนอัปโหลดไปยัง Google Play ให้ตรวจสอบว่าหน้าปัดไม่มีข้อผิดพลาดด้านไวยากรณ์โดยใช้การตรวจสอบรูปแบบหน้าปัดในตัวของ Android Studio ซึ่งจะไฮไลต์ข้อผิดพลาดในโค้ดโดยอัตโนมัติ และรับรู้เวอร์ชัน

นอกจากนี้ คุณควรตรวจสอบว่าหน้าปัดเป็นไปตามข้อกำหนดการใช้งานหน่วยความจำ โดยเรียกใช้เครื่องมือร่องรอยหน่วยความจำ

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

สร้าง App Bundle ของแอปหน้าปัด

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

ตัวอย่างหน้าปัด

ดูตัวอย่างเพิ่มเติมของโปรเจ็กต์รูปแบบหน้าปัดนาฬิกาได้ใน GitHub