مكتبات أدوات واجهة المستخدم في Leanback

الإنشاء بشكل أفضل باستخدام Compose

يمكنك إنشاء واجهات مستخدم رائعة باستخدام أقل عدد ممكن من الرموز باستخدام Jetpack Compose لنظام التشغيل Android TV.

إنشاء الرسائل على التلفزيون →

توفر مجموعة أدوات واجهة مستخدم Leanback بعض المكتبات الخاصة بالتلفزيون حصريًا للتطبيقات التي تم تطويرها لنظام تشغيل Android TV. وتشمل هذه المكتبات ما يلي:

• مكتبة Leanback: توفر نماذج لواجهة المستخدم التي تبسِّط إنشاء تطبيقات Android TV.
• مكتبة تفضيلات Leanback: توفر الإعدادات المفضّلة وشاشات الإعدادات المتوافقة مع النظام الأساسي ولكن يمكن أن تكون متناسقة مع تطبيقك.
• مكتبة Leanback Paging: تتيح استخدام نموذج الترحيل في AndroidX لـ ObjectAdapters، والتي يشيع استخدامها مع نماذج Leanback.
• مكتبة علامات تبويب Leanback: تتيح التنقّل باستخدام علامات تبويب على Android TV.

مكتبة الصفحات في Leanback

تعمل الصفحات داخل مجموعة أدوات واجهة مستخدم Leanback بالطريقة نفسها التي تعمل بها مكتبة Paging 3 في AndroidX، حيث تعمل على تبسيط إضافة صفحات إلى RecyclerView.Adapter. في مكتبة Leanback Paging، يكون المحوِّل الظاهر عادةً ObjectAdapter بدلاً من ذلك، وبالتالي تضيف المكتبة إتاحة التنقل بين الصفحات في ObjectAdapter.

لإضافة محوّل صفحات إلى تطبيقك، أضِف أولاً تبعية المكتبة إلى مشروعك:

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 التنقل الجانبي في شاشة التصفح. لإضافة صف من علامات التبويب أفقيًا عبر الجزء العلوي من التطبيق، يمكنك بدلاً من ذلك استخدام علامات تبويب Leanback بدلاً من ذلك.

أضف تبعية المكتبة إلى مشروعك:

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 على قيود في النُسُق التي تدعمها وكيفية التعامل مع حركة التركيز.

المظاهر المتوافقة

المظاهر المشتقة من Theme.AppCompat هي فقط المتوافقة. TabLayout تتضمّن قيدًا على تنفيذ المظهر، ما يمنع استخدام أي مظهر غير تابع لـ Theme.AppCompat. يمكنك أيضًا استخدام مظهر الجسر لمجموعة أدوات واجهة المستخدم من Leanback.

التركيز على الانتقال من علامات التبويب إلى الأعلى

عندما يكون ارتفاع التخطيط أكبر من ارتفاع الشاشة وتضغط على زر لوحة التحكّم، يتم نقل عنصر التحكّم مرة أخرى إلى علامة التبويب بدلاً من البقاء داخل الجزء والانتقال إلى عنصر فوقه (انظر الشكل 1). لمعالجة هذه المشكلة، يجب أن يلغي المحتوى داخل الجزء البحث عن التركيز. على سبيل المثال، استخدِم RowsSupportFragment. لا يمكن استخدام BrowseSupportFragment في علامة تبويب لأنّها تحتوي على طريقة بحث عن التركيز تم تجاوزها تمنع نقل التركيز إلى علامة التبويب مرة أخرى.

الشكل 1. يؤدي النقر على زر السهم المتّجه للأعلى إلى نقل التركيز إلى علامة التبويب بدلاً من العنصر السابق.