Library toolkit UI Leanback

Membangun aplikasi dengan lebih baik menggunakan Compose
Membuat UI yang menarik dengan kode minimal menggunakan Jetpack Compose untuk Android TV OS.

Toolkit UI Leanback menyediakan beberapa library khusus TV yang eksklusif untuk aplikasi yang dikembangkan untuk OS Android TV. Library ini mencakup:

  • Library Leanback: menyediakan template UI yang menyederhanakan pembuatan aplikasi Android TV.
  • Library Preferensi Leanback: menyediakan layar setelan dan preferensi yang konsisten dengan platform, tetapi dapat diberi tema agar sesuai dengan aplikasi Anda.
  • Library Leanback Paging: mendukung model paging AndroidX untuk ObjectAdapters, yang biasanya digunakan dengan template Leanback.
  • Library Leanback Tabs: mendukung navigasi tab di Android TV.

Library paging Leanback

Paging di dalam toolkit UI Leanback berfungsi sama seperti library Paging 3 AndroidX, yang menyederhanakan penambahan paging ke RecyclerView.Adapter. Dengan library Paging Leanback, adaptor yang ditampilkan biasanya adalah ObjectAdapter, sehingga library menambahkan dukungan paging ke ObjectAdapter.

Untuk menambahkan adaptor paging ke aplikasi Anda, pertama-tama tambahkan dependensi library ke project Anda:

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

Kemudian, ikuti dokumentasi Paging 3 menggunakan androidx.leanback.paging.PagingDataAdapter, bukan androidx.paging.PagingDataAdapter. Satu-satunya perbedaan adalah Anda kini dapat meneruskan Presenter atau PresenterSelector. Cara ini berfungsi di mana pun Anda biasanya menggunakan ObjectAdapter, seperti dalam 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);

Library Leanback Tabs

Template toolkit UI Leanback menyediakan navigasi samping di layar jelajah. Untuk menambahkan baris tab secara horizontal di bagian atas aplikasi, Anda dapat menggunakan Leanback Tabs.

Tambahkan dependensi library ke project Anda:

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

Kemudian, implementasikan tab menggunakan LeanbackTabLayout dan LeanbackViewPager dengan mengikuti panduan ViewPager yang ada. Perhatikan bahwa LeanbackViewPager didasarkan pada ViewPager, bukan ViewPager2.

Berikut ini contohnya:

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

Batasan

Library Leanback Tabs memiliki batasan dalam tema yang didukungnya dan cara penanganan gerakan fokus.

Tema yang didukung

Hanya tema yang berasal dari Theme.AppCompat yang didukung. TabLayout berisi batasan penerapan tema, yang mencegah tema non-turunan Theme.AppCompat digunakan. Anda juga dapat menggunakan tema bridge untuk toolkit UI Leanback.

Fokuskan gerakan dari tab ke atas

Jika tinggi tata letak lebih besar dari tinggi layar dan Anda menekan tombol D-pad atas, kontrol akan kembali ke tab, bukan tetap berada di dalam fragmen dan mengarah ke item di atasnya (lihat gambar 1). Untuk menangani masalah ini, konten di dalam fragmen harus mengganti penelusuran fokus; misalnya, gunakan RowsSupportFragment. BrowseSupportFragment tidak dapat digunakan di dalam tab karena memiliki metode penelusuran fokus yang diganti, yang mencegah fokus agar tidak kembali ke tab.

Gambar 1. Tombol atas D-pad memindahkan fokus ke tab, bukan item sebelumnya.