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.

Material Design trong Jetpack Compose trên Wear OS

Jetpack Compose trên Wear OS hỗ trợ triển khai Material 2.5, giúp bạn thiết kế trải nghiệm ứng dụng hấp dẫn hơn. Các thành phần Material Design trên Wear OS được xây dựng dựa trên tính năng Tuỳ chỉnh giao diện Material cho Wear. Việc tuỳ chỉnh giao diện này là một cách có hệ thống để tuỳ chỉnh Material Design và phản ánh tốt hơn thương hiệu của sản phẩm.

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.4 của Compose cho Wear OS, bạn phải sử dụng phiên bản 1.7 của thư viện androidx.compose và Kotlin 1.9.0. Bạn có thể sử dụng tính năng ánh xạ BOM và bản đồ tương thích Compose sang Kotlin để kiểm tra khả năng tương thích của Compose.

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ổ Configure your project (Định cấu hình dự á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. Hầu hết các thay đổi về phần phụ thuộc liên quan đến Wear OS đều nằm trong các lớp kiến trúc trên cùng, được bao quanh bởi một hộp màu đỏ trong hình sau.

<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="" />

Tức là nhiều phần phụ thuộc mà bạn từng sử dụng trong Jetpack Compose sẽ không thay đổi khi nhắm đến Wear OS. Ví dụ: các phần phụ thuộc giao diện người dùng, thời gian chạy, trình biên dịch và ảnh động vẫn giữ nguyên.

Tuy nhiên, Wear OS có các phiên bản thư viện material, foundation và navigation riêng, vì vậy, hãy kiểm tra để đảm bảo bạn đang sử dụng các thư viện phù hợp.

Sử dụng phiên bản API WearComposeMaterial nếu có thể. Mặc dù về mặt kỹ thuật, bạn có thể sử dụng phiên bản Compose Material cho thiết bị di động, nhưng phiên bản này không được tối ưu hoá để phục vụ các yêu cầu riêng biệt 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ụ: vì 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 có thể 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:

Đoạn mã sau đây cho thấy một tệp build.gradle mẫu bao gồm các phần phụ thuộc sau:

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