[中英文对照]android Designing for TV(二) ------ Optimizing Navigation for TV 优化电视导航

An important aspect of the user experience when operating a TV is the direct human interface: a remote control. As you optimize your Android application for TVs, you should pay special attention to how the user actually navigates around your application
when using a remote control instead of a touchscreen.

当人们直接通过TV接口进行操作的时候,一个很重要的问题就是:远距离操作. 如果你要优化对你的android应用程序优化 为一台TV, 你要特别注意到用户是要进行远程操作,而不是进行触摸.

This lesson shows you how to optimize navigation for TV by:

这节课是要告诉你怎么优化TV的导航:

Ensuring all layout controls are D-pad navigable.
确保所有布局控件是 D-pad导航.
Providing highly obvious feedback for UI navigation.
提供一个醒目的导航UI
Placing layout controls for easy access.
配置一个很方便使用的UI控件

Handle D-pad Navigation

处理按键导航

On a TV, users navigate with controls on a TV remote, using either a D-pad or arrow keys. This limits movement to up, down, left, and right. To build a great TV-optimized app, you must provide a navigation scheme in which the user can quickly learn how to
navigate your app using the remote.

在TV上面, 我们用导航来控制TV解决远距离问题(遥控器). 来限制 上下左右的操作, 为了建设一个很棒的电视优化的应用程序，您必须提供一个导航方案中，用户能很快地学会如何浏览你的应用程序使用远程。

When you design navigation for D-pad, follow these guidelines:

当你为遥控器设计一个导航的时候,参照一下原则.

Ensure that the D-pad can navigate to all the visible controls on the screen.
确保方向键可以浏览到屏幕上的所有可见的控件。

For scrolling lists with focus, D-pad up/down keys scroll the list and Enter key selects an item in the list. Ensure that users can select an element in the list and that the list still scrolls when an element is selected.
在列表上滚动焦点, 遥控器上下按键 可以滚动这个列表,并可以选择列表的其中一项, 当某一项被选中的时候,确保用户可以选中它.
Ensure that movement between controls is straightforward and predictable.
确保运动之间的控制是简单的和可预测的。

Android usually handles navigation order between layout elements automatically, so you don't need to do anything extra. If the screen layout makes navigation difficult, or if you want users to move through the layout in a specific way, you can set up explicit
navigation for your controls. For example, for an

android.widget.EditText

, to define the next control to receive focus, use:

安卓通常会自动处理布局元素中的导航顺序，所以对此你不必额外费劲。除非你的布局搞的非常复杂，或者需要在布局元素之间特殊移动，也是可以的。举个例子,现在有一个EditText控件，定义他的下一个获得焦点的控件，这样做:

<EditText android:id="@+id/LastNameField" android:nextFocusDown="@+id/FirstNameField"\>

The following table lists all of the available navigation attributes:

下表列出了所有可用的导航属性:

Attribute	Function
nextFocusDown	Defines the next view to receive focus when the user navigates down.
nextFocusLeft	Defines the next view to receive focus when the user navigates left.
nextFocusRight	Defines the next view to receive focus when the user navigates right.
nextFocusUp	Defines the next view to receive focus when the user navigates up.

To use one of these explicit navigation attributes, set the value to the ID (android:id value) of another widget in the layout. You should set up the navigation order as a loop, so that the last control directs focus back to the first one.

使用其中的一个显式的导航属性,设置其他控件的id.你应该建立导航顺序回路, 你可以创建一个导航顺序.也可以设置后面的控件焦点

Note: You should only use these attributes to modify the navigation order if the default order that the system applies does not work well.

提示:如果系统默认的导航方式无效，只用这些属性修改导航顺序应该就可以满足需求了。

Provide Clear Visual Indication for Focus and Selection

为焦点和选择提供清晰的提示

Use appropriate color highlights for all navigable and selectable elements in the UI. This makes it easy for users to know whether the control is currently focused or selected when they navigate with a D-pad. Also, use uniform highlight scheme across your
application.

Android provides
Drawable State List Resources to implement highlights for selected and focused controls. For example:

使用合适的颜色高亮显示被选中的元素，这样让用户很容易就知道哪个可控元素被选中，另外，建议在整个应用程序中使用统一风格的高亮显示。

安卓系统针对选中或获取焦点的控件使用Drawable State List Resources 实现高亮显示的效果，例如:

res/drawable/button.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

This layout XML applies the above state list drawable to a

Button

:

这个布局XML文件这样应用于一个Button控件:

<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />

Provide sufficient padding within the focusable and selectable controls so that the highlights around them are clearly visible.

获得焦点或选中的控件周围需要留出足够的空隙，这样才能清晰的被识别。

Design for Easy Navigation

设计简易导航

Users should be able to navigate to any UI control with a couple of D-pad clicks. Navigation should be easy and intuitive to understand. For any non-intuitive actions, provide users with written help, using a dialog triggered by a help button or action bar
icon.

Predict the next screen that the user will want to navigate to and provide one click navigation to it. If the current screen UI is very sparse, consider making it a multi pane screen. Use fragments for making multi-pane screens. For example, consider the
multi-pane UI below with continent names on the left and list of cool places in each continent on the right.

用户通过按几次键应该可以被导航到任何一个可视控件，导航应该简单易懂，对于稍显复杂的操作，那就提供个带帮助功能的按钮、图标，用户一点击就弹出一个帮助对话框提示用户。

预测用户可能会切换的下一界面，我们可以提供一个(具有体现用户意图)这样的导航。如果当前界面感觉很稀松，考虑把屏幕分成多面板，可以用Fragment组成带有多个面板的界面。例如:在屏幕左边放一个包含主标题列表的面板，右边就放置对应的包含副标题列表的面板。



The above UI consists of three Fragments -

left_side_action_controls

,

continents

and

places

- as shown in its layout xml file below. Such multi-pane UIs make D-pad navigation easier and make good use of the horizontal
screen space for TVs.

以上界面包含3个部分(Fragment)-left_side_action_controls, continents and places,正如下面xml文件所示,这种布局模式简化了遥控器导航的方式，而且充分利用了电视屏幕是水平的特性。

res/layout/cool_places.xml

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<fragment
android:id="@+id/left_side_action_controls"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginLeft="10dip"
android:layout_weight="0.2"/>
<fragment
android:id="@+id/continents"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginLeft="10dip"
android:layout_weight="0.2"/>

<fragment
android:id="@+id/places"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginLeft="10dip"
android:layout_weight="0.6"/>

</LinearLayout>

Also, notice in the UI layout above action controls are on the left hand side of a vertically scrolling list to make them easily accessible using D-pad. In general, for layouts with horizontally scrolling components, place action controls on left or right
hand side and vice versa for vertically scrolling components.

另外，还要注意在此视图布局上主列表是在垂直滚动组件的左边，这样就比较容易用遥控器控制。通常来说，对于类似上面的垂直滚动组件的布局，把动作控制组件放在手够得着的左边或者右边，而其他的放在相反的位置。