Thư viện bộ công cụ giao diện người dùng Leanback

Tạo dựng ứng dụng hiệu quả hơn với Compose
Tạo giao diện người dùng đẹp mắt với lượng mã tối thiểu bằng Jetpack Compose cho hệ điều hành Android TV.
Compose cho TV →

Bộ công cụ Leanback UI cung cấp một số thư viện dành riêng cho TV được phát triển cho hệ điều hành Android TV. Các thư viện này bao gồm:

  • Thư viện Leanback: cung cấp các mẫu giao diện người dùng đơn giản hoá quá trình tạo các ứng dụng trên Android TV.
  • Lựa chọn ưu tiên về Leanback thư viện: cung cấp các màn hình lựa chọn ưu tiên và cài đặt phù hợp với nền tảng nhưng có thể được tuỳ chỉnh giao diện cho phù hợp với ứng dụng của bạn.
  • Thư viện Leanback Paging: hỗ trợ Mô hình phân trang AndroidX cho ObjectAdapters, thường được dùng với Mẫu Leanback.
  • Thư viện Leanback Tab (Thẻ Leanback): hỗ trợ thẻ điều hướng trên Android TV.

Thư viện phân trang Leanback

Tính năng phân trang bên trong bộ công cụ Leanback UI hoạt động giống như AndroidX Thư viện Paging 3, đơn giản hoá việc thêm phân trang vào RecyclerView.Adapter. Với thư viện Leanback Paging, bộ điều hợp được hiển thị thường là ObjectAdapter thay vào đó, thư viện sẽ thêm tính năng hỗ trợ phân trang vào ObjectAdapter.

Để thêm bộ chuyển đổi phân trang vào ứng dụng, trước tiên hãy thêm phần phụ thuộc thư viện vào dự án:

implementation "androidx.leanback:leanback-paging:$version"

Sau đó, làm theo Tài liệu về Paging 3 có sử dụng androidx.leanback.paging.PagingDataAdapter thay vì androidx.paging.PagingDataAdapter. Sự khác biệt duy nhất là bạn hiện có thể để truyền vào Presenter hoặc PresenterSelector. Tính năng này hoạt động ở bất kỳ nơi nào bạn thường sử dụng ObjectAdapter, chẳng hạn như trong một ListRow:

Kotlin

val adapter: PagingDataAdapter<MyItem> = PagingDataAdapter(myPresenter,
   object : DiffUtil.ItemCallback<MyItem>() {
       override fun areItemsTheSame(
           oldItem: MyItem,
           newItem: MyItem
       ): Boolean {
           return oldItem.id === newItem.id
       }

       override fun areContentsTheSame(
           oldItem: MyItem,
           newItem: MyItem
       ): Boolean {
           return oldItem == newItem
       }
   })

val header = HeaderItem(headerTitle)
val row = ListRow(header, adapter)

Java

PagingDataAdapter<MyItem> adapter = new PagingDataAdapter(myPresenter, new DiffUtil.ItemCallback<MyItem>() {
    @Override
    public boolean areItemsTheSame(@NonNull MyItem oldItem, @NonNull MyItem newItem) {
        return oldItem.getId().equals(newItem.getId());
    }

    @Override
    public boolean areContentsTheSame(@NonNull MyItem oldItem, @NonNull MyItem newItem) {
        return oldItem.equals(newItem);
    }
});

HeaderItem header = new HeaderItem(headerTitle);
Row row = new ListRow(header, adapter);

Thư viện Leanback Tab

Mẫu bộ công cụ Leanback UI cung cấp điều hướng bên trong màn hình duyệt web. Cách thêm một hàng thẻ theo chiều ngang ở đầu ứng dụng, bạn có thể sử dụng Thẻ Leanback.

Thêm phần phụ thuộc thư viện vào dự án của bạn:

implementation "androidx.leanback:leanback-tab:$version"

Sau đó, hãy triển khai các thẻ bằng cách sử dụng LeanbackTabLayout và LeanbackViewPager theo các quy tắc này Hướng dẫn ViewPager. Lưu ý rằng LeanbackViewPager dựa trên ViewPager, không phải ViewPager2.

Sau đây là ví dụ:

Kotlin

val leanbackTabLayout = findViewById<LeanbackTabLayout>(R.id.tab_layout)
val leanbackViewPager = findViewById<LeanbackViewPager>(R.id.view_pager)

leanbackViewPager.setAdapter(adapter)
leanbackTabLayout.setupWithViewPager(leanbackViewPager)

Java

LeanbackTabLayout leanbackTabLayout = findViewById(R.id.tab_layout);
LeanbackViewPager leanbackViewPager = findViewById(R.id.view_pager);

leanbackViewPager.setAdapter(adapter);
leanbackTabLayout.setupWithViewPager(leanbackViewPager);

Các điểm hạn chế

Thư viện Leanback Tab có hạn chế về các chủ đề mà thư viện này hỗ trợ và cách thức lấy tiêu điểm chuyển động được xử lý.

Giao diện được hỗ trợ

Chỉ hỗ trợ các giao diện bắt nguồn từ Theme.AppCompat. TabLayout chứa quy tắc ràng buộc thực thi giao diện, ngăn chặn mọi giao diện không phải là giao diện con đang sử dụng Theme.AppCompat. Bạn cũng có thể sử dụng giao diện cầu nối cho Bộ công cụ Leanback UI.

Tập trung vào chuyển động từ thẻ lên trên cùng

Khi chiều cao bố cục lớn hơn chiều cao màn hình và bạn nhấn phím D-pad nút mũi tên lên, phím điều khiển sẽ quay lại thẻ thay vì nằm bên trong mảnh và di chuyển đến một mục ở phía trên mục đó (xem hình 1). Để xử lý vấn đề này, nội dung bên trong mảnh phải ghi đè tính năng tìm kiếm tiêu điểm; ví dụ: sử dụng RowsSupportFragment. BrowseSupportFragment không thể sử dụng bên trong một thẻ vì thẻ này có phương thức tìm kiếm tiêu điểm bị ghi đè ngăn tiêu điểm di chuyển trở lại thẻ.

Hình 1. Nút nhấn phím D-pad sẽ di chuyển tiêu điểm đến thẻ thay vì mục trước đó.