通常,观看电视屏幕的距离约为 10 英尺(约 3 米)。虽然电视屏幕比大多数其他 Android 驱动设备的显示屏都要大得多,但电视屏幕所提供的细节和色彩丰富度并不如小型设备屏幕。这些因素要求您在创建应用布局时必须以电视设备为考量,从而打造实用且令人愉悦的用户体验。
为电视使用布局主题
Android 主题可以为电视应用中的布局提供基础。请使用主题来调整旨在电视设备上运行的应用 Activity 的显示方式。本节将介绍应该使用哪些主题。
Leanback 主题
已弃用的 androidx.leanback 库包含 Theme.Leanback,这是一种适用于电视 Activity 的主题,旨在为 Leanback UI 工具包应用提供一致的视觉风格。对于任何使用 AndroidX Leanback 类构建的电视应用,都请使用此主题。以下代码示例展示了如何将此主题应用于 Activity:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar 主题
标题栏是手机和平板电脑上 Android 应用的标准用户界面元素,但不适用于电视应用。如果您没有使用 AndroidX Leanback 类,请将 NoTitleBar 主题应用于您的电视 Activity,以禁止显示标题栏。以下来自电视应用清单(manifest)的代码示例演示了如何应用此主题来移除标题栏的显示:
<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 主题。这种组合让您可以使用如 Drawable 着色等功能,而无需担心设备运行的 Android 版本。如果您开发的应用仅在 Android TV 上运行,请勿使用 AppCompatActivity,因为该类启用的功能要么在 Android TV 上已内置,要么与其不相关。
如果您构建的应用需要在 Android 手机和 Android TV 之间共享代码库,则可能会因主题设置而遇到一些挑战。AppCompatActivity 和各种 AppCompat 小部件要求您使用 Theme.AppCompat,而 Leanback UI 工具包的 Fragment 则期望您使用 FragmentActivity 和 Theme.Leanback。
如果您确实需要在 Android 手机和 Android TV 上使用相同的基类 Activity,或者想使用基于 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>
构建基础电视布局
电视设备的布局必须遵循一些基本准则,以确保其在大屏幕上可用且有效。请遵循以下提示来构建针对电视屏幕优化的布局:
- 以横屏方向构建布局。电视屏幕始终以横屏模式显示。
- 将屏幕上的导航控件放在屏幕左侧或右侧,为内容节省垂直空间。
- 创建使用 Fragment 将界面划分为不同部分的 UI。使用
GridView等视图组代替ListView,以更好地利用水平屏幕空间。 - 使用
RelativeLayout或LinearLayout等视图组来排列视图。这种方法让系统能够根据电视屏幕的尺寸、对齐方式、纵横比和像素密度调整视图的位置。 - 在布局控件之间添加足够的边距,以避免界面显得杂乱无章。
过扫描 (Overscan)
由于电视标准的发展,为了向观众呈现全屏画面,电视布局有着一些独特的要求。因此,电视设备可能会裁剪应用布局的外缘,以确保整个屏幕被填满。这种行为通常被称为过扫描。
将用户必须随时可见的屏幕元素放置在过扫描安全区域内。在布局的左右边缘添加 48dp 的 5% 边距,在顶部和底部边缘添加 27dp 的边距,有助于确保布局中的屏幕元素处于过扫描安全区域内。
不要调整用户不直接交互的背景屏幕元素,也不要将这些元素裁剪到过扫描安全区域内。这种方法有助于确保背景屏幕元素在所有屏幕上看起来都正确。
以下示例展示了一个包含背景元素的根布局,以及一个嵌套的子布局,该子布局具有 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 上的广告功能(如关闭按钮和点击跳转)必须能够使用 D-pad(方向键)访问,而不是触摸操作。
Android TV 不提供网络浏览器。您的广告不得尝试启动网络浏览器或重定向到未经 Android TV 设备许可的 Google Play 商店内容。
注意:您可以使用 WebView 类进行社交媒体服务的登录。