صفحه تلویزیون معمولاً از فاصله حدود 10 فوتی دیده میشود و اگرچه بسیار بزرگتر از نمایشگرهای اکثر دستگاههای اندروید است، اما همان سطح جزئیات و رنگ را که صفحه نمایش دستگاههای کوچکتر ارائه میدهد، ارائه نمیدهد. این عوامل شما را ملزم میکند که طرحبندی برنامهها را با در نظر گرفتن دستگاههای تلویزیون ایجاد کنید تا یک تجربه کاربری مفید و لذتبخش ایجاد کنید.
از تمهای طرحبندی برای تلویزیون استفاده کنید
تمهای اندروید میتوانند مبنایی برای طرحبندی برنامههای تلویزیونی شما فراهم کنند. از یک تم برای تغییر نمایش فعالیتهای برنامه خود که قرار است روی دستگاه تلویزیون اجرا شوند، استفاده کنید. این بخش توضیح میدهد که از کدام تمها استفاده کنید.
تم لاغر
کتابخانه منسوخشده androidx.leanback شامل Theme.Leanback است، یک تم برای فعالیتهای تلویزیونی که سبک بصری ثابتی را برای برنامههای جعبه ابزار رابط کاربری 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 موجود هستند یا مرتبط نیستند.
اگر در حال ساخت برنامهای با کدبیس مشترک بین اندروید موبایل و اندروید تیوی هستید، ممکن است به دلیل تمبندی با چالشهایی مواجه شوید. AppCompatActivity و ویجتهای مختلف AppCompat نیاز به استفاده از Theme.AppCompat دارند، در حالی که قطعات جعبه ابزار Leanback UI از شما انتظار دارند از FragmentActivity و Theme.Leanback استفاده کنید.
اگر نیاز دارید از یک اکتیویتی پایه برای موبایل اندروید و تلویزیون اندروید استفاده کنید، یا اگر میخواهید از نماهای سفارشی مبتنی بر ویجتهای 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>
طرحبندیهای اولیه تلویزیون را بسازید
طرحبندیهای دستگاههای تلویزیون باید از برخی دستورالعملهای اساسی پیروی کنند تا از قابل استفاده و مؤثر بودن آنها در صفحه نمایشهای بزرگ اطمینان حاصل شود. برای ساخت طرحبندیهای بهینه برای صفحه نمایش تلویزیون، این نکات را دنبال کنید:
- طرحبندیها را با جهت افقی بسازید. صفحههای تلویزیون همیشه در حالت افقی نمایش داده میشوند.
- کنترلهای ناوبری روی صفحه را در سمت چپ یا راست صفحه قرار دهید و فضای عمودی را برای محتوا نگه دارید.
- رابطهای کاربری ایجاد کنید که با استفاده از قطعات به بخشهایی تقسیم شدهاند. برای استفاده بهتر از فضای افقی صفحه، از گروههای نمایش مانند
GridViewبه جایListViewاستفاده کنید. - از گروههای نمایش مانند
RelativeLayoutیاLinearLayoutبرای مرتب کردن نماها استفاده کنید. این رویکرد به سیستم اجازه میدهد موقعیت نماها را با اندازه، تراز، نسبت ابعاد و تراکم پیکسل صفحه تلویزیون تنظیم کند. - برای جلوگیری از شلوغی رابط کاربری، حاشیههای کافی بین کنترلهای طرحبندی اضافه کنید.
اسکن بیش از حد
طرحبندیهای تلویزیون به دلیل تکامل استانداردهای تلویزیون برای ارائه تصویر تمام صفحه به بینندگان، الزامات منحصر به فردی دارند. به همین دلیل، دستگاههای تلویزیون ممکن است لبه بیرونی طرحبندی برنامه را برش دهند تا از پر شدن کل صفحه نمایش اطمینان حاصل شود. این رفتار معمولاً به عنوان overscan شناخته میشود.
عناصر صفحه نمایش که باید همیشه برای کاربر قابل مشاهده باشند را در ناحیه امن overscan قرار دهید. اضافه کردن حاشیه ۵٪ به میزان ۴۸ dp در لبههای چپ و راست و ۲۷ dp در لبههای بالا و پایین به یک طرحبندی، به اطمینان از قرار گرفتن عناصر صفحه نمایش در طرحبندی در ناحیه امن overscan کمک میکند.
عناصر صفحه پسزمینه را که کاربر مستقیماً با آنها تعامل ندارد، تنظیم نکنید و عناصر را به ناحیه امن overscan متصل نکنید. این رویکرد به شما اطمینان میدهد که عناصر صفحه پسزمینه در تمام صفحهها به درستی نمایش داده میشوند.
مثال زیر یک طرحبندی ریشه را نشان میدهد که میتواند شامل عناصر پسزمینه و یک طرحبندی فرزند تو در تو باشد که دارای حاشیه ۵٪ است و میتواند شامل عناصری در ناحیه امن overscan باشد:
<?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 یا ویجتهای مرتبط استفاده میکنید، حاشیههای overscan را به طرحبندی خود اعمال نکنید، زیرا این طرحبندیها از قبل حاشیههای overscan-safe را در خود جای دادهاند.
ساخت متن و کنترلهای قابل استفاده
برای اینکه متن و کنترلهای برنامه تلویزیون شما از فاصله دور راحتتر دیده شوند، این نکات را دنبال کنید:
- متن را به بخشهای کوچک تقسیم کنید تا کاربران بتوانند به سرعت آن را مرور کنند.
- از متن روشن روی پسزمینه تیره استفاده کنید. این سبک در تلویزیون راحتتر خوانده میشود.
- از فونتهای سبک یا فونتهایی که هم خطوط بسیار باریک و هم خطوط بسیار پهن دارند، اجتناب کنید. برای افزایش خوانایی، از فونتهای سادهی 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"/>
- تمام ویجتهای نمای خود را به اندازهای بزرگ کنید که برای کسی که در فاصله ۱۰ فوتی از صفحه نمایش نشسته است، به وضوح قابل مشاهده باشند. بهترین راه برای انجام این کار، استفاده از اندازهبندی نسبی طرحبندی به جای اندازهبندی مطلق و واحدهای پیکسل مستقل از چگالی (dp) به جای واحدهای پیکسل مطلق است. به عنوان مثال، برای تنظیم عرض یک ویجت، به جای واحد اندازهگیری پیکسل از
wrap_contentاستفاده کنید و برای تنظیم حاشیه برای یک ویجت، به جای مقادیر px از مقادیر dp استفاده کنید.
برای اطلاعات بیشتر در مورد پیکسلهای مستقل از تراکم و طرحبندیهای ساختمانی برای مدیریت اندازههای بزرگتر صفحه نمایش، به نمای کلی سازگاری صفحه نمایش مراجعه کنید.
مدیریت منابع طرحبندی برای تلویزیون
مانند سایر دستگاههای اندرویدی، تلویزیونها اندازه صفحه نمایش متفاوتی دارند و از وضوحهای مختلفی از جمله 720p، 1080p و 4K پشتیبانی میکنند، اما محدود به این موارد نیستند. مطمئن شوید که برنامه شما از اندازههای مختلف صفحه نمایش پشتیبانی میکند .
اندازهها و وضوحهای مختلف صفحه نمایش، تراکم پیکسل متفاوتی دارند. برای حفظ ظاهر رابط کاربری خود در اندازهها، وضوح و تراکم پیکسلهای مختلف صفحه نمایش، اندازهگیریهای رابط کاربری را با استفاده از پیکسلهای مستقل از تراکم (dp) به جای پیکسلها تعریف کنید. تراکم پیکسل صفحه نمایش برای وضوحهای مختلف پنل تلویزیون در زیر شرح داده شده است.
| وضوح پنل | تراکم پیکسلی صفحه نمایش |
|---|---|
| ۷۲۰p | tvdpi |
| ۱۰۸۰ | xhdpi |
| 4K | xxxhdpi |
برای اطلاعات بیشتر در مورد بهینهسازی طرحبندیها و منابع برای صفحات نمایش بزرگ، به نمای کلی سازگاری صفحه نمایش مراجعه کنید.
الگوهای چیدمانی که باید از آنها اجتناب کنید
چند رویکرد برای ساخت طرحبندیهایی وجود دارد که در دستگاههای تلویزیون به خوبی کار نمیکنند. در اینجا چند رویکرد رابط کاربری وجود دارد که باید هنگام توسعه طرحبندی برای تلویزیون از آنها اجتناب کنید.
- استفاده مجدد از طرحبندیهای گوشی یا تبلت: طرحبندیهای یک برنامه گوشی یا تبلت را بدون تغییر دوباره استفاده نکنید. طرحبندیهایی که برای سایر دستگاههای اندروید ساخته شدهاند، برای دستگاههای تلویزیون مناسب نیستند و باید برای کار در تلویزیون سادهسازی شوند.
- استفاده از
ActionBar: اگرچه استفاده از Action Barها در تلفنها و تبلتها توصیه میشود، اما برای رابط کاربری تلویزیون مناسب نیستند. استفاده از منوی گزینههای Action Bar یا هر منوی کشویی دیگر، به دلیل دشواری پیمایش چنین منویی با ریموت کنترل، برای برنامههای تلویزیون اکیداً توصیه نمیشود. - استفاده از
ViewPager: جابجایی بین صفحات میتواند روی تلفن یا تبلت عالی عمل کند، اما این کار را روی تلویزیون امتحان نکنید!
برای اطلاعات بیشتر در مورد طراحی چیدمانهای مناسب برای تلویزیون، به راهنمای طراحی تلویزیون مراجعه کنید.
مدیریت بیتمپهای بزرگ
دستگاههای تلویزیون، مانند سایر دستگاههای اندروید، حافظه محدودی دارند. اگر طرحبندی برنامه خود را با تصاویر با وضوح بسیار بالا بسازید یا از تصاویر با وضوح بالا در عملکرد برنامه خود استفاده کنید، میتواند به سرعت با محدودیت حافظه مواجه شود و باعث خطاهای کمبود حافظه شود. در بیشتر موارد، توصیه میکنیم از کتابخانه Glide برای واکشی، رمزگشایی و نمایش بیتمپها در برنامه خود استفاده کنید. برای اطلاعات بیشتر در مورد بهترین عملکرد هنگام کار با بیتمپها، به بهترین شیوههای کلی گرافیک اندروید ما مراجعه کنید.
ارائه تبلیغات موثر
برای محیط اتاق نشیمن، توصیه میکنیم از راهکارهای تبلیغات ویدیویی استفاده کنید که تمام صفحه باشند و ظرف 30 ثانیه قابل حذف باشند. قابلیتهای تبلیغات در اندروید تیوی، مانند دکمههای حذف و کلیکها، باید با استفاده از D-pad به جای لمس قابل دسترسی باشند.
اندروید تیوی مرورگر وب ارائه نمیدهد. تبلیغات شما نباید سعی در باز کردن مرورگر وب یا هدایت به محتوای فروشگاه گوگل پلی که برای دستگاههای اندروید تیوی تأیید نشده است، داشته باشند.
نکته: میتوانید از کلاس WebView برای ورود به سرویسهای رسانههای اجتماعی استفاده کنید.