电视屏幕通常在约 10 英尺外观看,虽然它比大多数其他 Android 设备显示屏大得多,但电视屏幕无法提供与小型设备屏幕相同级别的细节和颜色。这些因素要求您在设计应用布局时牢记电视设备,以创建有用且令人愉悦的用户体验。
为电视使用布局主题
Android 主题 可以为 TV 应用中的布局提供基础。使用主题修改旨在在电视设备上运行的应用活动的显示。本节说明要使用的主题。
Leanback 主题
androidx.leanback 库 包含Theme.Leanback
,这是一个适用于 TV 活动的主题,它提供了始终如一的视觉样式。对于使用 AndroidX Leanback 类构建的任何 TV 应用,都应使用此主题。以下代码示例显示了如何将此主题应用于活动
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar 主题
标题栏是手机和平板电脑上 Android 应用的标准用户界面元素,但不适用于 TV 应用。如果您不使用 AndroidX Leanback 类,请将NoTitleBar
主题应用于您的 TV 活动以禁止显示标题栏。来自 TV 应用清单的以下代码示例演示了如何应用此主题以删除标题栏的显示
<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 移动设备和 Android TV 之间共享代码库的应用,则由于主题设置,您可能会遇到一些挑战。AppCompatActivity
和各种AppCompat
小部件要求您使用Theme.AppCompat
,而 Leanback UI 工具包片段则期望您使用FragmentActivity
和Theme.Leanback
。
如果您需要对 Android 移动设备和 Android TV 使用相同的基活动,或者如果您想使用基于AppCompat
小部件(如AppCompatImageView
)的自定义视图,请使用Theme.AppCompat.Leanback
主题。这些主题为您提供了AppCompat
的所有主题设置,还提供了 Leanback 特定的值。
您可以像处理任何其他主题一样自定义Theme.AppCompat.Leanback
主题。例如,如果您想更改 Leanback UI 工具包的OnboardingSupportFragment
特有的值,请执行类似于以下操作
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
构建基本的电视布局
TV 设备的布局必须遵循一些基本准则,以帮助确保它们在大屏幕上可用且有效。请遵循以下提示构建针对 TV 屏幕优化的布局
- 构建具有横向方向的布局。电视屏幕始终以横向模式显示。
- 将屏幕上的导航控件放在屏幕的左侧或右侧,并将垂直空间留给内容。
- 使用片段创建分成多个部分的UI。使用
GridView
之类的视图组代替ListView
,以更好地利用水平屏幕空间。 - 使用
RelativeLayout
或LinearLayout
之类的视图组来排列视图。这种方法允许系统根据 TV 屏幕的大小、对齐方式、纵横比和像素密度调整视图的位置。 - 在布局控件之间添加足够的边距,以避免 UI 杂乱。
超扫描
由于电视标准的演变,为了向观众呈现全屏画面,电视的布局有一些独特的要求。因此,电视设备可能会裁剪应用程序布局的外边缘,以确保填充整个显示屏。这种行为通常被称为过扫描。
将必须始终显示给用户的屏幕元素放置在过扫描安全区域内。在布局的左右边缘添加 48 dp 的 5% 边距,在上下边缘添加 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
或相关的窗口小部件),则不要对您的布局应用过扫描边距,因为这些布局已经包含了过扫描安全边距。
构建可用的文本和控件
请遵循以下提示,使电视应用程序中的文本和控件更易于远距离观看。
- 将文本分解成小的块,以便用户可以快速扫描。
- 在深色背景上使用浅色文本。这种样式在电视上更容易阅读。
- 避免使用笔画非常窄和非常宽的轻量级字体或字体。使用简单的无衬线字体和抗锯齿功能来提高可读性。
- 使用 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 值而不是 px 值。
有关与密度无关的像素以及构建布局以处理更大屏幕尺寸的更多信息,请参阅屏幕兼容性概述。
管理电视的布局资源
与所有其他 Android 设备一样,电视具有不同的屏幕尺寸并支持不同的分辨率,包括但不限于 720p、1080p 和 4K。确保您的应用程序支持不同的屏幕尺寸。
不同的屏幕尺寸和分辨率具有不同的像素密度。为了在屏幕尺寸、分辨率和像素密度之间保持 UI 外观的稳定性,请使用与密度无关的像素 (dp) 而不是像素来定义 UI 测量值。不同电视面板分辨率的屏幕像素密度如下所示。
面板分辨率 | 屏幕像素密度 |
---|---|
720p | tvdpi |
1080 | xhdpi |
4K | xxxhdpi |
有关优化大型屏幕布局和资源的更多信息,请参阅屏幕兼容性概述。
要避免的布局模式
有一些构建布局的方法在电视设备上效果不佳。以下是一些在为电视开发布局时应避免的用户界面方法。
- 重新使用手机或平板电脑布局:不要在未经修改的情况下重新使用手机或平板电脑应用程序的布局。为其他 Android 设备外形尺寸构建的布局不适合电视设备,必须简化才能在电视上运行。
- 使用
ActionBar
:虽然建议在手机和平板电脑上使用操作栏,但它们不适合电视界面。强烈建议电视应用程序不要使用操作栏选项菜单或任何下拉菜单,因为使用遥控器操作此类菜单很困难。 - 使用
ViewPager
:在手机和平板电脑上滑动屏幕之间可以很好地工作,但不要尝试在电视上这样做!
有关设计适合电视的布局的更多信息,请参阅电视设计指南。
处理大型位图
与其他 Android 设备一样,电视设备的内存也有限。如果您使用非常高分辨率的图像构建应用程序布局,或者在应用程序操作中使用许多高分辨率图像,则它可能会很快遇到内存限制并导致内存不足错误。在大多数情况下,我们建议使用Glide库来获取、解码和显示应用程序中的位图。有关在处理位图时获得最佳性能的更多信息,请参阅我们的一般Android 图形最佳实践。
提供有效的广告
对于客厅环境,我们建议您使用全屏且可在 30 秒内关闭的视频广告解决方案。Android TV 上的广告功能(例如关闭按钮和点击)必须可以使用方向键而不是触摸来访问。
Android TV 不提供 Web 浏览器。您的广告不得尝试启动 Web 浏览器或重定向到未经批准用于 Android TV 设备的 Google Play 商店内容。
注意:您可以使用WebView
类登录社交媒体服务。