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

สร้างแอปที่ดีขึ้นด้วย Compose

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

แต่งเพลงสำหรับทีวี →

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

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

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

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

หากต้องการเพิ่ม Paging Adapter ลงในแอป ให้เพิ่มการอ้างอิงไลบรารีลงในโปรเจ็กต์ก่อน

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

จากนั้นทำตามเอกสารประกอบของ Paging 3 โดยใช้ androidx.leanback.paging.PagingDataAdapter แทน androidx.paging.PagingDataAdapter ความแตกต่างเพียงอย่างเดียวคือตอนนี้คุณสามารถ ส่ง Presenter หรือ PresenterSelector ได้แล้ว ซึ่งจะใช้งานได้ทุกที่ที่ปกติแล้วคุณจะใช้ ObjectAdapter เช่น ใน ListRow

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)

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

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

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

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

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

ตัวอย่างเช่น

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

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

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

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

ข้อจำกัด

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

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

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

การย้ายโฟกัสจากแท็บไปด้านบน

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