Leanback 界面工具包中的布局

借助 Compose 打造更优质的应用
使用 Jetpack Compose for Android TV OS,以最少的代码创建精美的界面。

电视屏幕的通常观看距离约为 10 英尺,尽管其尺寸比大多数其他 Android 设备显示屏大得多,但电视屏幕不能提供与小型设备屏幕相同程度的细节和色彩表现。鉴于这些因素,您在设计应用布局时必须谨记它是用于 TV 设备这一点,才能创造出实用并且令人愉悦的用户体验。

使用 TV 布局主题背景

Android 主题背景可以为 TV 应用的布局提供基础。使用主题背景来修改想要在 TV 设备上运行的应用 activity 的显示。本部分说明了应使用哪些主题背景。

Leanback 主题背景

已弃用的 androidx.leanback 库包含 Theme.Leanback,它是 TV activity 的主题背景,可为 Leanback 界面工具包应用提供一致的视觉风格。对于使用 AndroidX Leanback 类构建的任何 TV 应用,请使用此主题背景。以下代码示例展示了如何将此主题背景应用于 activity:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

NoTitleBar 主题背景

标题栏是手机和平板电脑上 Android 应用的标准界面元素,但它并不适合 TV 应用。如果您未使用 AndroidX Leanback 类,请将 NoTitleBar 主题背景应用于您的 TV activity,以禁止显示标题栏。以下代码示例来自一个 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 移动设备和 Android TV 之间共享代码库的应用,可能会因主题背景而遇到一些挑战。AppCompatActivity 和各种 AppCompat widget 要求您使用 Theme.AppCompat,而 Leanback 界面工具包 fragment 则要求您使用 FragmentActivityTheme.Leanback

如果您需要为 Android 移动设备和 Android TV 使用相同的基本 activity,或者想要使用基于 AppCompat widget(例如 AppCompatImageView)的自定义视图,请使用 Theme.AppCompat.Leanback 主题。这些主题背景不仅提供 AppCompat 中的所有主题背景,还提供 Leanback 特有的值。

您可以像自定义任何其他主题一样自定义 Theme.AppCompat.Leanback 主题。例如,如果您想更改特定于 Leanback 界面工具包 OnboardingSupportFragment 的值,请执行类似以下操作:

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

构建基本 TV 布局

TV 设备的布局必须遵循一些基本准则,以帮助确保其在大屏幕上的易用性和有效性。请按照以下提示来构建针对 TV 屏幕优化的布局:

  • 构建屏幕方向为横向的布局。TV 屏幕始终以横屏模式显示。
  • 将屏幕导航控件置于屏幕的左侧或右侧,将节省下的垂直空间留给内容。
  • 利用 fragment 创建划分为若干部分的界面。使用 GridView 等视图组(而非 ListView),以更充分地利用屏幕的水平空间。
  • 利用 RelativeLayoutLinearLayout 等视图组来布置视图。此方法让系统能够根据 TV 屏幕的尺寸、对齐、宽高比和像素密度来调整视图的位置。
  • 在布局控件之间添加足够的外边距,以避免造成界面杂乱无章。

过扫描

TV 布局有一些独特的要求,因为 TV 标准不断发展演变,以便向观众呈现全屏画面。为此,TV 设备可能会裁剪应用布局的外边缘以确保填满整个显示屏。此行为通常称为“过扫描”。

将必须始终对用户可见的屏幕元素放置在过扫描安全区域内。应在布局的左右边缘添加 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 或相关微件),请勿对布局应用过扫描外边距,因为这些布局已经纳入了过扫描安全外边距。

构建易用的文本和控件

请按照以下提示让 TV 应用中的文本和控件更易于从一定距离处进行查看:

  • 将文本拆分为可让用户快速浏览的小片段。
  • 在深色背景上使用浅色文本。此风格更便于用户查看 TV 上的内容。
  • 避免使用轻量级字体,或者很细的笔划和很粗的笔划兼有的字体。 使用简单的 sans-serif 字体和抗锯齿处理来提高可读性。
  • 使用 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 值。

如需详细了解密度无关像素以及如何构建布局来适应更大的屏幕尺寸,请参阅屏幕兼容性概览

管理 TV 布局资源

与其他所有 Android 设备一样,电视具有不同的屏幕尺寸,并支持不同的分辨率,包括但不限于 720p、1080p 和 4K。确保您的应用支持不同的屏幕尺寸

不同的屏幕尺寸和分辨率具有不同的像素密度。为了在不同屏幕尺寸、分辨率和像素密度下保持界面外观一致,请使用密度无关像素 (dp) 而不是像素来定义界面尺寸。下表列出了不同电视面板分辨率对应的屏幕像素密度。

面板分辨率 屏幕像素密度
720p tvdpi
1080 xhdpi
4K xxxhdpi
如需了解详情,请参阅支持不同的像素密度

如需详细了解如何针对大屏幕优化布局和资源,请参阅屏幕兼容性概览

应避免的布局模式

在构建布局时有几种方法在 TV 设备上效果不佳。在开发 TV 布局时,应避免使用下面这些界面开发方法。

  • 重用手机或平板电脑布局:请勿不加修改地重用手机或平板电脑应用的布局。专为其他 Android 设备类型构建的布局不太适合 TV 设备,必须针对 TV 操作进行相应的简化。
  • 使用 ActionBar:虽然建议在手机和平板电脑上使用操作栏,但它并不适合 TV 界面。我们强烈建议不要为 TV 应用使用操作栏选项菜单或任何下拉菜单,因为使用遥控器在此类菜单中进行导航很困难。
  • 使用 ViewPager:滑动切换屏幕在手机或平板电脑上可能效果极佳,但切勿在电视上做此尝试!

如需详细了解如何设计适合 TV 的布局,请参阅 TV 设计指南。

处理大尺寸位图

与其他 Android 设备一样,TV 设备的内存也有限。如果您在构建应用布局时使用了分辨率很高的图片,或者在应用的操作方面使用了许多高分辨率图片,可能很快就会遭遇内存限制,并引发内存不足错误。在大多数情况下,我们建议您使用 Glide 库来获取、解码和显示应用中的位图。如需详细了解如何在使用位图时获得最佳性能,请参阅普遍适用的 Android 图形最佳实践

提供有效广告

对于起居室环境,我们建议您使用全屏且可在 30 秒内关闭的视频广告解决方案。Android TV 上的广告功能(如关闭按钮和点进次数)必须能使用方向键而非通过触摸进行访问。

Android TV 不提供网络浏览器。您的广告不得试图启动网络浏览器或者重定向到未经批准用于 Android TV 设备的 Google Play 商店内容。

注意:您可以使用 WebView 类登录社交媒体服务。

其他资源

针对电视设计应用