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

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

يوضِّح هذا الدليل الحدّ الأدنى للمتطلبات وتفاصيل التنفيذ لإنشاء تصاميم فعّالة لتطبيقات التلفزيون.

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

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

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

مظهر Leanback

تتضمن مكتبة androidx على Leanback 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

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

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

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

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

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

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

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

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

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

على غرار كل أجهزة 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 لتسجيل الدخول إلى خدمات وسائل التواصل الاجتماعي.