Dùng Jetpack Compose trên Android TV

Compose cho TV là phương pháp hiện đại để xây dựng Android TV giao diện người dùng. Compose dành cho TV mở khoá tất cả lợi ích của Jetpack Compose cho Android ứng dụng truyền hình, giúp bạn xây dựng giao diện người dùng đẹp mắt và có đầy đủ chức năng cho ứng dụng của mình dễ dàng hơ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ừ một giao diện đơn giản bố cục thành các hoạt ảnh 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.
  • Đơn giản hoá và Phát triển nhanh: 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 bằng í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 thay đổi giao diện người dùng, gỡ lỗi, hiểu và xem lại mã của bạn.

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 các nguyên tắc phát triển cho Compose cho thiết bị di động cũng áp dụng cho TV. Xem Lý do Compose để tìm hiểu 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 khác, hãy xem thêm bài viết về Compose Kho lưu trữ mẫu 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, yêu cầu 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 bất kỳ dự án Android khác. Điểm khác biệt chính là Compose dành cho TV thêm các thư viện cung cấp thành phần được tối ưu hoá cho TV và giúp tạo dễ dàng hơn 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ó chung làm tên phiên bản không phải trên 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 bộ công cụ Jetpack Compose trong 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-material:1.0.0-rc01")
}

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-material:1.0.0-rc01'
}

Điểm khác biệt

Các thành phần chất liệu của TV được thiết kế cho phòng khách, với tiêu điểm rõ ràng chỉ báohành vi nhập phù hợp với từ xa. Để biết chi tiết về cách thực hiện để sử dụng các thành phần cụ thể này, hãy xem hướng dẫn thiết kế giao diện người dùng TV.

Hình 1. Các thành phần mẫu từ thư viện Material cho TV.

Sử dụng phiên bản truyền hình của API bất cứ khi nào có thể để hưởng lợi từ các tính năng này.

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, ứng dụng này không được tối ưu hoá cho kiểu tương tác riêng biệt trên Android TV. Ngang bằng ngoài ra, kết hợp Compose Material với Compose Material từ Compose dành cho TV có thể dẫn đến hành vi không mong muốn. Ví dụ: vì mỗi thư viện đều có đối tượng MaterialTheme riêng nên có khả năng màu sắc, kiểu chữ hoặc hình dạng 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 trên 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

Tài nguyên khác

  • Hướng dẫn thiết kế TV
    Tổng quan về các thành phần chuyên biệt dành cho TV để xây dựng giao diện người dùng bằng đường liên kết đến tài nguyên có liên quan dành cho nhà phát triển.

  • Mẫu danh mục nội dung truyền hình
    Một ứng dụng danh mục minh hoạ cách triển khai Nguyên tắc của Material Design sử dụng Compose cho TV.

  • Mẫu JetStream
    Ứng dụng truyền trực tuyến đa phương tiện minh hoạ cách sử dụng TV Compose với ứng dụng Material thông thường và kiến 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 bằng 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: