Building Layouts for TV

https://developer.android.google.cn/training/tv/start/layouts.html

TV 设备比手机大很多,但颜色等不如手机,这些因素都影响着布局。

Use Layout Themes for TV

Leanback 主题

Android 主题能给我们的TV应用布局提供基础框架, 使用 Leanback 支持包的 Theme.Leanback 主题,这一主题为TV应用程序建立了一致的视觉风格。推荐使用。

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

NoTitleBar theme

Title Bar 是手机上的东西,TV 上适用,如果不适用 Leanback theme,那么可以使用 NoTitleBar 主题来去除.

<application>
  ...

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

  </activity>
</application>

Build Basic TV Layouts

TV 设备的布局应该遵循一些基本的指引确保它们在大屏幕下是可用的和有效率的。遵循这些技巧去创建最优化的 TV 横屏布局。

  • 创建横屏布局。TV屏幕总是显示在横屏模式。
  • 把导航控件放置在屏幕的左边或者右边,并且保持内容在垂直区间。
  • 创建分离的UI,用Fragment,并且用如 GridView 代替 ListView 来更好的使用横向空间
  • 用如RelativeLayout或者LinearLayout来排列视图。基于对齐方式,纵横比,和电视屏幕的像素密度,这个方法允许系统调整视图大小的位置。
  • 在布局控件之间添加足够的边际,以避免成为一个杂乱的UI。

OverScan

由于TV标准的演进,TV的布局有一个独特的需求是总是希望给观众显示全屏图像。因为这个原因,TV设备可能剪掉应用布局的外边缘去确保整个显示器被填满。这种行为通常简称为overscan。

避免屏幕元素由于overscan被剪掉,可以在布局所有的边缘增加总共10%的边际。这换算为在activity的基础布局上左右边缘留48dp的边际和在上下留27dp的边际。接下来的布局例子展示了如何在TV应用根布局上设置这些边际。

<?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>

如果我们正在使用v17 leanback类,不要在布局中留overscan边际,诸如BrowseFragment或者相关控件,因为那些布局已经包含了overscan安全边际。

Build Useable Text and Controls

字体要大,颜色要脱出,内容不要太密集。建议使用相对布局、dp 来使之适配。

Manage Layout Resources for TV

通常的高清晰度TV分辨率是720p,1080i和1080p。以1080为标准,让系统自动降级来适配720p。降级适配不会影响质量,反之影响。为了更好的缩放效果,多用9-patch

Avoid Layout Anti-Patterns

几个反例注意避免

  1. 重用手机和平板布局 - 不要重用没有修改的手机或者平板应用的布局。为其他Android设备开发的布局不适合TV设备,并且TV上布局应该被简化。
  2. 状态栏 - 尽管这种用户界面习惯是推荐使用在手机和平板上,但是他不适合TV界面。通常,状态栏选项菜单(或者任何下拉菜单)坚决不要使用,因为用遥控器操作这样的菜单是困难的。
  3. ViewPager - 在屏幕之间滑动能很好在手机或平板上工作,但是不要在TV上尝试!

Handle Large Bitmaps

和手机一样。

Provide Effective Advertising

提供有效的广告?广告必须总是全屏,不可以出现在内容的旁边或者覆盖内容。应当能通过控制器关闭,视频广告在开始30秒后应当能被关闭。TV 不提供网页浏览器,不应当尝试去启动网页浏览器或跳转到 Google Play.