(三)高级篇____9、设计TV上应用——为TV做导航优化

负责人：cdkd123

主任务原文链接：http://docs.eoeandroid.com/training/tv/optimizing-navigation-tv.html

 

目录

 [隐藏] 

• 1 优化安卓电视导航
  • 1.1 处理按键导航
  • 1.2 为焦点和选择提供清晰的提示
  • 1.3 设计简易导航

优化安卓视图导航

用户操控的是电视，一种重要的体验方式就是方向导航式的人机接口：远程控制.当你为安卓电视优化程序时，你应该特别注意用户是在使用按键而不是触屏。

本课程通过讲述下面几点教你如何为安卓电视优化导航:

• 确保所有的布局都处于按键导航控制之下.
• 为可视化的导航提供清晰的反馈。
• 为更容易的访问而处理布局控制。

处理按键导航

在电视上，用户使用远程方式导航，例如遥控器或键盘，这就限定了(屏幕光标)移动方式只有上、下、左、右。因此，要构建一个优秀的应用，你必须在应用里提供一套用户可以快速学会的导航策略。

当你为遥控器设计导航时，遵循以下几点原则:

• 确保遥控器可以控制界面所有可控元素。
• 用上下键控制滚动列表滚动时，当用确认键选中滚动列表的某项时，确保滚动列表仍然可以滚动。
• 可控元素之间的移动需要简洁和可预测

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

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

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

属性	功能描述
nextFocusDown	定义了下方将获得焦点的控件
nextFocusLeft	定义了左边将获得焦点的控件
nextFocusRight	定义了右边将获得焦点的控件
nextFocusUp	定义了上方将获得焦点的控件

可以使用其他控件的android:id属性的值赋值给这些属性，焦点移动的顺序应该是循环的，这样最后一个控件获取焦点，再次移动，就到第一个了。

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

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

使用合适的颜色高亮显示被选中的元素，这样让用户很容易就知道哪个可控元素被选中，另外，建议在整个应用程序中使用统一风格的高亮显示。 安卓系统针对选中或获取焦点的控件使用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>

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

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

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

设计简易导航

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

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

以上界面包含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>

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