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 實現高亮顯示的效果，例如:
<?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 andplaces - 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.
另外，還要注意在此視圖佈局上主列表是在垂直滾動組件的左邊，這樣就比較容易用遙控器控制。通常來說，對於類似上面的垂直滾動組件的佈局，把動作控制組件放在手夠得着的左邊或者右邊，而其他的放在相反的位置。
