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

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

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

إنشاء أغنية للتلفزيون →

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

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

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

مظهر Leanback

تتضمّن مكتبة androidx.leanback المتوقّفة نهائيًا Theme.Leanback، وهي سمة لأنشطة Android TV توفّر نمطًا مرئيًا متسقًا لتطبيقات مجموعة أدوات واجهة مستخدم 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 وحدة بكسل مستقل الكثافة على الحافتين اليمنى واليسرى و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"/>

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

مراجع إضافية

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