构建 TV 布局

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

本课介绍了构建有效 TV 应用布局的最低要求和实现细节。

您还应该阅读 Android TV 设计

使用 TV 布局主题背景

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

Leanback 主题背景

Leanback androidx 库包含 Theme.Leanback,它是 TV Activity 的主题背景,可提供一致的视觉风格。我们强烈建议您将此主题背景用于使用 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 类,则应将此主题背景应用于您的 TV Activity,以禁止显示标题栏。以下代码示例来自一个 TV 应用清单,演示了如何应用此主题背景来移除标题栏的显示:

    <application>
      ...

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

      </activity>
    </application>
    

构建基本 TV 布局

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

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

过扫描

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

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

构建易用的文本和控件

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 英尺远的观众清晰可见(对于尺寸很大的屏幕,这个距离会更远)。要做到这一点,最好的方法是使用布局相对尺寸调整而非绝对尺寸调整,并且使用密度无关像素 (dip) 单位而非绝对像素单位。例如,要设置微件的宽度,请使用 wrap_content 而非像素度量单位;要设置微件的外边距,请使用 dip 值而非 px 值。

如需详细了解密度无关像素以及如何构建布局来适应更大的屏幕尺寸,请参阅支持多种屏幕

管理 TV 布局资源

常见的高清 TV 显示屏分辨率为 720p、1080i 和 1080p。您的 TV 布局应以 1920 x 1080 像素的屏幕尺寸为目标,然后允许 Android 系统在必要时将布局元素分辨率缩小到 720p。一般而言,缩小(移除像素)并不会降低布局的呈现质量。不过,放大却可能会导致显示伪影,这样会使布局质量下降,并对应用的用户体验产生负面影响。

要获得最佳的图片缩放效果,请尽可能以九宫格图片元素的形式提供图片。如果您在布局中提供低质量或小尺寸图片,它们将呈现为像素化、失真或颗粒化,给用户带来不良体验。请改用高质量图片。

如需详细了解如何针对大屏幕优化布局和资源,请参阅面向多种屏幕设计

避免布局反模式

在构建布局时有几种方法应予以避免,因为这些方法在 TV 设备上效果不佳,并且会造成不良的用户体验。具体地讲,在开发 TV 布局时,切勿使用下面这些界面开发方法。

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

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

处理大尺寸位图

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

提供有效广告

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

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

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