ใช้ Jetpack Compose ใน Wear OS

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

Compose สำหรับ Wear OS เป็นส่วนหนึ่งของ Android Jetpack และช่วยให้คุณเขียนโค้ดได้ดีขึ้นและเร็วขึ้นเช่นเดียวกับไลบรารี Wear Jetpack อื่นๆ ที่คุณใช้ นี่เป็นแนวทางที่เราแนะนำในการสร้างอินเทอร์เฟซผู้ใช้สำหรับแอป 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 2.5 ซึ่งจะช่วยให้คุณออกแบบประสบการณ์การใช้งานแอปที่น่าสนใจยิ่งขึ้น คอมโพเนนต์ Material Design ใน Wear OS สร้างขึ้นจากการกำหนดธีม Material ของ Wear ธีมนี้เป็นวิธีที่เป็นระบบในการปรับแต่ง Material Design และแสดงถึงแบรนด์ของผลิตภัณฑ์ได้ดียิ่งขึ้น

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

เครื่องมือเขียนสำหรับ Wear OS ใช้งานได้ในนาฬิกาที่รองรับ Wear OS 3.0 (API ระดับ 30) และนาฬิกาที่ใช้ Wear OS 2.0 (API ระดับ 25 ขึ้นไป) การใช้ Compose เวอร์ชัน 1.4 สำหรับ Wear OS ต้องใช้ไลบรารี androidx.compose เวอร์ชัน 1.7 และ 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 โดยเฉพาะ ซึ่งช่วยให้สร้างอินเทอร์เฟซผู้ใช้ที่ปรับให้เหมาะกับนาฬิกาได้ง่ายขึ้น ในบางกรณี คอมโพเนนต์เหล่านั้นจะมีชื่อเหมือนกับคอมโพเนนต์ที่ไม่ใช่อุปกรณ์สวมใส่ เช่น androidx.wear.compose.material.Button และ androidx.compose.material.Button

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

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

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

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

Dependency ของเครื่องมือของ Jetpack Compose

หากต้องการใช้ Jetpack Compose กับ Wear OS คุณจะต้องรวมทรัพยากร Dependency ของเครื่องมือของ Jetpack Compose ไว้ในไฟล์ build.gradle ของแอป การเปลี่ยนแปลงส่วนใหญ่เกี่ยวกับความเกี่ยวข้องของ 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="" />

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

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

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

ตารางต่อไปนี้จะสรุปความแตกต่างของข้อกําหนดระหว่าง Wear OS กับ Mobile

Dependency ของ Wear OS

(androidx.wear.*)

การเปรียบเทียบ Mobile Dependency

(androidx.*)

androidx.wear.compose:compose-material แทน androidx.compose.material:material
androidx.wear.compose:compose-navigation แทน androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation นอกเหนือจาก androidx.compose.foundation:foundation

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

Kotlin

dependencies {

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

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

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

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

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

    // 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.4.0")

    // 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")
}

ความคิดเห็น

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

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