ใช้ 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

Material Design ใน Jetpack Compose บน Wear OS

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

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

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 for Wear แล้วเลือก Compose for 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 จะอยู่ใน เลเยอร์สถาปัตยกรรมด้านบน ซึ่งล้อมรอบด้วยกล่องสีแดง ในรูปภาพต่อไปนี้

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

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

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

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

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

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

dependencies {

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

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

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

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

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.6.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.6.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")

}