1page.title=TV 用のナビゲーションを作成する 2page.tags=tv, d-pad, focus 3trainingnavtop=true 4 5@jd:body 6 7<div id="tb-wrapper"> 8<div id="tb"> 9 <h2>学習の目的</h2> 10 <ol> 11 <li><a href="#d-pad-navigation">矢印ボタンによるナビゲーションを有効にする</a></li> 12 <li><a href="#focus-selection">明確なフォーカスと選択を可能にする</a></li> 13 </ol> 14 15</div> 16</div> 17 18<p> 19 TV 端末では、アプリのナビゲーション コントロールが限定されています。TV アプリ向けの効率的なナビゲーション スキームを作成できるかどうかは、これらの限定されたナビゲーション コントロールと、アプリを使用するユーザー側の認識の限界についての理解にかかっています。TV 向け Android アプリをビルドする際には、ユーザーがタッチ スクリーンではなく TV のリモコン ボタンを使用して実際にどのようにアプリをナビゲートするかについて、よく考慮する必要があります。 20</p> 21 22<p> 23 このレッスンでは、効率的な TV アプリのナビゲーション スキームを作成するための最小要件と、アプリにそれらの要件を適用する方法を説明します。 24</p> 25 26 27<h2 id="d-pad-navigation">矢印ボタンによるナビゲーションを有効にする</h2> 28 29<p> 30 TV 端末では、ユーザーはリモコン端末の矢印ボタンを使用して、ナビゲーション操作を行います。この操作では、上、下、左、右方向への移動のみが可能です。TV 向けにこの上なく最適化されたアプリをビルドするには、このような限られたコントロールのみを使用して、ユーザーがアプリのナビゲーション方法を簡単に習得できるナビゲーション スキームを提供する必要があります。 31</p> 32 33<p> 34 Android のフレームワークでは、レイアウト エレメント間のナビゲーションを自動的に処理するため、通常は特に何もする必要はありません。ただし、ナビゲーション上の不備がないか、実際のリモコンの矢印ボタンで十分にテストする必要があります。次のガイドラインに従って、アプリのナビゲーション システムが、TV 端末のリモコンの矢印ボタンを使用した場合に正しく動作するかどうかをテストします。 35</p> 36 37<ul> 38 <li>ユーザーがリモコンの矢印ボタンを使って、スクリーン上のすべてのコントロールに移動できるか。 39 </li> 40 <li>フォーカスを使用してリストをスクロールする際、リモコンの上下ボタンでリストをスクロールし、[選択] キーでリスト内の項目を選択できるか。ユーザーがリスト内のエレメントを選択でき、選択後もリストがスクロールするか。 41 </li> 42 <li>コントロール間の切り替え操作がわかりやすく、予測可能であるか。 43 </li> 44</ul> 45 46 47<h3 id="modify-d-pad-nav">矢印ボタンによるナビゲーションを編集する</h3> 48 49<p> 50 Android のフレームワークでは、レイアウト内にあるフォーカス可能なエレメントの相対位置に基づいて、矢印ボタンによるナビゲーション スキームを自動的に適用します。TV 端末のリモコンの矢印ボタンを使用して、アプリ内に生成されたナビゲーション スキームをテストする必要があります。テスト後に、ある特定の方法でユーザーがレイアウト内を移動できるようにしたい場合には、コントロールに関する矢印ボタンによるナビゲーションを明示的にセットアップできます。 51</p> 52 53<p class="note"> 54 <strong>注意:</strong>システムが適用したデフォルトの順序がうまく動作しない場合にのみ、これらの属性を使用してナビゲーション順序を変更します。 55</p> 56 57<p> 58 次のコード サンプルでは、{@link android.widget.TextView} レイアウト オブジェクトで隣のコントロールがフォーカスを受け取るよう定義する方法を示します。 59</p> 60 61<pre> 62<TextView android:id="@+id/Category1" 63 android:nextFocusDown="@+id/Category2"\> 64</pre> 65 66<p> 67 次の表では、Android ユーザー インターフェース ウィジェットで使用可能なナビゲーションの属性一覧を示します。 68</p> 69 70<table> 71 <tr> 72 <th>属性</th> 73 <th>機能</th> 74 </tr> 75 <tr> 76 <td>{@link android.R.attr#nextFocusDown}</td> 77 <td>ユーザーが下に移動したときにフォーカスを受け取る隣のビューを定義します。</td> 78 </tr> 79 <tr> 80 <td>{@link android.R.attr#nextFocusLeft}</td> 81 <td>ユーザーが左に移動したときにフォーカスを受け取る隣のビューを定義します。</td> 82 </tr> 83 <tr> 84 <td>{@link android.R.attr#nextFocusRight}</td> 85 <td>ユーザーが右に移動したときにフォーカスを受け取る隣のビューを定義します。</td> 86 </tr> 87 <tr> 88 <td>{@link android.R.attr#nextFocusUp}</td> 89 <td>ユーザーが上に移動したときにフォーカスを受け取る隣のビューを定義します。</td> 90 </tr> 91</table> 92 93<p> 94 これらの明示的なナビゲーション属性のいずれかを使用するには、レイアウト内の別のウィジェットの ID （{@code android:id} 値）に対する値を設定します。最後のコントロールが最初のコントロールにフォーカスを戻すようにするには、ナビゲーションの順序をループとしてセットアップする必要があります。 95</p> 96 97 98 99<h2 id="focus-selection">明確なフォーカスと選択を可能にする</h2> 100 101<p> 102 TV 端末でアプリのナビゲーション スキームにとって重要なのは、スクリーン上のどのユーザー インターフェース エレメントにフォーカスがあるのかを、ユーザーが簡単に判別できるようにすることです。フォーカス状態のアイテムが明確でないと、ユーザーはどのアイテムに対してアクションが可能か判別できず、ストレスを感じてアプリを終了してしまうことになります。同じ理由で、アプリが起動直後やアイドル状態にある場合でも、ユーザーのアクションが可能なフォーカス状態のアイテムを常に配置しておく必要があります。 103</p> 104 105<p> 106 アプリのレイアウトと実装においては、色、サイズ、アニメーションや、これらの属性の組み合わせを使用して、ユーザーが次に可能なアクションを簡単に判別できるようにする必要があります。アプリ内では、一貫したスキームを使用してフォーカス状態を示すようにしてください。 107</p> 108 109<p> 110 Android は<a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">ドローアブルとしての状態リスト リソース</a>を提供しており、フォーカス状態の、そして選択済みのコントロールにハイライトを実装できます。次のコード例では、ボタンの視覚的な動作を有効にして、ユーザーがそのコントロールにナビゲートし、選択したことを表示する方法を示します。 111</p> 112 113<pre> 114<!-- res/drawable/button.xml --> 115<?xml version="1.0" encoding="utf-8"?> 116<selector xmlns:android="http://schemas.android.com/apk/res/android"> 117 <item android:state_pressed="true" 118 android:drawable="@drawable/button_pressed" /> <!-- pressed --> 119 <item android:state_focused="true" 120 android:drawable="@drawable/button_focused" /> <!-- focused --> 121 <item android:state_hovered="true" 122 android:drawable="@drawable/button_focused" /> <!-- hovered --> 123 <item android:drawable="@drawable/button_normal" /> <!-- default --> 124</selector> 125</pre> 126 127<p> 128 次のレイアウトの XML サンプル コードは、{@link android.widget.Button} に対する 1 つ前の状態リスト ドローアブルにも該当します。 129</p> 130 131<pre> 132<Button 133 android:layout_height="wrap_content" 134 android:layout_width="wrap_content" 135 android:background="@drawable/button" /> 136</pre> 137 138<p> 139 周囲のハイライトがはっきりと見えるように、フォーカス可能で選択可能なコントロール内には十分なパディングを残してください。 140</p> 141 142<p> 143 TV アプリでの効率的な選択とフォーカスの設計に関する推奨事項については、<a href="{@docRoot}design/tv/patterns.html">TV のパターン</a>を参照してください。 144</p> 145