Skip to content

Most visited

Recently visited

navigation

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

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

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

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

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

Android のフレームワークでは、レイアウト エレメント間のナビゲーションを自動的に処理するため、通常は特に何もする必要はありません。ただし、ナビゲーション上の不備がないか、実際のリモコンの矢印ボタンで十分にテストする必要があります。次のガイドラインに従って、アプリのナビゲーション システムが、TV 端末のリモコンの矢印ボタンを使用した場合に正しく動作するかどうかをテストします。

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

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

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

次のコード サンプルでは、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>

次のレイアウトの XML サンプル コードは、Button に対する 1 つ前の状態リスト ドローアブルにも該当します。

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

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

TV アプリでの効率的な選択とフォーカスの設計に関する推奨事項については、TV のパターンを参照してください。

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

WeChat で Google Developers をフォローする

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)