电视屏幕通常从大约 10 英尺远的地方观看,虽然它比大多数其他 Android 设备的显示屏大得多,但电视屏幕无法提供与小型设备屏幕相同级别的细节和色彩。这些因素要求您在设计应用布局时要牢记电视设备,以创建有用且愉快的用户体验。
为电视使用布局主题
Android 主题 可以为电视应用中的布局提供基础。使用主题修改旨在在电视设备上运行的应用活动的显示。本节介绍要使用的主题。
Leanback 主题
The androidx.leanback 库 包含 Theme.Leanback
,这是一个用于电视活动的主题,它提供一致的视觉风格。对于使用 AndroidX Leanback 类构建的任何电视应用,都使用此主题。以下代码示例展示了如何将此主题应用于活动
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
无标题栏主题
标题栏是手机和平板电脑上 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 移动和 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>
构建基本的电视布局
电视设备的布局必须遵循一些基本准则,以帮助确保它们在大屏幕上可用且有效。请遵循以下提示构建针对电视屏幕优化的布局:
- 使用横向布局构建布局。电视屏幕始终以横向模式显示。
- 将屏幕导航控件放在屏幕的左侧或右侧,并将垂直空间留给内容。
- 使用 片段 创建分为多个部分的 UI。使用诸如
GridView
之类的视图组,而不是ListView
,以更好地利用水平屏幕空间。 - 使用诸如
RelativeLayout
或LinearLayout
之类的视图组来排列视图。这种方法使系统能够根据电视屏幕的大小、对齐方式、纵横比和像素密度调整视图的位置。 - 在布局控件之间添加足够的边距,以避免 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 不提供网络浏览器。您的广告不应尝试启动网络浏览器或重定向到未经批准用于 Android TV 设备的 Google Play 商店内容。
注意:您可以使用 WebView
类登录社交媒体服务。