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

يتم عادةً عرض شاشة التلفزيون على بُعد حوالي 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">

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

java.lang.RuntimeException: Unable to start activity ComponentInfo{...} :
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this
activity.

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

لا تضبط عناصر شاشة الخلفية التي لا يتفاعل معها المستخدم مباشرة أو تضعها في المنطقة الآمنة التي تم تجاوز المسح الضوئي لها. يساعد هذا النهج في ضمان أن عناصر شاشة الخلفية تبدو صحيحة على جميع الشاشات.

يوضح المثال التالي تنسيقًا جذريًا يمكن أن يحتوي على عناصر خلفية وتخطيط فرعي متداخل يحتوي على هامش بنسبة 5% ويمكن أن يحتوي على عناصر داخل المنطقة الآمنة التي يتم تجاوزها بنسبة %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"/>
  

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