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 cho TV mang đến tất cả lợi ích của Jetpack Compose của Android cho các ứng dụng TV, giúp bạn dễ dàng xây dựng giao diện người dùng đẹp mắt và có chức năng cho ứng dụng của mình.

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 hoạt động ngay từ đầu nhưng cũng có thể được tuỳ chỉnh và tạo kiểu để phù hợp với nhu cầu của ứng dụng.
  • Đơn giản hoá và tăng tốc phát triển: Compose tương thích với mã hiện có và cho phép nhà phát triển xây dựng ứ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 thay đổ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. Hãy xem bài viết Lý do sử dụng Compose để biết thêm thông tin về các lợi thế chung của khung giao diện người dùng mang tính 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 của AI

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 cần có phiên bản 1.3.0 của thư viện androidx.compose và Kotlin 1.7.10.

Thiết lập

Việc sử dụng Jetpack Compose trên Android TV cũng tương tự như việc 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, 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 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 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.12.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.12.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 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 di động của Compose Material, nhưng phiên bản này không được tối ưu hoá cho kiểu tương tác độc đáo 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 không mong muố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 các đường liên kết đến 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 Material Design bằng cách sử dụng Compose cho TV.

  • Mẫu JetStream
    Một ứng dụng phát trực tuyến nội dung nghe nhì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 dành cho TV
    Lớp học lập trình này hướng dẫn bạn xây dựng một ứng dụng trình phát video có 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á 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: