ไลบรารีชุดเครื่องมือ Leanback UI

สร้างได้ดียิ่งขึ้นด้วย Compose
สร้าง UI ที่สวยงามด้วยโค้ดแบบเรียบง่ายโดยใช้ Jetpack Compose สำหรับระบบปฏิบัติการ Android TV

ชุดเครื่องมือ Leanback UI มีไลบรารีสำหรับทีวีโดยเฉพาะ แอปที่พัฒนาขึ้นสำหรับระบบปฏิบัติการ Android TV ไลบรารีเหล่านี้รวมถึงรายการต่อไปนี้

  • ไลบรารี Leanback: มีเทมเพลต UI ที่ ทำให้การสร้างแอป Android TV ง่ายขึ้น
  • ค่ากำหนดของ Leanback ไลบรารี: แสดงค่ากำหนดและการตั้งค่าที่สอดคล้องกับ แพลตฟอร์ม แต่ก็สามารถใช้ธีมเพื่อให้เหมาะกับแอปของคุณได้
  • ไลบรารี Leanback Paging: สนับสนุน โมเดลการแบ่งหน้าของ AndroidX สำหรับ ObjectAdapters ซึ่งมักใช้กับ เทมเพลต Leanback
  • ไลบรารีแท็บ Leanback: รองรับแท็บ การนำทางบน Android TV

ไลบรารีการแบ่งหน้า Leanback

การแบ่งหน้าภายในชุดเครื่องมือ Leanback UI จะทำงานเหมือนกับ AndroidX ไลบรารีหน้า 3 ซึ่ง ช่วยให้เพิ่มการแบ่งหน้าใน RecyclerView.Adapter ด้วยไลบรารี Leanback Paging อะแดปเตอร์ที่แสดงมักเป็น ObjectAdapter แทน ดังนั้นไลบรารีจึงเพิ่มการสนับสนุนการแบ่งหน้าใน ObjectAdapter

หากต้องการเพิ่มอะแดปเตอร์การแบ่งหน้าลงในแอป ให้เพิ่มทรัพยากร Dependency ของไลบรารีลงในโปรเจ็กต์ก่อนโดยทำดังนี้

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

จากนั้นทำตาม เอกสารหน้า 3 โดยใช้ androidx.leanback.paging.PagingDataAdapter แทนที่จะเป็น androidx.paging.PagingDataAdapter ความแตกต่างเพียงอย่างเดียวคือ ที่จะผ่านใน Presenter หรือ PresenterSelector ตัวเลือกนี้ใช้ได้ทุกที่ที่โดยปกติแล้วคุณจะใช้ ObjectAdapter เช่น 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);

ไลบรารีแท็บ Leanback

เทมเพลตชุดเครื่องมือ Leanback UI มีการนำทางด้านข้างใน หน้าจอเรียกดู วิธีเพิ่มแถวแท็บในแนวนอน ที่ด้านบนของแอปพลิเคชัน คุณสามารถใช้แท็บ Leanback แทนได้

เพิ่มทรัพยากร Dependency ของไลบรารีไปยังโปรเจ็กต์ของคุณ

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

จากนั้นติดตั้งใช้งานแท็บโดยใช้ LeanbackTabLayout และ LeanbackViewPager ภายใน ต่อจาก คู่มือ ViewPager โปรดทราบว่า LeanbackViewPager อิงตาม ViewPager ไม่ใช่ ViewPager2

โดยมีตัวอย่างดังต่อไปนี้

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

ข้อจำกัด

ไลบรารี Leanback Tabs มีข้อจำกัดในธีมที่สนับสนุนและโฟกัส ระบบจะจัดการกับการเคลื่อนไหว

ธีมที่รองรับ

สนับสนุนเฉพาะธีมที่มาจาก Theme.AppCompat TabLayout มีข้อจำกัดการบังคับใช้ธีม ซึ่งป้องกันธีมใดๆ ที่ไม่สืบทอดมา ของ Theme.AppCompat ถูกใช้งาน คุณยังสามารถใช้ธีมบริดจ์สำหรับ ชุดเครื่องมือ Leanback UI

โฟกัสการเคลื่อนไหวจากแท็บไปด้านบน

เมื่อความสูงของเลย์เอาต์มากกว่าความสูงของหน้าจอและคุณกด D-pad ปุ่มขึ้น ตัวควบคุมจะย้ายกลับไปที่แท็บแทนที่จะอยู่แค่ในส่วนย่อย และไปที่รายการด้านบน (ดูรูปที่ 1) ในการจัดการปัญหานี้ เนื้อหา ภายในส่วนย่อยจะต้องลบล้างการค้นหาโฟกัส ตัวอย่างเช่น ให้ใช้ RowsSupportFragment BrowseSupportFragment ใช้ภายในแท็บไม่ได้เนื่องจากมีวิธีการค้นหาโฟกัสที่ถูกลบล้างซึ่ง จะป้องกันไม่ให้โฟกัสย้ายกลับไปที่แท็บนั้น

รูปที่ 1 ปุ่ม D-pad จะย้ายโฟกัสไปยังแท็บแทนที่จะเป็นรายการก่อนหน้า