طرح‌بندی‌ها در جعبه ابزار Leanback UI

با Compose بهتر بسازید
با استفاده از Jetpack Compose برای سیستم عامل Android TV، رابط‌های کاربری زیبا با حداقل کد ایجاد کنید.
نوشتن برای تلویزیون →

صفحه تلویزیون معمولاً از حدود 10 فوت دورتر دیده می شود، و در حالی که بسیار بزرگتر از سایر نمایشگرهای دستگاه های مجهز به اندروید است، صفحه تلویزیون همان سطح جزئیات و رنگ را به اندازه یک صفحه نمایش دستگاه کوچکتر ارائه نمی دهد. این عوامل شما را ملزم به ایجاد طرح‌بندی برنامه با در نظر گرفتن دستگاه‌های تلویزیونی می‌کند تا تجربه کاربری مفید و لذت‌بخشی را ایجاد کنید.

از تم های چیدمان برای تلویزیون استفاده کنید

تم‌های اندروید می‌توانند مبنایی برای طرح‌بندی برنامه‌های تلویزیون شما فراهم کنند. از یک طرح زمینه برای تغییر نمایش فعالیت های برنامه خود استفاده کنید که قرار است روی دستگاه تلویزیون اجرا شوند. این بخش توضیح می دهد که از چه تم هایی استفاده کنید.

تم 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

نوار عنوان یک عنصر رابط کاربری استاندارد برای برنامه‌های اندروید در تلفن‌ها و تبلت‌ها است، اما برای برنامه‌های تلویزیون مناسب نیست. اگر از کلاس‌های 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

در برنامه های موبایل اندروید، استفاده از AppCompatActivity همراه با یکی از تم های Theme.AppCompat بسیار رایج است. این ترکیب به شما امکان می دهد بدون نگرانی در مورد نسخه اندرویدی که روی دستگاه اجرا می شود از ویژگی هایی مانند رنگ بندی قابل ترسیم استفاده کنید. اگر در حال توسعه برنامه‌ای هستید که فقط روی Android TV اجرا می‌شود، از AppCompatActivity استفاده نکنید، زیرا ویژگی‌هایی که فعال می‌کند یا از قبل در Android TV در دسترس هستند یا مرتبط نیستند.

اگر در حال ساخت یک برنامه با یک پایگاه کد مشترک بین تلفن همراه Android و Android TV هستید، ممکن است به دلیل موضوع بندی با چالش هایی روبرو شوید. AppCompatActivity و ابزارک های مختلف AppCompat نیاز دارند که از Theme.AppCompat استفاده کنید، در حالی که قطعات جعبه ابزار Leanback UI انتظار دارند از FragmentActivity و Theme.Leanback استفاده کنید.

اگر می‌خواهید از همان فعالیت پایه برای تلفن همراه Android و Android TV استفاده کنید، یا اگر می‌خواهید از نماهای سفارشی مبتنی بر ویجت‌های AppCompat مانند AppCompatImageView استفاده کنید، از تم‌های Theme.AppCompat.Leanback استفاده کنید. این تم ها تمام قالب های AppCompat را در اختیار شما قرار می دهند و همچنین مقادیر ویژه Leanback را ارائه می دهند.

می‌توانید تم‌های Theme.AppCompat.Leanback را به همان روشی که با هر تم دیگری انجام می‌دهید سفارشی کنید. برای مثال، اگر می‌خواهید مقادیری را تغییر دهید که مختص OnboardingSupportFragment جعبه ابزار Leanback UI هستند، کاری شبیه به زیر انجام دهید:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

طرح بندی های اولیه تلویزیون را بسازید

طرح‌بندی دستگاه‌های تلویزیون باید از برخی دستورالعمل‌های اساسی پیروی کند تا اطمینان حاصل شود که قابل استفاده و مؤثر در صفحه‌نمایش‌های بزرگ هستند. این نکات را برای ایجاد طرح‌بندی بهینه‌سازی شده برای صفحه‌نمایش تلویزیون دنبال کنید:

  • طرح بندی ها را با جهت افقی بسازید. صفحه های تلویزیون همیشه در حالت افقی نمایش داده می شوند.
  • کنترل های پیمایش روی صفحه را در سمت چپ یا راست صفحه قرار دهید و فضای عمودی را برای محتوا ذخیره کنید.
  • رابط‌های کاربری ایجاد کنید که با استفاده از قطعات به بخش‌هایی تقسیم می‌شوند. برای استفاده بهتر از فضای افقی صفحه، به جای ListView از گروه های نمایش مانند GridView استفاده کنید.
  • از گروه‌های نمایش مانند RelativeLayout یا LinearLayout برای ترتیب دادن نماها استفاده کنید. این رویکرد به سیستم امکان می‌دهد موقعیت نماها را بر اساس اندازه، تراز، نسبت ابعاد و تراکم پیکسلی یک صفحه تلویزیون تنظیم کند.
  • برای جلوگیری از ایجاد UI درهم، حاشیه های کافی بین کنترل های طرح بندی اضافه کنید.

Overscan

طرح‌بندی تلویزیون به دلیل تکامل استانداردهای تلویزیون برای ارائه یک تصویر تمام صفحه به بینندگان، الزامات منحصر به فردی دارد. به همین دلیل، دستگاه‌های تلویزیون ممکن است لبه بیرونی طرح‌بندی برنامه را ببندند تا مطمئن شوند که کل صفحه نمایش پر شده است. این رفتار به طور کلی به عنوان overscan نامیده می شود.

عناصر صفحه را که باید همیشه برای کاربر قابل مشاهده باشند در منطقه ایمن بیش از حد اسکن قرار دهید. افزودن یک حاشیه 5 درصدی 48 dp در لبه‌های چپ و راست و 27 dp در لبه‌های بالا و پایین به طرح‌بندی کمک می‌کند تا اطمینان حاصل شود که عناصر صفحه در طرح‌بندی در ناحیه ایمن بیش از حد اسکن هستند.

عناصر صفحه پس‌زمینه را که کاربر مستقیماً با آنها ارتباط برقرار نمی‌کند، تنظیم نکنید، و عناصر را در ناحیه ایمن بیش از حد اسکن نکنید. این رویکرد کمک می کند تا اطمینان حاصل شود که عناصر صفحه پس زمینه در همه صفحه ها درست به نظر می رسند.

مثال زیر یک طرح‌بندی ریشه‌ای را نشان می‌دهد که می‌تواند حاوی عناصر پس‌زمینه باشد و یک طرح‌بندی فرزند تودرتو که دارای حاشیه 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 و anti-aliasing استفاده کنید.
  • از اندازه های استاندارد فونت اندروید استفاده کنید: 
    <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 و برای تعیین حاشیه برای یک ویجت، به جای مقادیر px از مقادیر dp استفاده کنید.

برای اطلاعات بیشتر در مورد پیکسل‌های مستقل از چگالی و طرح‌بندی ساختمان برای رسیدگی به اندازه‌های صفحه نمایش بزرگ‌تر، به نمای کلی سازگاری صفحه مراجعه کنید.

منابع طرح‌بندی تلویزیون را مدیریت کنید

مانند سایر دستگاه‌های اندرویدی، تلویزیون‌ها دارای اندازه‌های مختلف صفحه نمایش هستند و از رزولوشن‌های متفاوتی از جمله، اما نه محدود به 720p، 1080p و 4K پشتیبانی می‌کنند. مطمئن شوید که برنامه شما از اندازه های مختلف صفحه نمایش پشتیبانی می کند .

اندازه‌ها و رزولوشن‌های مختلف صفحه نمایش، تراکم پیکسلی متفاوتی دارند. برای حفظ ظاهر رابط کاربری خود در اندازه‌های صفحه، وضوح و تراکم پیکسل، اندازه‌گیری‌های رابط کاربری را با استفاده از پیکسل‌های مستقل از چگالی (dp) به جای پیکسل‌ها تعریف کنید. تراکم پیکسل صفحه نمایش برای وضوح های مختلف پنل تلویزیون در زیر مشخص شده است.

وضوح پنل تراکم پیکسلی صفحه نمایش
720p tvdpi
1080 xhdpi
4K xxxhdpi
برای اطلاعات بیشتر به پشتیبانی از تراکم پیکسل های مختلف مراجعه کنید.

برای اطلاعات بیشتر در مورد بهینه‌سازی چیدمان‌ها و منابع برای صفحه‌های بزرگ، به نمای کلی سازگاری با صفحه مراجعه کنید.

الگوهای چیدمان برای جلوگیری از

چند رویکرد برای طرح‌بندی ساختمان وجود دارد که در دستگاه‌های تلویزیون به خوبی کار نمی‌کنند. در اینجا برخی از رویکردهای رابط کاربری وجود دارد که باید هنگام ایجاد طرح‌بندی برای تلویزیون از آنها اجتناب کنید.

  • استفاده مجدد از طرح‌بندی تلفن یا رایانه لوحی: از طرح‌بندی‌های یک برنامه تلفن یا رایانه لوحی بدون تغییر استفاده مجدد نکنید. طرح‌بندی‌های ساخته‌شده برای سایر فاکتورهای دستگاه Android برای دستگاه‌های تلویزیون مناسب نیستند و برای عملکرد در تلویزیون باید ساده‌سازی شوند.
  • استفاده از ActionBar : در حالی که نوارهای عمل برای استفاده در تلفن‌ها و تبلت‌ها توصیه می‌شوند، اما برای رابط تلویزیون مناسب نیستند. استفاده از منوی گزینه‌های نوار اکشن یا هر منوی کشویی، برای برنامه‌های تلویزیونی به دلیل مشکل در پیمایش چنین منویی با کنترل از راه دور، به شدت ممنوع است.
  • استفاده از ViewPager : لغزش بین صفحه‌ها می‌تواند روی گوشی یا تبلت عالی عمل کند، اما این کار را روی تلویزیون امتحان نکنید!

برای اطلاعات بیشتر در مورد طراحی چیدمان های مناسب با تلویزیون، راهنمای طراحی تلویزیون را ببینید.

مدیریت نقشه های بیت بزرگ

دستگاه های تلویزیون مانند سایر دستگاه های اندرویدی دارای حافظه محدودی هستند. اگر طرح‌بندی برنامه خود را با تصاویری با وضوح بسیار بالا بسازید یا از تصاویر با وضوح بالا در عملکرد برنامه خود استفاده کنید، می‌تواند به سرعت با محدودیت‌های حافظه مواجه شود و باعث از بین رفتن خطاهای حافظه شود. در بیشتر موارد، توصیه می‌کنیم از کتابخانه Glide برای واکشی، رمزگشایی و نمایش نقشه‌های بیتی در برنامه خود استفاده کنید. برای کسب اطلاعات بیشتر در مورد بهترین عملکرد هنگام کار با بیت مپ، به بهترین شیوه های کلی گرافیک اندروید ما مراجعه کنید.

تبلیغات موثر ارائه دهید

برای محیط اتاق نشیمن، توصیه می کنیم از راه حل های تبلیغاتی ویدیویی استفاده کنید که تمام صفحه هستند و در عرض 30 ثانیه قابل حذف هستند. عملکردهای تبلیغات در Android TV، مانند دکمه‌های رد کردن و کلیک‌ها، باید با استفاده از D-pad به جای لمس قابل دسترسی باشد.

Android TV مرورگر وب ارائه نمی دهد. تبلیغات شما نباید سعی کند یک مرورگر وب راه اندازی کند یا به محتوای فروشگاه Google Play هدایت شود که برای دستگاه های Android TV تأیید نشده است.

توجه: می توانید از کلاس WebView برای ورود به سرویس های رسانه های اجتماعی استفاده کنید.

منابع اضافی

طراحی برای تلویزیون

قبلی
بهترین روش ها برای ایجاد تعامل در Google TV
بعدی
مهاجرت به نوشتن برای تلویزیون