Sử dụng Jetpack Compose trên Wear OS

Stay organized with collections Save and categorize content based on your preferences.

Compose cho Wear OS cũng tương tự như Compose cho thiết bị di động. Tuy nhiên, có một số điểm khác biệt chính. Hướng dẫn này sẽ chỉ cho bạn những điểm tương đồng và khác biệt.

Compose cho Wear OS là một phần của Android Jetpack, và cũng giống như các thư viện Wear Jetpack khác mà bạn sử dụng, tính năng này giúp bạn viết mã tốt hơn và nhanh hơn.

Nếu bạn chưa hiểu rõ về cách sử dụng Jetpack Compose dành cho thiết bị di động, hãy xem Lộ trình tìm hiểu về tính năng Compose. Nhiều nguyên tắc phát triển cho tính năng Compose trên thiết bị di động sẽ áp dụng cho tính năng Compose trên Wear OS. Để tìm hiểu thêm về Compose cho Wear OS, hãy xem Lộ trình tìm hiểu về Compose cho Wear OSKho lưu trữ mẫu Wear OS trên GitHub.

Khả năng tương thích

Compose cho Wear OS hoạt động trên các đồng hồ hỗ trợ Wear OS 3.0 (API cấp 30) và các đồng hồ sử dụng Wear OS 2.0 (API cấp 25 trở lên).

Các bề mặt

Compose cho Wear OS dành cho bề mặt (giao diện) lớp phủ, tương tự như giao diện ứng dụng trên thiết bị di động. Để biết thêm thông tin, vui lòng xem nội dung Lớp phủ.

Bề mặt này rất phù hợp cho các tương tác phức tạp.

Đang thiết lập

Sử dụng Jetpack Compose với Wear OS cũng tương tự như sử dụng Jetpack Compose cho mọi dự án Android khác. Điểm khác biệt chính là Jetpack Compose cho Wear sẽ thêm các thư viện dành riêng cho Wear. Điều này giúp bạn dễ dàng tạo giao diện người dùng dành riêng cho đồng hồ. Trong một số trường hợp, các thành phần đó có cùng tên với các thành phần không phải Wear, chẳng hạn như androidx.wear.compose.material.Buttonandroidx.compose.material.Button.

Tạo ứng dụng mới trong Android Studio

Để tạo một dự án mới có chứa Jetpack Compose, hãy tiến hành như sau:

  1. Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio, vui lòng nhấp vào nút Bắt đầu dự án Android Studio mới. Nếu bạn đã mở một dự án Android Studio, hãy chọn Tệp > Mới > Nhập mẫu trong thanh trình đơn.
  2. Tìm Compose cho Wear rồi chọn Compose cho Wear OS cho người mới bắt đầu.
  3. Trong cửa sổ Định cấu hình dự án của bạn, hãy làm như sau:
    1. Đặt Tên ứng dụng.
    2. Chọn Vị trí dự án cho mẫu của bạn.
  4. Nhấp vào Hoàn tất.
  5. Xác minh rằng tệp build.gradle của dự án được định cấu hình chính xác, như mô tả trong các tệp thuộc tính Gradle.

Giờ đây, bạn đã sẵn sàng để bắt đầu phát triển một ứng dụng bằng tính năng Compose dành cho Wear OS.

Các phần phụ thuộc của bộ công cụ Jetpack Compose

Để sử dụng Jetpack Compose cho Wear OS, bạn cần đưa các phần phụ thuộc của bộ công cụ Jetpack Compose vào tệp build.gradle của ứng dụng, như minh hoạ trong đoạn mã sau:

Kotlin

dependencies {
    // General compose dependencies
    implementation "androidx.activity:activity-compose:1.3.1"
    implementation "androidx.compose.ui:ui-tooling-preview:1.0.3"
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation "androidx.wear.compose:compose-material:1.0.0"

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation "androidx.wear.compose:compose-foundation:1.0.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.0.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"
}

Điểm khác biệt

Sử dụng phiên bản API WearComposeMaterial nếu có thể. Mặc dù về mặt kỹ thuật thì bạn có thể sử dụng phiên bản Compose Material dành cho thiết bị di động, nhưng phiên bản này không được tối ưu hoá theo các yêu cầu riêng của Wear OS. Ngoài ra, việc kết hợp Compose Material với Compose Material cho Wear OS có thể dẫn đến hành vi ngoài dự kiến. Ví dụ, do mỗi thư viện có lớp MaterialTheme riêng, nên có thể màu sắc, kiểu chữ hoặc hình dạng sẽ không nhất quán nếu sử dụng cả hai phiên bản.

Bảng sau đây trình bày những điểm khác biệt về phần phụ thuộc giữa Wear OS và Thiết bị di động:

Phần phụ thuộc trên Wear OS

(androidx.wear.*)

So sánh Phần phụ thuộc trên Thiết bị di động

(androidx.*)

androidx.wear.compose:compose-material thay cho androidx.compose.material:material
androidx.wear.compose:compose-navigation thay cho androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation bổ sung cho androidx.compose.foundation:foundation

Dưới đây là tệp build.gradle mẫu:

// 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...
}

Ý kiến phản hồi

Hãy dùng thử tính năng Compose dành cho Wear OS và sử dụng công cụ theo dõi lỗi để đưa ra đề xuất và ý kiến phản hồi.

Hãy tham gia kênh #compose-wear trên Kotlin Slack để kết nối với cộng đồng các nhà phát triển và chia sẻ cho chúng tôi về những trải nghiệm của bạn.