Dùng Jetpack Compose trên Android TV

Compose cho TV là phương pháp hiện đại để xây dựng giao diện người dùng của Android TV. Compose cho TV khai thác tất cả lợi ích của Jetpack Compose của Android đối với các ứng dụng truyền hình, giúp việc xây dựng giao diện người dùng đẹp mắt và dễ sử dụng cho ứng dụng của bạn.

Sau đây là một số lợi ích cụ thể khi sử dụng Compose dành 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 mà không cần lập trình.
  • Trực quan: Compose sử dụng cú pháp khai báo cho phép bạn thực hiện thay đổi đối với giao diện người dùng, gỡ lỗi, hiểu và xem lại mã.

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. Xem bài viết Tại sao nên dùng Compose để biết thêm thông tin về các ư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 phần 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 chạy Android 5.0 (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 có 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 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 phù hợp với 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.Buttonandroidx.compose.material3.Button.

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

Để sử dụng Compose dành cho TV, hãy thêm 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:

Kotlin

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

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

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

   // Compose for TV dependencies.
   implementation("androidx.tv:tv-foundation:1.0.0-alpha10")
   implementation("androidx.tv:tv-material:1.0.0-beta01")
}

Groovy

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

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

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

   // Compose for TV dependencies.
   implementation 'androidx.tv:tv-foundation:1.0.0-alpha10'
   implementation 'androidx.tv:tv-material:1.0.0-beta01'
}

Điểm khác biệt

Sử dụng phiên bản TV 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 biệt trên Android TV. Ngoài ra, việc kết hợp Compose Material với Compose Material trong Compose 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:

Phần phụ thuộc TV
(androidx.tv.*)
So sánh Phần phụ thuộc trên thiết bị di động
(androidx.compose.*)
androidx.tv:tv-material thay cho androidx.compose.material3:material3
androidx.tv:tv-foundation bổ sung cho androidx.compose.foundation:foundation

Tài nguyên khác

  • Mẫu Danh mục TV Material
    Một ứng dụng danh mục minh hoạ cách triển khai các nguyên tắc của Material Design bằng Compose dành cho TV.

  • Mẫu JetStream
    Một ứng dụng truyền trực tuyến nội dung nghe nhìn minh hoạ cách sử dụng Compose trên TV với một ứng dụng Material thông thường và cấu trúc thực tế.

  • Giới thiệu về Compose dành cho TV
    Lớp học lập trình này hướng dẫn các bước để xây dựng một ứng dụng trình phát video với màn hình trình duyệt danh mục và màn hình chi tiết.

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

Hãy khám phá những hướng dẫn sau để tìm hiểu cách xây dựng trải nghiệm chất lượng cao được tối ưu hoá cho truyền hình: