Dùng Jetpack Compose trên Wear OS

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, bộ công cụ này giúp bạn viết mã tốt hơn và nhanh hơn. Đây là phương pháp chúng tôi đề xuất để xây dựng giao diện người dùng cho các ứng dụng Wear OS.

Nếu bạn chưa hiểu rõ về cách sử dụng bộ công cụ Jetpack Compose, hãy tham khảo Lộ trình tìm hiểu Compose. Nhiều nguyên tắc phát triển đối với Compose cho thiết bị di động cũng áp dụng đối với Compose cho Wear OS. Xem bài viết Tại sao nên dùng Compose để biết thêm thông tin về những ưu điểm chung của khung giao diện người dùng khai báo. Để 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 OS và kho 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 đồng hồ hỗ trợ Wear OS 3.0 (API cấp 30) và đồng hồ sử dụng Wear OS 2.0 (API cấp 25 trở lên). Để sử dụng phiên bản 1.0 của Compose cho Wear OS, bạn phải sử dụng phiên bản 1.2 của thư viện androidx.compose và Kotlin 1.7.0.

Nền tảng

Compose cho Wear OS giúp tạo ứng dụng trên Wear OS dễ dàng hơn. Để biết thêm thông tin, hãy xem bài viết Ứng dụng. Các thành phần tích hợp sẵn của chúng tôi giúp bạn tạo trải nghiệm người dùng tuân thủ các nguyên tắc của Wear OS. Để biết thêm thông tin về các thành phần, vui lòng xem hướng dẫn thiết kế của chúng tôi.

Thiết lập

Jetpack Compose với Wear OS có cách sử dụng tương tự như Jetpack Compose cho mọi dự án Android khác. Điểm khác biệt chính là Jetpack Compose cho Wear OS sẽ có thêm các thư viện dành riêng cho Wear, giúp cho việc tạo giao diện người dùng dành riêng cho đồng hồ dễ dàng hơn. 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 có chức năng tương đương nhưng không dành cho Wear, chẳng hạn như androidx.wear.compose.material.Button và androidx.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 thực hiện các bước sau:

1. Nếu bạn đang ở cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Start a new Android Studio project (Bắt đầu dự án Android Studio mới). Nếu bạn đã mở sẵn một dự án Android Studio, hãy chọn File > New > Import Sample (Tệp > Mới > Nhập mẫu) trong thanh trình đơn.
2. Tìm Compose for Wear (Compose cho Wear) rồi chọn Compose for Wear OS Starter (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 bộ công cụ 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ư đoạn mã sau minh hoạ:

dependencies {
    // General compose dependencies
    implementation("androidx.activity:activity-compose:1.8.2")
    implementation("androidx.compose.ui:ui-tooling-preview:1.6.5")
    // 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...
}