Dùng Jetpack Compose trên Android TV

Compose cho TV là phương pháp chúng tôi đề xuất để xây dựng giao diện người dùng Android TV. Điều này giúp khai thác toàn bộ lợi ích của Jetpack Compose của Android cho ứng dụng TV, giúp việc xây dựng giao diện người dùng đẹp mắt và đầy đủ chức năng cho ứng dụng của bạn dễ dàng hơn nhiều. Sau đây là một số lợi ích cụ thể khi sử dụng Compose cho TV:

• Tính linh hoạt: Bạn có thể dùng Compose để tạo mọi loại giao diện người dùng, từ bố cục đơn giản cho đến ảnh động phức tạp. Các thành phần vẫn hoạt động tốt nhưng cũng có thể được tuỳ chỉnh và định kiểu cho phù hợp với nhu cầu của ứng dụng.
• Phát triển nhanh và đơn giản hoá: Compose tương thích với mã hiện có và cho phép nhà phát triển tạo ứng dụng hiệu quả hơn với ít mã hơn.
• Trực quan: Compose sử dụng cú pháp khai báo cho phép bạn thực hiện các thay đổi trên giao diện người dùng, gỡ lỗi, hiểu và xem lại mã của mình.

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 cho TV. Hãy xem phần 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, hãy xem thêm kho lưu trữ mẫu Compose cho TV trên GitHub.

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

Compose cho TV hoạt động trên Android TV có API cấp 21 trở lên. Để sử dụng phiên bản 1.0 của Compose cho TV, bạn phải sử dụng phiên bản 1.3.0 của thư viện androidx.compose và Kotlin 1.7.10.

Thiết lập

Jetpack Compose trên Android TV 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à Compose dành cho TV sẽ thêm các thư viện cung cấp các thành phần được tối ưu hoá cho TV và giúp bạn dễ dàng tạo giao diện người dùng dành riêng cho TV. 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 TV, chẳng hạn như androidx.tv.material3.Button và androidx.compose.material3.Button.

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

Để sử dụng Compose cho TV, 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ư sau:

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.04.01")
   implementation(composeBom)

   // General compose dependencies
   implementation("androidx.activity:activity-compose:1.8.2")

   implementation("androidx.compose.ui:ui-tooling-preview")
   debugImplementation("androidx.compose.ui:ui-tooling")

   // Compose for TV dependencies
   val tvCompose = "1.0.0-alpha10"
   implementation("androidx.tv:tv-foundation:$tvCompose")
   implementation("androidx.tv:tv-material:$tvCompose")
}

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.04.01')
   implementation composeBom

   // General compose dependencies
   implementation 'androidx.activity:activity-compose:1.8.2'

   implementation 'androidx.compose.ui:ui-tooling-preview'
   debugImplementation 'androidx.compose.ui:ui-tooling'

   // Compose for TV dependencies
   def tvCompose = '1.0.0-alpha10'
   implementation 'androidx.tv:tv-foundation:$tvCompose'
   implementation 'androidx.tv:tv-material:$tvCompose'
}

Điểm khác biệt

Sử dụng phiên bản TV của API bất cứ khi nào 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á cho kiểu tương tác riêng trên Android TV. Ngoài ra, việc kết hợp Compose Material với Compose Material trong Compose dành cho TV có thể dẫn đến hành vi ngoài dự kiến. Ví dụ: vì mỗi thư viện có đối tượng 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 TV và Thiết bị di động:

Tài liệu đọc thêm

Hãy khám phá những hướng dẫn này để tìm hiểu cách tạo ra những trải nghiệm tuyệt vời được tối ưu hoá cho TV:

• Màn hình duyệt xem danh mục
• Màn hình Chi tiết