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 mà không cần nhiều mã nguồn bằng Jetpack Compose cho hệ điều hành Android TV.

Bộ công cụ Leanback UI cung cấp một số thư viện dành riêng cho TV dành riêng cho các ứng dụng đượ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 giúp đơn giản hoá quá trình tạo ứng dụng Android TV.
  • Thư viện Lựa chọn ưu tiên Leanback: cung cấp các màn hình lựa chọn ưu tiên và cài đặt nhất quán với nền tảng nhưng có thể được tuỳ chỉnh giao diện để phù hợp với ứng dụng.
  • Thư viện Leanback Paging: hỗ trợ mô hình phân trang AndroidX cho ObjectAdapters, thường được dùng với các mẫu Leanback.
  • Thư viện Leanback Tab (Thẻ Leanback): hỗ trợ tính năng điều hướng theo thẻ 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ư thư viện AndroidX Paging 3, giúp đơn giản hoá việc thêm phân trang vào RecyclerView.Adapter. Với thư viện Leanback Paging, bộ chuyển đổi được hiển thị thường là ObjectAdapter, vì vậy, 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 đó, hãy làm theo tài liệu về Paging 3 bằng cách sử dụng androidx.leanback.paging.PagingDataAdapter thay vì androidx.paging.PagingDataAdapter. Sự khác biệt duy nhất là giờ đây bạn có thể truyền Presenter hoặc PresenterSelector. Tính năng này hoạt động ở bất kỳ nơi nào bạn thường dùng ObjectAdapter, chẳng hạn như trong 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 Thẻ Leanback

Các mẫu bộ công cụ giao diện người dùng Leanback cung cấp tính năng điều hướng bên trong màn hình duyệt qua. Để 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 LeanbackTabLayoutLeanbackViewPager bằng cách làm theo hướng dẫn hiện có trên ViewPager. Xin lưu ý rằng LeanbackViewPager dựa trên ViewPager chứ 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ó các hạn chế về chủ đề mà thư viện này hỗ trợ và cách xử lý chuyển động lấy tiêu điểm.

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 việc sử dụng mọi giao diện không liên quan đến Theme.AppCompat. Bạn cũng có thể sử dụng giao diện cầu nối cho bộ công cụ Giao diện người dùng Leanback.

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