ใช้ Jetpack Compose ใน Wear OS

Compose สำหรับ Wear OS เวอร์ชัน Material 2.5 3

---

รูปที่ 1 Jetpack Compose สำหรับ Wear OS

Compose สำหรับ Wear OS คล้ายกับ Compose สำหรับอุปกรณ์เคลื่อนที่ แต่ก็มีความแตกต่างที่สำคัญบางประการ คู่มือนี้จะอธิบายความคล้ายคลึงและความแตกต่าง

Compose สำหรับ Wear OS เป็นส่วนหนึ่งของ Android Jetpack และเช่นเดียวกับไลบรารี Wear Jetpack อื่นๆ ที่คุณใช้ Compose จะช่วยให้คุณเขียนโค้ดได้ดีขึ้นและเร็วขึ้น นี่คือแนวทางที่เราแนะนำในการสร้างอินเทอร์เฟซผู้ใช้สำหรับแอป Wear OS

หากคุณไม่คุ้นเคยกับการใช้ชุดเครื่องมือ Jetpack Compose โปรดดูเส้นทางการเรียนรู้ Compose หลักการพัฒนา Compose บนมือถือหลายข้อใช้ได้กับ Compose สำหรับ Wear OS ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อดีทั่วไปของเฟรมเวิร์ก UI แบบประกาศได้ที่เหตุผลที่ควรใช้ Compose ดูข้อมูลเพิ่มเติมเกี่ยวกับ Compose สำหรับ Wear OS ได้ที่เส้นทางการเรียนรู้ Compose สำหรับ Wear OS และที่เก็บตัวอย่าง Wear OS ใน GitHub

ทักษะ Android

ดูใน GitHub

Wear Compose Material 3

ใช้ทักษะ Android เพื่อช่วยคุณสร้างโดยใช้ Jetpack Compose ใน Wear OS รวมถึงการย้ายข้อมูลจาก Material เวอร์ชันก่อนหน้าไปยัง Material3

หากต้องการติดตั้งทักษะจาก Android CLI ให้เรียกใช้คำสั่งต่อไปนี้

android skills add wear-compose-m3

Material Design ใน Jetpack Compose บน Wear OS

Jetpack Compose ใน Wear OS มีการใช้งาน Material 3 ซึ่งช่วยให้คุณออกแบบประสบการณ์การใช้งานแอปที่น่าสนใจยิ่งขึ้น คอมโพเนนต์ Material Design ใน Wear OS สร้างขึ้นจากการกำหนดธีม Material สำหรับ Wear การกำหนดธีมนี้เป็นวิธีที่เป็นระบบในการปรับแต่ง Material Design และแสดงถึงแบรนด์ของผลิตภัณฑ์ได้ดียิ่งขึ้น

ความเข้ากันได้

Compose สำหรับ Wear OS ทำงานบนนาฬิกาที่รองรับ Wear OS 3.0 (ระดับ API 30) และนาฬิกาที่ใช้ Wear OS 2.0 (ระดับ API 25 ขึ้นไป) การใช้ Compose สำหรับ Wear OS เวอร์ชัน 1.5 ต้องใช้ไลบรารี androidx.compose เวอร์ชัน 1.8 และ Kotlin 1.9.0 คุณสามารถใช้การแมป BOM และแผนผังความเข้ากันได้ของ Compose กับ Kotlin เพื่อตรวจสอบความเข้ากันได้ของ Compose

Surface

Compose สำหรับ Wear OS ช่วยให้การสร้างแอปใน Wear OS ง่ายขึ้น ดูข้อมูลเพิ่มเติมได้ที่แอป ใช้คอมโพเนนต์ในตัวของเราเพื่อสร้างประสบการณ์ของผู้ใช้ที่เป็นไปตามหลักเกณฑ์ของ Wear OS ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์ได้ที่คำแนะนำด้านการออกแบบ

กำลังตั้งค่า

การใช้ Jetpack Compose กับ Wear OS คล้ายกับการใช้ Jetpack Compose สำหรับโปรเจ็กต์ Android อื่นๆ ความแตกต่างหลักคือ Jetpack Compose สำหรับ Wear เพิ่มไลบรารีเฉพาะสำหรับ Wear ซึ่งช่วยให้สร้างอินเทอร์เฟซผู้ใช้ที่ปรับให้เหมาะกับนาฬิกาได้ง่ายขึ้น ในบางกรณี คอมโพเนนต์เหล่านั้นจะใช้ชื่อเดียวกันกับคอมโพเนนต์ที่ไม่ใช่ Wear เช่น androidx.wear.compose.material3.Button และ androidx.compose.material3.Button

สร้างแอปใหม่ใน Android Studio

หากต้องการสร้างโปรเจ็กต์ใหม่ที่มี Jetpack Compose ให้ทำดังนี้

1. หากอยู่ในหน้าต่าง Welcome to Android Studio ให้คลิก Start a new Android Studio project หากมีโปรเจ็กต์ Android Studio เปิดอยู่แล้ว ให้เลือก File > New > Import Sample จากแถบเมนู
2. ค้นหา Compose สำหรับ Wear แล้วเลือก Compose สำหรับ Wear OS Starter
3. ในหน้าต่าง Configure your project ให้ทำดังนี้
   1. ตั้งค่า Application name
   2. เลือก Project location สำหรับไฟล์ตัวอย่างของคุณ
4. คลิกเสร็จสิ้น
5. ตรวจสอบว่าไฟล์ build.gradle ของโปรเจ็กต์ได้รับการกำหนดค่าอย่างถูกต้องตามที่อธิบายไว้ในไฟล์พร็อพเพอร์ตี้ Gradle

ตอนนี้คุณพร้อมที่จะเริ่มพัฒนาแอปโดยใช้ Compose สำหรับ Wear OS แล้ว

ทรัพยากร Dependency ของชุดเครื่องมือ Jetpack Compose

หากต้องการใช้ Jetpack Compose กับ Wear OS คุณจะต้องรวมทรัพยากร Dependency ของชุดเครื่องมือ Jetpack Compose ไว้ในไฟล์ build.gradle ของแอป การเปลี่ยนแปลงทรัพยากร Dependency ส่วนใหญ่ที่เกี่ยวข้องกับ Wear OS จะอยู่ในเลเยอร์สถาปัตยกรรมด้านบน ซึ่งล้อมรอบด้วยกล่องสีแดงในรูปภาพต่อไปนี้

รูปที่ 2 การเปลี่ยนแปลงทรัพยากร Dependency สำหรับ Wear OS ในสถาปัตยกรรม Compose

ซึ่งหมายความว่าทรัพยากร Dependency หลายรายการที่คุณใช้กับ Jetpack Compose อยู่แล้วจะไม่เปลี่ยนแปลงเมื่อกำหนดเป้าหมายเป็น Wear OS ตัวอย่างเช่น UI, รันไทม์, คอมไพเลอร์ และทรัพยากร Dependency ของภาพเคลื่อนไหวยังคงเหมือนเดิม

อย่างไรก็ตาม Wear OS มีไลบรารี material และ material3, foundation และ navigation เป็นของตัวเอง ดังนั้นโปรดตรวจสอบว่าคุณใช้ไลบรารีที่เหมาะสม

ใช้ API เวอร์ชัน WearComposeMaterial หากเป็นไปได้ แม้ว่าในทางเทคนิคแล้วจะสามารถใช้ Compose Material เวอร์ชันสำหรับมือถือได้ แต่ก็ไม่ได้เพิ่มประสิทธิภาพให้เหมาะกับข้อกำหนดเฉพาะของ Wear OS นอกจากนี้ การผสม Compose Material กับ Compose Material สำหรับ Wear OS อาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิด ตัวอย่างเช่น เนื่องจากแต่ละไลบรารีมีคลาส MaterialTheme ของตัวเอง จึงอาจทำให้สี ตัวพิมพ์ หรือรูปร่างไม่สอดคล้องกันหากใช้ทั้ง 2 เวอร์ชัน

ตารางต่อไปนี้สรุปความแตกต่างของทรัพยากร Dependency ระหว่าง Wear OS กับอุปกรณ์เคลื่อนที่

ทรัพยากร Dependency ของ Wear OS (androidx.wear.*)	การเปรียบเทียบ	ทรัพยากร Dependency บนอุปกรณ์เคลื่อนที่ (androidx.*)
androidx.wear.compose:compose-material3	แทนที่จะเป็น	androidx.compose.material:material3
androidx.wear.compose:compose-navigation	แทนที่จะเป็น	androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation	นอกเหนือจาก	androidx.compose.foundation:foundation

หมายเหตุ: คุณสามารถใช้ทรัพยากร Dependency ของ Material อื่นๆ ที่ไม่ใช่สำหรับอุปกรณ์เคลื่อนที่ได้ เช่น Material Ripple และไอคอนจากดีไซน์ Material แบบขยาย

ข้อมูลโค้ดต่อไปนี้แสดงตัวอย่างไฟล์ build.gradle ที่มีการขึ้นต่อกันเหล่านี้

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2026.09.00")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.13.0")
    implementation("androidx.compose.ui:ui-tooling-preview:1.12.1")
    // Other compose dependencies

    // Compose for Wear OS dependencies
    implementation("androidx.wear.compose:compose-material3:1.7.1")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.7.1")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.7.1")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.7.1")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.4.1")

}

ความคิดเห็น

ลองใช้ Compose สำหรับ Wear OS และใช้Issue Trackerเพื่อแสดงความคิดเห็นและคำแนะนำ

เข้าร่วมแชแนล#compose-wear ใน Kotlin Slack เพื่อเชื่อมต่อกับชุมชนนักพัฒนาแอปและบอกเล่าประสบการณ์ของคุณให้เราทราบ