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

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

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

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

مظهر Leanback

تتضمن مكتبة Leanback androidx، Theme.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

من الشائع جدًا استخدام AppCompatActivity مع أحد المظاهر Theme.AppCompat في التطبيقات للأجهزة الجوّالة التي تعمل بنظام التشغيل Android. تتيح لك هذه التركيبة استخدام ميزات مثل التلوين القابل للرسم بدون القلق بشأن إصدار 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 بالطريقة نفسها التي يتم بها تخصيص أي مظاهر أخرى. على سبيل المثال، إذا كنت تريد تغيير قيم خاصة بـ OnboardingSupportFragment لمجموعة أدوات واجهة المستخدم Leanback، نفّذ إجراءً مشابهًا لما يلي: 

<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، لترتيب المشاهدات. ويسمح هذا الأسلوب للنظام بضبط موضع طرق العرض وفقًا لحجم شاشة التلفزيون والمحاذاة ونسبة العرض إلى الارتفاع وكثافة وحدات البكسل.
  • أضِف هوامش كافية بين عناصر التحكّم في التنسيق لتجنُّب تشتيت واجهة المستخدم.

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

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

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

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

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

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

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

  • قسِّم النص إلى أجزاء صغيرة يمكن للمستخدمين فحصها بسرعة.
  • استخدِم نصًا فاتحًا على خلفية داكنة. من الأسهل قراءة هذا النمط على التلفزيون.
  • تجنب الخطوط الخفيفة أو الخطوط التي تحتوي على ضغطات ضيقة جدًا وواسعة جدًا. استخدِم خطوط sans-serif بسيطة وصقل الحواف لزيادة سهولة القراءة.
  • استخدِم أحجام الخطوط العادية في 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 أقدام من الشاشة. وأفضل طريقة لإجراء ذلك هي استخدام نظام الحجم حسب التنسيق بدلاً من الحجم المطلق، واستخدام وحدات البكسل التي لا تعتمد على الكثافة بدلاً من وحدات البكسل المطلقة. على سبيل المثال، لضبط عرض تطبيق مصغّر، استخدِم wrap_content بدلاً من القياس بوحدات البكسل، ولضبط هامش التطبيق المصغّر، استخدِم قيم dp بدلاً من قيم البكسل.

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

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

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

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

درجة دقة الألواح كثافة وحدات بكسل الشاشة
720 بكسل tvdpi
1080 xhdpi
4K xxxhdpi
راجع دعم كثافات وحدات البكسل المختلفة للحصول على مزيد من المعلومات.

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

أنماط التخطيط التي يجب تجنبها

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

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

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

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

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

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

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

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

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

مراجع إضافية

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