创建TV的布局文件 · Android Training官方培训课程中文版

> 编写:[awong1900](https://github.com/awong1900) - 原文:[http://developer.android.com/training/tv/start/layouts.html](http://developer.android.com/training/tv/start/layouts.html) TV通常在3米外观看，并且它比大部分安卓设备大的多。TV屏幕没有达到类似小设备的精细细节和颜色的水平。这些因素需要你在头脑中考虑，并设计出对于TV设备更为有用且好的用户体验的应用布局。这节课程描述了创建有效的TV应用布局的基本要求和实现细节。 ### 用TV布局主题安卓主题能给你的TV应用布局提供基础框架。对于打算在TV设备上运行的应用[activity](# "An activity represents a single screen with a user interface.")，你应该用一款主题改变它的显示。这节课程教你应该用哪个主题。 ### Leanback主题支持TV用户界面的库叫做[v17 leanback libarary](http://developer.android.com/tools/support-library/features.html#v17-leanback)，它提供了一个标准的TV [activity](# "An activity represents a single screen with a user interface.")主题，叫做`Theme.Leanback`。这一主题为TV应用程序建立了一致的视觉风格。强烈推荐在任何用了v17 leanback类的TV应用中使用这个主题。接下来的代码展示如何在应用中对给定的[activity](# "An activity represents a single screen with a user interface.")使用这个主题： ~~~ <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback"> ~~~ ### NoTitleBar主题在手机和平板的安卓应用中，标题栏是标准的用户界面元素。但是在TV应用中是不适合的。如果没有用v17 leanback类，你应该在TV [activity](# "An activity represents a single screen with a user interface.")使用这个主题来隐去标题栏的显示。接下来的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](http://developer.android.com/guide/components/fragments.html)，并且用框架如[GridView](http://developer.android.com/reference/android/widget/GridView.html)代替[ListView](http://developer.android.com/reference/android/widget/ListView.html)获得屏幕水平方向更好的使用。 - 用框架如[RelativeLayout](http://developer.android.com/reference/android/widget/RelativeLayout.html)或者[LinearLayout](http://developer.android.com/reference/android/widget/LinearLayout.html)来排列视图。基于对齐方式，纵横比，和电视屏幕的像素密度，这个方法允许系统调整视图大小的位置。 - 在布局控件之间添加足够的边际，以避免成为一个杂乱的UI。 ### Overscan 由于TV标准的演进，TV的布局有一个独特的需求是总是希望给观众显示全屏图像。因为这个原因，TV设备可能剪掉应用布局的外边缘去确保整个显示器被填满。这种行为通常简称为overscan。避免屏幕元素由于overscan被剪掉，可以在布局所有的边缘增加总共10%的边际。这换算为在[activity](# "An activity represents a single screen with a user interface.")的基础布局上左右边缘留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](http://developer.android.com/reference/android/support/v17/leanback/app/BrowseFragment.html)或者相关控件，因为那些布局已经包含了overscan安全边际。 ### 创建方便使用的文本和控件在TV应用布局中的文本和控件应该在一定距离外是容易查看和导航的。接下来的技巧是确保你的用户界面元素在一定距离外更容易查看。 - 分解文本为小块，用户可以快速浏览。 - 在暗背景下用亮色文字。这种风格在TV中更容易阅读。 - 避免轻字体或者字体既窄且有非常宽阔的笔触效果。用简单的sans-serif字体并且去掉锯齿效果以增加可读性。 - 用安卓标准的字体大小。 ~~~ <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](http://developer.android.com/guide/practices/screens_support.html)。 ### 管理TV布局资源通常的高清晰度TV分辨率是720p，1080i，1080p。假定你的TV布局对象是一个1920 x 1080像素的屏幕，然后要允许安卓系统必要情况下缩减布局元素到720p。通常，降低分辨率（删除像素）不会降低布局的外观质量。但是增加分辨率会降低布局显示的质量，并且会对用户体验造成负面影响。为了获得最好的图像缩放效果，尽可能提供[9-patch](http://developer.android.com/tools/help/draw9patch.html)图片元素。如果在你的布局中使用低质量或者小的图片，它们将出现马赛克，模糊或者颗粒，这不是一个好的用户体验。用高质量图片代替它。更多关于优化布局和大屏幕的资源文件问题，参考[Designing for multiple screens](http://developer.android.com/training/multiscreen/index.html)。 ### 避免反模式布局有几种创建布局的方法你应该避免使用，因为它们不能在TV设备上很好的工作并且导致不好的用户体验。当开发TV布局时，以下一些用户界面是你应该明确不能使用的。 - **重用手机和平板布局** - 不要重用没有修改的手机或者平板应用的布局。为其他安卓设备的布局不适合TV设备，并且TV上应该简化操作。 - **ActionBar** - 尽管这种用户界面习惯是推荐使用在手机和平板上，但是他不适合TV界面。通常，状态栏选项菜单（或者任何下拉菜单）坚决不要使用，因为用遥控器操作这样的菜单是困难的。 - **ViewPager** - 在屏幕之间滑动能很好在手机或平板上工作，但是不要在TV上尝试！更多信息关于设计适合TV的布局，参考[TV Design](http://developer.android.com/design/tv/index.html)指导。 ### 处理大图片 TV设备，像任何其他安卓设备，内存有一定限制。如果你创建的应用中用了很高分辨率的图片或者用了很多高分辨率图片，它可能很快达到内存限制，并且导致内存溢出错误。避免这些类型的问题，遵循以下方法： - 仅当图片显示在屏幕时才加载。例如，当在[GridView](http://developer.android.com/reference/android/widget/GridView.html)或者[Gallery](http://developer.android.com/reference/android/widget/Gallery.html)中显示多个图片时，仅当[getView()](http://developer.android.com/reference/android/widget/Adapter.html#getView(int, android.view.View, android.view.ViewGroup))在视图的[Adapter](http://developer.android.com/reference/android/widget/Adapter.html)中被调用时才加载图片。 - 在[Bitmap](http://developer.android.com/reference/android/graphics/Bitmap.html)视图中调用[recycle()](http://developer.android.com/reference/android/graphics/Bitmap.html#recycle())不再需要。 - 对存储在内存中[集合](http://developer.android.com/reference/java/util/Collection.html)中的位图对象使用[弱引用](http://developer.android.com/reference/java/lang/ref/WeakReference.html)。 - 如果你从网络上获取图片，用[AsyncTask](http://developer.android.com/reference/android/os/AsyncTask.html)去操作并且存储它们在设备上以方便更快的存取。绝对不要在应用的主线程操作网络传输。 - 当下载大图片时，降低图片到合适的尺寸，否则，下载图片本身可能导致内存溢出问题。更多信息关于获得最好的图片操作性能，参考 [Displaying Bitmaps Efficiently](http://developer.android.com/training/displaying-bitmaps/index.html)。 ### 提供有效的广告安卓TV的广告必须总是全屏。广告不可以出现在内容的旁边或者覆盖内容。用户应当能用D-pad控制器关闭广告。视频广告在开始时间后的30秒内应当能被关闭。安卓TV不提供网页浏览器。你的广告不应该尝试去启动网页浏览器或者重定向到Google Play Store。 > **Note**：你能用[WebView](http://developer.android.com/reference/android/webkit/WebView.html)类登入服务器，如Google+和Facebook。 [下一节: 设计TV导航](#)