TV 用のナビゲーションを作成する

TV デバイスでは、アプリのナビゲーション コントロールが限定されています。TV アプリ向けの効率的なナビゲーション スキームを作成するには、ナビゲーション コントロールがこのように限定されていることと、アプリを使用するユーザーの認識に限界があることを理解することが重要です。TV 向け Android アプリをビルドする際には、ユーザーがタッチスクリーンではなく TV のリモコンボタンを使用して実際にどのようにアプリをナビゲートするかをよく考える必要があります。

このレッスンでは、効率的な TV アプリのナビゲーション スキームを作成するための最小要件と、アプリにその要件を適用する方法を説明します。

矢印ボタンによるナビゲーションを有効にする

TV デバイスでは、ユーザーはリモコンの矢印ボタンを使用してナビゲーション操作を行います。リモコンでの操作は上、下、左、右方向への移動のみが可能です。TV 向けに最適化された使いやすいアプリをビルドするには、このような限られたコントロールでアプリを操作する方法をユーザーがすぐに習得できるナビゲーション スキームが必要です。

Android のフレームワークでは、レイアウト要素間のナビゲーションが自動的に処理されるため、通常は特に何もする必要はありません。ただし、リモコンの矢印ボタンによるナビゲーションを十分にテストし、問題なく操作できることを確認する必要があります。次のガイドラインに沿って、アプリのナビゲーション システムが TV デバイスのリモコンの矢印ボタンを使用したときに正しく動作するかどうかをテストしてください。

  • ユーザーがリモコンの矢印ボタンを使ってスクリーン上のすべてのコントロールに移動できることを確認する。
  • フォーカスを使用してリストをスクロールする際、リモコンの矢印ボタンでリストをスクロールし、選択キーでリスト内の項目を選択できることを確認する。また、ユーザーがリスト内の要素を選択できること、選択した後もリストがスクロールすることを確認する。
  • コントロール間の切り替え操作がわかりやすく、予測可能であることを確認する。

矢印ボタンによるナビゲーションを編集する

Android のフレームワークでは、レイアウト内にあるフォーカス可能な要素の相対位置に基づいて、矢印ボタンによるナビゲーション スキームが自動的に適用されます。したがって、リモコンの矢印ボタンを使用してアプリ内に生成されたナビゲーション スキームをテストする必要があります。テスト後に、ある特定の方法でユーザーがレイアウト内を移動できるようにしたい場合には、コントロールに対して矢印ボタンによるナビゲーションを明示的にセットアップできます。

注: これらの属性を使ってナビゲーション順序を変更するのは、システムによって適用されたデフォルトの順序がうまく動作しない場合だけにしてください。

TextView レイアウト オブジェクトについて、隣のコントロールがフォーカスを受け取るように定義する方法を次のサンプルコードに示します。

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

次の表は、Android ユーザー インターフェース ウィジェットで使用可能なナビゲーションの属性一覧を示しています。

属性 機能
nextFocusDown ユーザーが下に移動したときにフォーカスを受け取る隣のビューを定義します。
nextFocusLeft ユーザーが左に移動したときにフォーカスを受け取る隣のビューを定義します。
nextFocusRight ユーザーが右に移動したときにフォーカスを受け取る隣のビューを定義します。
nextFocusUp ユーザーが上に移動したときにフォーカスを受け取る隣のビューを定義します。

この明示的なナビゲーション属性のいずれかを使用するには、値をレイアウト内の別のウィジェットの ID(android:id 値)に設定します。ナビゲーションの順序はループとして設定する必要があります。これにより最後のコントロールから最初のコントロールにフォーカスが戻ります。

明確なフォーカスと選択を可能にする

TV デバイスのアプリのナビゲーション スキームに重要なのは、画面上のどのユーザー インターフェース要素にフォーカスがあるのかをユーザーが簡単に判別できるようにすることです。フォーカスされているアイテムが明確でないと、ユーザーはどのアイテムに対してアクションが可能かを判別できず、ストレスを感じてアプリを終了してしまうことになりかねません。同じ理由で、アプリの起動直後やアイドル状態のときも、ユーザーによるアクションが可能なフォーカス状態のアイテムが常に示されている状態にしておくことが重要です。

次に可能なアクションをユーザーが簡単に判別できるように、アプリのレイアウトと実装で色、サイズ、アニメーションや、こういった属性の組み合わせを使用することをおすすめします。アプリ内では、一貫したスキームを使用してフォーカス状態を示すようにしてください。

Android にはドローアブルとしての状態リストリソースが用意されており、フォーカス状態の選択されたコントロールにハイライトを実装できます。次のコードサンプルは、ユーザーがコントロールに移動して選択したことを示すボタンの視覚的な動作を有効にする方法を示しています。

    <!-- 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>
    

1 つ前の状態リストのドローアブルを Button に適用する方法を次のレイアウト XML サンプルコードに示します。

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

周囲のハイライト表示がはっきりと見えるように、フォーカス可能なコントロールや選択可能なコントロールの内部には十分なパディングを確保してください。

TV アプリに適した効率的な選択機能やフォーカスを設計する際の推奨事項については、Android TV 向けデザインをご覧ください。