تُعرَض شاشة التلفزيون عادةً من مسافة 10 أقدام تقريبًا. وعلى الرغم من أنّها أكبر بكثير من معظم شاشات أجهزة Android الأخرى التي تعمل بنظام التشغيل 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 بالطريقة نفسها التي تستخدمها مع أي
مظهر آخر. على سبيل المثال، إذا كنت تريد تغيير قيم خاصة بـ 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 وحدة بكسل مستقلة الكثافة (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"/> - اجعل جميع أدوات العرض كبيرة بما يكفي لتكون مرئية بوضوح لشخص
يبعد مسافة 3 متر عن الشاشة. وأفضل طريقة لإجراء ذلك هي استخدام تغيير الحجم حسب التنسيق بدلاً من الحجم المطلق ووحدات بكسل مستقلة الكثافة (dp) بدلاً من وحدات البكسل المطلقة. على سبيل المثال، لضبط
عرض تطبيق مصغّر، استخدِم
wrap_contentبدلاً من القياس بالبكسل، ولضبط هامش الأداة، استخدِم قيم dp بدلاً من قيم البكسل.
للحصول على مزيد من المعلومات حول وحدات البكسل المستقلة الكثافة وإنشاء تنسيقات للتعامل مع أحجام الشاشات الأكبر، راجِع نظرة عامة على توافق الشاشة.
إدارة موارد التنسيق للتلفزيون
مثل كل أجهزة Android الأخرى، تتميّز أجهزة التلفزيون بأحجام مختلفة للشاشات وتتوافق مع درجات دقة مختلفة، على سبيل المثال لا الحصر، 720p و1080p و4K. تأكَّد من أنّ تطبيقك يتوافق مع أحجام الشاشات المختلفة.
تشتمل أحجام الشاشة ودرجات الدقة المختلفة على كثافات بكسل مختلفة. للحفاظ على مظهر واجهة المستخدم على مستوى أحجام الشاشات ودرجة الدقة وكثافات وحدات البكسل، حدِّد قياسات واجهة المستخدم باستخدام وحدات بكسل مستقلة الكثافة (dp) بدلاً من وحدات البكسل. ويتم توضيح كثافة وحدات البكسل للشاشة لدرجات الدقة المختلفة للوحة التلفزيون أدناه.
| درجة دقة اللوحة | كثافة وحدات بكسل الشاشة |
|---|---|
| 720 بكسل | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
لمعرفة مزيد من المعلومات حول تحسين التنسيقات والموارد للشاشات الكبيرة، يُرجى الاطّلاع على نظرة عامة على توافق الشاشة.
أنماط التنسيق التي يجب تجنبها
هناك بعض الطُرق لتصميم تنسيقات لا تعمل بشكل جيد على أجهزة التلفزيون. إليك بعض الأساليب التي يجب تجنّبها عند تصميم تصميم للتلفزيون.
- إعادة استخدام تنسيقات الهاتف أو الجهاز اللوحي: يجب عدم إعادة استخدام التنسيقات من تطبيق هاتف أو جهاز لوحي بدون تعديل. إنّ التنسيقات المصمَّمة لأشكال أجهزة Android الأخرى لا تكون مناسبة لأجهزة التلفزيون ويجب تبسيطها للتشغيل على جهاز التلفزيون.
- استخدام
ActionBar: علمًا أنّ أشرطة الإجراءات مقترَحة للاستخدام على الهواتف والأجهزة اللوحية، فإنّها غير مناسبة لواجهة التلفزيون. ولا يُنصح بشدة باستخدام قائمة خيارات شريط الإجراءات أو أي قائمة منسدلة لتطبيقات التلفزيون نظرًا لصعوبة التنقل في مثل هذه القائمة باستخدام وحدة تحكم عن بُعد. - استخدام
ViewPager: يمكن أن يكون التمرير بين الشاشات مفيدًا على الهاتف أو الجهاز اللوحي، ولكن لا تجرِّب ذلك على التلفزيون.
لمزيد من المعلومات حول تصميم التنسيقات المناسبة للتلفزيون، يمكنك الاطّلاع على دليل تصميم التلفزيون.
التعامل مع الصور النقطية الكبيرة
تحتوي أجهزة التلفزيون، مثل أجهزة Android الأخرى، على مساحة محدودة من الذاكرة. إذا صمّمت تصميم تطبيقك باستخدام صور عالية الدقة جدًا أو استخدمت العديد من الصور العالية الدقة أثناء تشغيل تطبيقك، قد ينفد تصميمه بشكل سريع من حدود الذاكرة ويتسبب في حدوث أخطاء بسبب نفاد الذاكرة. في معظم الحالات، ننصح باستخدام مكتبة التمرير لجلب الصور النقطية وفك ترميزها وعرضها في تطبيقك. ولمزيد من المعلومات حول الحصول على أفضل أداء عند استخدام الصور النقطية، يمكنك الاطّلاع على أفضل الممارسات العامة حول رسومات Android.
تقديم خدمات إعلانية فعالة
بالنسبة إلى بيئة غرفة المعيشة، ننصحك باستخدام حلول إعلانات الفيديو التي تعمل في وضع ملء الشاشة والقابلة للإغلاق في غضون 30 ثانية. يجب أن تتوفّر إمكانية الوصول إلى وظائف الإعلانات على Android TV، مثل أزرار الإغلاق ونسبة النقر إلى الظهور، باستخدام لوحة التحكّم بدلاً من اللمس.
لا يتوفّر متصفّح ويب على Android TV. يجب ألا تحاول إعلاناتك تشغيل متصفح ويب أو إعادة توجيه إلى محتوى "متجر Google Play" غير المقبول لأجهزة Android TV.
ملاحظة: يمكنك استخدام الفئة WebView
لتسجيل الدخول إلى خدمات وسائل التواصل الاجتماعي.