Leanback 界面工具包中的布局

使用 Compose 构建更出色的应用
使用适用于 Android TV OS 的 Jetpack Compose,只需极少的代码即可创建精美的界面。
<ph type="x-smartling-placeholder"></ph> Compose for TV →

电视屏幕的观看距离通常约为 10 英尺,虽然远远大于大多数 与其他 Android 设备的显示屏相比,电视屏幕无法提供相同级别的 呈现细节和颜色这些因素要求您使用 TV 设备,以打造实用且愉悦的用户体验。

使用 TV 布局主题背景

Android 主题可以为 TV 应用中的布局。使用主题修改应用 activity 的显示, 主要用于在 TV 设备上运行。本部分介绍了应使用哪些主题。

Leanback 主题背景

androidx.leanback 库包含 Theme.Leanback,它是 TV activity 的主题, 具有一致的视觉风格。将此主题用于构建的任何 TV 应用 AndroidX Leanback 类。以下代码示例展示了如何将此主题应用于 活动:

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

NoTitleBar 主题背景

标题栏是手机和平板电脑上 Android 应用的标准界面元素, 不适合 TV 应用。如果您使用的不是 AndroidX Leanback 类,请将 为您的 TV activity 添加 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 TV 不相关。

如果您正在构建一款在 Android 移动设备和 Android TV 之间使用共享代码库的应用,您可以运行 可能会因为主题设置而面临一些挑战AppCompatActivity 和各种 AppCompat widget 要求您使用 Theme.AppCompat,而 您希望您使用 Leanback 界面工具包 fragment FragmentActivityTheme.Leanback

如果您需要对 Android 移动设备和 Android TV 使用相同的基本 activity,或者您想要使用 基于 AppCompat widget 创建的自定义视图,例如 AppCompatImageView, 请使用 Theme.AppCompat.Leanback 主题。这些主题为您提供了 并且还提供了 Leanback 专用的值。AppCompat

您可以自定义 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 设备的布局必须遵循一些基本准则,以帮助确保它们易于使用 。请按照以下提示构建针对 TV 屏幕优化的布局:

  • 构建屏幕方向为横向的布局。TV 屏幕始终以横屏模式显示。
  • 将屏幕导航控件置于屏幕的左侧或右侧,并保存 垂直放置内容
  • 使用 fragment 创建分成若干部分的界面。使用如下视图群组: GridView 代替 ListView 以便更好地利用屏幕的水平空间
  • 使用如下视图群组: RelativeLayoutLinearLayout 来排列视图此方法让系统能够根据大小调整视图的位置, TV 屏幕的对齐方式、宽高比和像素密度。
  • 在布局控件之间添加足够的外边距,以避免造成界面杂乱无章。

过扫描

由于电视标准的演变,电视布局也有一些独特的要求, 全屏显示图片。为此,TV 设备可能会裁剪应用的外边缘 以确保填满整个显示屏此行为通常称为 过扫描

在过扫描安全范围内,放置必须始终对用户可见的屏幕元素 区域。将左右边缘添加 5% 的外边距 48 dp,在顶部和底部添加 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 而不是像素度量单位,并将 对于 widget,请使用 dp 值而不是 px 值。

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

管理 TV 布局资源

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

不同的屏幕尺寸和分辨率具有不同的像素密度。为了保持 各种屏幕尺寸、分辨率和像素密度的界面,您可以使用 密度无关像素 (dp),而不是像素。不同电视面板的屏幕像素密度 具体解决方法如下。

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

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

要避免的布局模式

有几种构建布局的方法不起作用 。下面介绍了一些 在开发 TV 布局时应避免。

  • 重复使用手机或平板电脑布局:请勿重复使用手机或平板电脑布局 未经修改的平板电脑应用。专为其他 Android 设备外形规格构建的布局 非常适合 TV 设备,必须进行简化以便在电视上操作。
  • 使用 ActionBar:建议使用操作栏 但不适用于电视界面。使用 强烈建议不要在 TV 应用中使用操作栏选项菜单或任何下拉菜单, 也更难以用遥控器在此类菜单中进行导航
  • 使用 ViewPager:在手机或平板电脑之间滑动切换效果非常好。 但请勿在电视上执行此操作!

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

处理大尺寸位图

与其他 Android 设备一样,电视设备的内存有限。如果您构建自己的 应用布局中采用高分辨率图片,或在操作中使用许多高分辨率图片 它可能很快遇到内存限制,导致内存不足错误。大多数 我们建议您使用 Glide 库提取、解码和显示应用中的位图。如需详细了解如何获取 使用位图时的性能最佳,请参阅我们的常规 Android 图形最佳实践

提供有效广告

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

Android TV 不提供网络浏览器。您的广告不得试图 打开网络浏览器或重定向到 Google Play 商店中 已获准用于 Android TV 设备。

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

其他资源

专为 TV 设计