创建TV导航

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

TV设备为应用程序提供一组有限的导航控件。为我们的TV应用创建有效的导航方案取决于理解这些有限的控件和用户操作应用时的限制。因此当我们为TV创建Android应用时,额外注意用户是用遥控器按键,而不是用触摸屏导航我们的应用程序。

这节课解释了创建有效的TV应用导航方案的最低要求和如何对应用程序使用这些要求。

使用D-pad导航

在TV设备上,用户用遥控器设备的方向手柄(D-pad)或者方向键去控制控件。这类控制器限制为上下左右移动。为了创建最优化的TV应用,我们必须提供一个用户能快速学习如何使用有限控件导航的方案。

Android framework自动地处理布局元素之间的方向导航操作,因此我们不需要在应用中做额外的事情。不管怎样,我们也应该用D-pad控制器实际测试去发现任何导航问题。接下来的指引是如何在TV设备上用D-pad测试应用的导航。

  • 确保用户能用D-pad控制器导航所有屏幕可见的控件。
  • 对于滚动列表上的焦点,确保D-pad上下键能滚动列表,并且确定键能选择列表中的项。检查用户可以选择列表中的元素并且选中元素后仍可以滚动列表。
  • 确保在控件之间切换是直接的和可预测的。

修改导航的方向

基于布局元素中可选中的元素的相对位置,Android framwork自动应用导航方向方案。我们应该用D-pad控制器测试生成的导航方案。在测试后,如果我们想规定用户以一个特定的方式在布局中移动,我们可以在控件中设置明确的导航方向。

Note: 如果系统使用的默认顺序不是很好,我们应该仅用这些属性去修改导航顺序。

接下来的示例代码展示如何为TextView布局控件定义下一个控件焦点。

  1. <TextView android:id="@+id/Category1"
  2. android:nextFocusDown="@+id/Category2"\>

接下来的列表展示了用户接口控件所有可用的导航属性。

属性 功能
nextFocusDown 定义用户按下导航时的焦点
nextFocusLeft 定义用户按左导航时的焦点
nextFocusRight 定义用户按右导航时的焦点
nextFocusUp 定义用户按上导航时的焦点

去使用这些明确的导航属性,设置另一个布局控件的ID值(android:id值)。我们应该设置导航顺序为一个循环,因此最后一个控件返回至第一个焦点。

提供清楚的焦点和选中状态

在TV设备上的应用导航方案的成功是基于用户如何容易的决定屏幕上界面元素的焦点。如果我们不提供清晰的焦点项显示(和用户能操作的选项),他们会很快泄气并退出我们的应用。同样的原因,重要的是当我们的应用开始或者任何无操作的时间中,总是有焦点项可以立即操作。

我们的应用布局和实现应该用颜色,大小,动画或者它们组在一起来帮助用户容易地决定下一步操作。在应用中用一致的焦点显示方案。

Android提供Drawable State List Resources来实现高亮选中的焦点。接下来的示例代码展示了如何为用户导航到控件并选择它时使用视觉化按钮显示:

  1. <!-- res/drawable/button.xml -->
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  4. <item android:state_pressed="true"
  5. android:drawable="@drawable/button_pressed" /> <!-- pressed -->
  6. <item android:state_focused="true"
  7. android:drawable="@drawable/button_focused" /> <!-- focused -->
  8. <item android:state_hovered="true"
  9. android:drawable="@drawable/button_focused" /> <!-- hovered -->
  10. <item android:drawable="@drawable/button_normal" /> <!-- default -->
  11. </selector>

接下来的XML示例代码对按钮控件应用了上面的按键状态列表drawable:

  1. <Button
  2. android:layout_height="wrap_content"
  3. android:layout_width="wrap_content"
  4. android:background="@drawable/button" />

确保在可定为焦点的和可选中的控件中提供了充分的填充,以便围绕它们的高亮是清楚的。

更多建议关于TV应用中设计有效的选中和焦点,看Patterns of TV


下一节: 创建TV播放应用 >