Skip to content

Latest commit

 

History

History
216 lines (152 loc) · 17.9 KB

layouts.md

File metadata and controls

216 lines (152 loc) · 17.9 KB
Raw

创建TV布局

编写:awong1900 - 原文:http://developer.android.com/training/tv/start/layouts.html

TV通常在3米外观看，并且它比大部分Android设备大的多。这类屏不能达到类似小设备的精细细节和颜色的水平。这些因素需要我们在头脑中考虑，并设计出对于TV设备更为有用且好用的应用布局。

这节课程描述了创建有效的TV应用布局的基本要求和实现细节。

用TV布局主题

Android主题能给我们的TV应用布局提供基础框架。对于打算在TV设备上运行的应用activity，我们应该用一款主题改变它的显示。这节课程教我们应该用哪个主题。

Leanback主题

支持TV用户界面的库叫做v17 leanback libarary，它提供了一个标准的TV activity主题，叫做Theme.Leanback。这一主题为TV应用程序建立了一致的视觉风格。强烈推荐在任何用了v17 leanback类的TV应用中使用这个主题。接下来的代码展示如何在应用中对给定的activity使用这个主题：

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

NoTitleBar主题

在手机和平板的Android应用中，标题栏是标准的用户界面元素。但是在TV应用中是不适合的。如果没有用v17 leanback类，我们应该在TV activity使用这个主题来隐去标题栏的显示。接下来的TV应用manifest代码示范了如何应用这个主题来删除标题栏。

<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屏幕总是显示在横屏模式。
  • 把导航控件放置在屏幕的左边或者右边，并且保持内容在垂直区间。
  • 创建分离的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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/base_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:layout_marginTop="27dp"
  android:layout_marginLeft="48dp"
  android:layout_marginRight="48dp"
  android:layout_marginBottom="27dp" >
</LinearLayout>

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

创建方便使用的文本和控件

在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"/>
  • 确保所有的控件是足够大，使人们站在屏幕3米外（更大的屏幕这个距离会更大）可以看清楚。做这个最好的方式是用布局相对大小而不是绝对大小，并且用密度无关像素（dip）单位代替像素单位。例如，设置控件的宽度，用wrap_content代替特定像素值，并且设置控件的边际，用dip代替px值。 更多关于密度无关像素和创建大尺寸屏幕的布局，查看Support Mutiple Screens。

管理TV布局资源

通常的高清晰度TV分辨率是720p，1080i和1080p。假定我们的TV布局对象是一个1920 x 1080像素的屏幕，然后要允许Android系统必要情况下缩减布局元素到720p。通常，降低分辨率（删除像素）不会降低布局的外观质量。但是增加分辨率会降低布局显示的质量，并且会对用户体验造成负面影响。

为了获得最好的图像缩放效果，尽可能提供9-patch图片元素。如果在我们的布局中使用低质量或者小的图片，它们将出现马赛克，模糊或者颗粒，这不是一个好的用户体验。用高质量图片代替它。

更多关于优化布局和大屏幕的资源文件问题，参考Designing for multiple screens。

避免反模式布局

有几种创建布局的方法我们应该避免使用，因为它们不能在TV设备上很好的工作并且导致不好的用户体验。当开发TV布局时，以下一些用户界面是我们应该明确不能使用的。

  • 重用手机和平板布局 - 不要重用没有修改的手机或者平板应用的布局。为其他Android设备开发的布局不适合TV设备，并且TV上布局应该被简化。
  • 状态栏 - 尽管这种用户界面习惯是推荐使用在手机和平板上，但是他不适合TV界面。通常，状态栏选项菜单（或者任何下拉菜单）坚决不要使用，因为用遥控器操作这样的菜单是困难的。
  • ViewPager - 在屏幕之间滑动能很好在手机或平板上工作，但是不要在TV上尝试！ 更多信息关于设计适合TV的布局，参考TV Design指导。

处理大图片

TV设备，像任何其他Android设备，内存有一定限制。如果我们创建的应用中用了很高分辨率的图片或者用了很多高分辨率图片，它可能很快达到内存限制，并且导致内存溢出错误。避免这些类型的问题，遵循以下方法：

提供有效的广告

Android TV的广告必须总是全屏。广告不可以出现在内容的旁边或者覆盖内容。用户应当能用D-pad控制器关闭广告。视频广告在开始时间后的30秒内应当能被关闭。

Android TV不提供网页浏览器。我们的广告不应该尝试去启动网页浏览器或者重定向到Google Play商店。

Note：WebView类用于登入服务器，如Google+和Facebook。

下一节: 创建TV导航 >