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 Android TV. Compose dành cho TV giúp bạn tận dụng toàn bộ lợi ích của Jetpack Compose của Android cho các ứng dụng truyền hình, giúp bạn dễ dàng xây dựng giao diện người dùng đẹp có đầy đủ chức năng cho ứng dụng.

Sau đây là một số lợi ích cụ thể của việc sử dụng Compose cho TV:

  • 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.
  • Đơn giản hoá và đẩy nhanh quá trình phát triển: 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 đố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 cho tính năng Compose trên 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ề 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 kho lưu trữ mẫu Compose cho TV trên GitHub.

Tìm hiểu cách thêm tính năng hỗ trợ cho Android TV

Lời nhắc này yêu cầu hướng dẫn về cách thêm tính năng hỗ trợ Android TV vào ứng dụng bằng Jetpack Compose cho TV thay vì Leanback.

How do I add support for Android TV to my application?

Use Jetpack Compose for TV as part of the response instead of Leanback.

Sử dụng lời nhắc do AI tạo

Lời nhắc AI được dùng trong Gemini trong Android Studio (bắt buộc phải dùng phiên bản Canary mới nhất)

Tìm hiểu thêm về Gemini trong Studio tại đây: https://developer.android.com/studio/preview/gemini

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 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

Cách sử dụng Jetpack Compose trên Android TV tương tự như cách sử dụng Jetpack Compose cho mọi dự án Android khác. Điểm khác biệt chính là Compose cho TV sẽ có 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 cho việc tạo giao diện người dùng dành riêng cho TV 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 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 cho TV, hãy đư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:

Kotlin

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

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

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

Groovy

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

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

   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'
}

Điểm khác biệt

Các thành phần Material Design cho TV được thiết kế cho phòng khách, với các chỉ báo tiêu điểm rõ rànghành vi nhập phù hợp với điều khiển từ xa. Để biết thông tin chi tiết về cách 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 trên TV.

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

Sử dụng phiên bản TV của API bất cứ khi nào có thể để tận dụng 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, nhưng phiên bản này không được tối ưu hoá để phục vụ các 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 từ 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

Tài nguyên khác

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

  • Mẫu Danh mục Material cho TV
    Ứ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 cách sử dụng Compose cho TV.

  • Mẫu JetStream
    Một ứng dụng truyền phát nội dung đa phương tiện minh hoạ cách sử dụng TV Compose 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 cho TV
    Lớp học lập trình này hướng dẫn bạn từng bước xây dựng một ứng dụng phát video có màn hình duyệt danh mục và màn hình chi tiết.

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

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