ใช้ Jetpack Compose ใน Wear OS

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

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

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

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

Compose สำหรับ Wear OS ใช้งานได้ในนาฬิกาที่รองรับ Wear OS 3.0 (API ระดับ 30) และนาฬิกาที่ใช้ Wear OS 2.0 (API ระดับ 25 ขึ้นไป) การใช้ เวอร์ชัน 1.0 ของ Compose สำหรับ Wear OS ต้องใช้เวอร์ชัน 1.2 ไลบรารี androidx.compose และ Kotlin 1.7.0

Surface

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

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

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

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

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

1. หากคุณอยู่ในหน้าต่างยินดีต้อนรับสู่ Android Studio ให้คลิกเริ่มใหม่ โปรเจ็กต์ Android Studio หากเปิดโปรเจ็กต์ Android Studio ไว้อยู่แล้ว เลือก ไฟล์ > ใหม่ > นำเข้าตัวอย่างจากแถบเมนู
2. ค้นหา Compose สำหรับ Wear แล้วเลือก Compose สำหรับ Wear OS Starter
3. ในหน้าต่างกำหนดค่าโปรเจ็กต์ ให้ทำดังนี้
   1. ตั้งชื่อแอปพลิเคชัน
   2. เลือกสถานที่ตั้งของโครงการสำหรับตัวอย่างของคุณ
4. คลิกเสร็จสิ้น
5. ตรวจสอบว่าได้กำหนดค่าไฟล์ build.gradle ของโปรเจ็กต์อย่างถูกต้อง ตามที่อธิบายไว้ในไฟล์พร็อพเพอร์ตี้ Gradle

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

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

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

dependencies {

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

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

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.3.1")

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

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

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    implementation "androidx.wear.compose:compose-material:$rootProject.wearVersion"
    implementation "androidx.wear.compose:compose-foundation:$rootProject.wearVersion"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$rootProject.wearVersion"

    // Other dependencies...
}