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

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

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

إنشاء رسالة للتلفزيون →

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

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

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

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

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

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

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

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

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

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

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

لمزيد من المعلومات حول تصميم التخطيطات المناسبة للتلفزيون، اطلع على دليل تصميم التلفزيون

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

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

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

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

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

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

مصادر إضافية

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