التخطيطات في مجموعة أدوات واجهة مستخدم Leanback

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

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

Compose for TV →

عادةً ما تتم مشاهدة شاشة التلفزيون من مسافة 10 أقدام تقريبًا، وعلى الرغم من أنّها أكبر بكثير من معظم شاشات الأجهزة الأخرى التي تعمل بنظام التشغيل Android، لا توفّر شاشة التلفزيون المستوى نفسه من التفاصيل والألوان الذي توفّره شاشة جهاز أصغر. تتطلّب هذه العوامل منك إنشاء تنسيقات تطبيقات مع أجهزة التلفزيون في الاعتبار لإنشاء تجربة مستخدم مفيدة وممتعة.

استخدام مظاهر التنسيق للتلفزيون

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

مظهر Leanback

تتضمّن مكتبة androidx.leanback التي تم إيقافها Theme.Leanback، وهو مظهر لأنشطة التلفزيون يوفّر نمطًا مرئيًا متسقًا لتطبيقات مجموعة أدوات واجهة مستخدم Leanback. استخدم هذا المظهر لأي تطبيق بث تلفزيوني تم إنشاؤه باستخدام فئات AndroidX Leanback. تعرض عيّنة التعليمات البرمجية التالية كيفية تطبيق هذا المظهر على نشاط:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

مظهر NoTitleBar

شريط العنوان هو عنصر واجهة مستخدم عادي لتطبيقات Android على الهواتف والأجهزة اللوحية، ولكنّه غير مناسب لتطبيقات التلفزيون. إذا كنت لا تستخدم فئات AndroidX Leanback، يمكنك تطبيق مظهر NoTitleBar على أنشطة التلفزيون لإيقاف عرض شريط العنوان. يوضّح مثال التعليمات البرمجية التالي من بيان تطبيق تلفزيون كيفية تطبيق هذا المظهر لإزالة عرض شريط العنوان:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

مظاهر AppCompat

في تطبيقات Android للأجهزة الجوّالة، من الشائع جدًا استخدام AppCompatActivity مع أحد مظاهر Theme.AppCompat يتيح لك هذا المزيج استخدام ميزات مثل تلوين العناصر القابلة للرسم بدون القلق بشأن إصدار Android الذي يتم تشغيله على الجهاز. إذا كنت تطوّر تطبيقًا لا يعمل إلا على Android TV، لا تستخدم AppCompatActivity، لأنّ الميزات التي يتيحها متاحة حاليًا على Android TV أو غير ذات صلة.

إذا كنت تنشئ تطبيقًا باستخدام قاعدة تعليمات برمجية مشتركة بين Android للأجهزة الجوّالة وAndroid TV، قد تواجه بعض التحديات بسبب تطبيق المظهر. AppCompatActivity وعناصر واجهة المستخدم المختلفة AppCompat تتطلّب استخدام Theme.AppCompat، بينما تتوقّع أجزاء مجموعة أدوات واجهة مستخدم Leanback استخدام FragmentActivity وTheme.Leanback.

إذا كنت بحاجة إلى استخدام النشاط الأساسي نفسه لنظام Android للأجهزة الجوّالة وAndroid TV، أو إذا كنت تريد استخدام طرق عرض مخصّصة استنادًا إلى AppCompat عناصر واجهة مستخدم مثل AppCompatImageView، استخدِم مظاهر Theme.AppCompat.Leanback. تمنحك هذه المظاهر جميع ميزات تطبيق المظهر من AppCompat وتوفّر أيضًا القيم الخاصة بـ Leanback.

يمكنك تخصيص مظاهر Theme.AppCompat.Leanback بالطريقة نفسها التي تخصّص بها أي مظهر آخر. على سبيل المثال، إذا كنت تريد تغيير القيم الخاصة بـ مجموعة أدوات واجهة مستخدم Leanback OnboardingSupportFragment، يمكنك إجراء عملية مشابهة لما يلي:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

إنشاء تنسيقات أساسية للتلفزيون

يجب أن تتّبع التنسيقات لأجهزة التلفزيون بعض الإرشادات الأساسية للمساعدة في ضمان أن تكون قابلة للاستخدام و فعّالة على الشاشات الكبيرة. اتّبِع هذه النصائح لإنشاء تنسيقات محسّنة لشاشات التلفزيون:

• أنشئ تنسيقات بوضع أفقي. تظهر شاشات التلفزيون دائمًا في الوضع الأفقي.
• ضَع عناصر التحكّم في التنقّل على الشاشة على الجانب الأيمن أو الأيسر من الشاشة واحتفِظ بالمساحة العمودية للمحتوى.
• أنشئ واجهات مستخدم مقسّمة إلى أقسام باستخدام الأجزاء. استخدِم مجموعات العرض، مثل GridView بدلاً من ListView ، للاستفادة بشكل أفضل من مساحة الشاشة الأفقية.
• استخدِم مجموعات العرض، مثل RelativeLayout أو LinearLayout لترتيب طرق العرض. يتيح هذا النهج للنظام ضبط موضع طرق العرض حسب حجم شاشة التلفزيون ومحاذاتها ونسبة العرض إلى الارتفاع وكثافة البكسل.
• أضِف هوامش كافية بين عناصر التحكّم في التنسيق لتجنُّب واجهة مستخدم مزدحمة.

الخروج عن إطار الشاشة

تتضمّن تنسيقات التلفزيون بعض المتطلبات الفريدة بسبب تطوّر معايير التلفزيون لعرض صورة بملء الشاشة للمشاهدين. لهذا السبب، قد تقصّ أجهزة التلفزيون الحافة الخارجية لتنسيق التطبيق لضمان ملء الشاشة بالكامل. يُشار إلى هذا السلوك عمومًا باسم الخروج عن إطار الشاشة.

ضَع عناصر الشاشة التي يجب أن تكون مرئية للمستخدم في جميع الأوقات ضمن المنطقة الآمنة للخروج عن إطار الشاشة. تساعد إضافة هامش بنسبة% 5 من 48 وحدة dp على الحافتَين اليمنى واليسرى و27 وحدة dp على الحافتَين العلوية والسفلية إلى التنسيق في ضمان بقاء عناصر الشاشة في التنسيق ضمن المنطقة الآمنة للخروج عن إطار الشاشة.

لا تضبط عناصر الشاشة الخلفية التي لا يتفاعل معها المستخدم مباشرةً، ولا تقصّ العناصر إلى المنطقة الآمنة للخروج عن إطار الشاشة. يساعد هذا النهج في ضمان ظهور عناصر الشاشة الخلفية بشكلٍ صحيح على جميع الشاشات.

يوضّح المثال التالي تنسيقًا أساسيًا يمكن أن يحتوي على عناصر خلفية وتنسيقًا فرعيًا متداخلاً يتضمّن هامشًا بنسبة% 5 ويمكن أن يحتوي على عناصر ضمن المنطقة الآمنة للخروج عن إطار الشاشة:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

تنبيه: لا تطبِّق هوامش الخروج عن إطار الشاشة على التنسيق إذا كنت تستخدم فئات AndroidX Leanback، مثل BrowseSupportFragment أو عناصر واجهة المستخدم ذات الصلة، لأنّ هذه التنسيقات تتضمّن حاليًا هوامش آمنة للخروج عن إطار الشاشة.

إنشاء نصوص وعناصر تحكّم قابلة للاستخدام

اتّبِع هذه النصائح لجعل النص وعناصر التحكّم في تطبيق بث تلفزيوني أسهل في العرض من مسافة بعيدة:

• قسِّم النص إلى أجزاء صغيرة يمكن للمستخدمين فحصها بسرعة.
• استخدِم نصًا فاتحًا على خلفية داكنة. يسهل قراءة هذا النمط على التلفزيون.
• تجنَّب الخطوط الخفيفة أو الخطوط التي تتضمّن ضربات ضيقة جدًا وضربات عريضة جدًا. استخدِم خطوطًا بسيطة بدون أحرف زائدة ومانع التعرّج لزيادة سهولة القراءة.
• استخدِم أحجام الخطوط العادية في Android:

  <TextView
        android:id="@+id/atext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceMedium"/>

• اجعل جميع عناصر واجهة مستخدم العرض كبيرة بما يكفي لتكون مرئية بوضوح لشخص يجلس على بُعد 10 أقدام من الشاشة. أفضل طريقة لإجراء ذلك هي استخدام تغيير الحجم النسبي للتنسيق بدلاً من تغيير الحجم المطلق، ووحدات البكسل المستقلة الكثافة (dp) بدلاً من وحدات البكسل المطلقة. على سبيل المثال، لضبط عرض عنصر واجهة مستخدم، استخدِم wrap_content بدلاً من قياس البكسل، ولضبط الهامش لعنصر واجهة مستخدم، استخدِم قيم dp بدلاً من قيم px.

لمزيد من المعلومات عن وحدات البكسل المستقلة الكثافة وإنشاء التنسيقات للتعامل مع أحجام الشاشات الأكبر ، يُرجى الاطّلاع على نظرة عامة على توافق الشاشة.

إدارة موارد التنسيق للتلفزيون

مثل جميع أجهزة Android الأخرى، تتضمّن أجهزة التلفزيون أحجام شاشات مختلفة وتتوافق مع درجات دقة مختلفة، بما في ذلك 720p و1080p و4K على سبيل المثال لا الحصر. تأكَّد من أنّ تطبيقك يتوافق مع أحجام الشاشات المختلفة.

تتضمّن أحجام الشاشات ودرجات الدقة المختلفة كثافات بكسل مختلفة. للحفاظ على مظهر واجهة المستخدم على جميع أحجام الشاشات ودرجات الدقة وكثافات البكسل، حدِّد قياسات واجهة المستخدم باستخدام وحدات البكسل المستقلة الكثافة (dp) بدلاً من وحدات البكسل. يتم توضيح كثافة بكسل الشاشة لدرجات دقة لوحة التلفزيون المختلفة أدناه.

لمزيد من المعلومات عن تحسين التنسيقات والموارد للشاشات الكبيرة، يُرجى الاطّلاع على نظرة عامة على توافق الشاشة.

أنماط التنسيق التي يجب تجنُّبها

هناك بعض الطرق لإنشاء التنسيقات التي لا تعمل بشكلٍ جيد على أجهزة التلفزيون. في ما يلي بعض طرق واجهة المستخدم التي يجب تجنُّبها عند تطوير تنسيق للتلفزيون.

• إعادة استخدام تنسيقات الهاتف أو الجهاز اللوحي: لا تعِد استخدام التنسيقات من تطبيق هاتف أو جهاز لوحي بدون تعديل. إنّ التنسيقات التي تم إنشاؤها لعوامل شكل أجهزة Android الأخرى غير مناسبة لأجهزة التلفزيون ويجب تبسيطها لتشغيلها على التلفزيون.
• استخدام ActionBar: على الرغم من أنّه يُنصح باستخدام أشرطة الإجراءات على الهواتف والأجهزة اللوحية، فإنّها غير مناسبة لواجهة مستخدم التلفزيون. يُنصح بشدة بعدم استخدام قائمة خيارات شريط الإجراءات أو أي قائمة منسدلة لتطبيقات التلفزيون بسبب صعوبة التنقّل في هذه القائمة باستخدام جهاز تحكّم عن بُعد.
• استخدام ViewPager: يمكن أن يكون التنقّل بين الشاشات عن طريق التمرير سريعًا رائعًا على الهاتف أو الجهاز اللوحي، ولكن لا تحاول إجراء ذلك على التلفزيون.

لمزيد من المعلومات عن تصميم التنسيقات المناسبة للتلفزيون، يُرجى الاطّلاع على دليل تصميم التلفزيون.

التعامل مع الصور النقطية الكبيرة

تتضمّن أجهزة التلفزيون، مثل أجهزة Android الأخرى، مقدارًا محدودًا من الذاكرة. إذا أنشأت تنسيق تطبيقك باستخدام صور عالية الدقة جدًا أو استخدمت العديد من الصور عالية الدقة في تشغيل تطبيقك، يمكن أن يصل التطبيق بسرعة إلى حدود الذاكرة ويؤدي إلى ظهور أخطاء نفاد الذاكرة. في معظم الحالات، ننصحك باستخدام مكتبة Glide لجلب الصور النقطية وفك ترميزها وعرضها في تطبيقك. لمزيد من المعلومات عن الحصول على أفضل أداء عند استخدام الصور النقطية، يُرجى الرجوع إلى أفضل الممارسات العامة للرسومات في Android.

تقديم إعلانات فعّالة

بالنسبة إلى بيئة غرفة المعيشة، ننصحك باستخدام حلول إعلانات الفيديو التي تملأ الشاشة ويمكن إغلاقها في غضون 30 ثانية. يجب أن تكون وظائف الإعلان على Android TV، مثل أزرار الإغلاق والنقرات، متاحة باستخدام لوحة التحكّم بدلاً من اللمس.

لا يوفّر Android TV متصفّح ويب. يجب ألا تحاول إعلاناتك تشغيل متصفّح ويب أو إعادة التوجيه إلى محتوى "متجر Google Play" غير الموافق عليه لأجهزة Android TV.

ملاحظة: يمكنك استخدام فئة WebView لتسجيل الدخول إلى خدمات وسائل التواصل الاجتماعي.

مراجع إضافية

التصميم للتلفزيون