Compose にフォーカスする

ユーザーがアプリを操作する際は、画面上の要素をタップすることがよくあります。ただし、これが唯一のインタラクション形式ではありません。その他のインタラクションには、次のようなものがあります。

• ChromeOS ユーザーは、物理キーボードの矢印キーを使用して画面を操作することがあります。
• ゲームをプレイしているユーザーは、接続したゲーム コントローラを使用してゲームのメニューを操作できます。
• モバイルアプリのユーザーは、画面キーボードを使用して要素を切り替えることがあります。

このような場合、どのコンポーネントがアクティブであるかを追跡することが重要です。これをフォーカスと呼びます。画面上の要素は論理的な順序でフォーカスされるべきです。Jetpack Compose には、ほとんどの場合に正しいデフォルトのフォーカス処理方法があります。ただし、場合によっては、このデフォルトの動作を変更する必要があります。

以下のページでは、アプリでフォーカスを使用する方法について説明します。

• フォーカス移動の順序を変更する: デフォルトのフォーカス順序を変更する方法、フォーカス グループを追加する方法、コンポーザブルのフォーカスを無効にする方法について説明します。
• フォーカス動作を変更する: フォーカスのリクエスト、キャプチャ、リリース方法と、画面に入ったときにフォーカスをリダイレクトする方法について説明します。
• フォーカスに対応する: フォーカスの変化に対応する方法、要素に視覚的な合図を追加する方法、要素のフォーカス状態を把握する方法について説明します。

デフォルトのフォーカス移動順序

フォーカス検索のデフォルトの動作について説明する前に、階層内のレベルの概念を理解しておくことが重要です。一般的に、2 つの Composables が同じレベルにあるのは、それらが兄弟関係にある場合、つまり同じ親を持つ場合です。たとえば、Column 内の要素は同じレベルにあります。レベルを上げるとは、子からその Composable 親に移動することです。同じ例で言えば、アイテムからそれを含む Column に戻ることです。レベルを下げる場合は、Column 親から含まれているアイテムに移動します。このコンセプトは、他の Composables を含むことができるすべての Composable に適用できます。

UI ナビゲーションは複数の方法で行うことができます。そのうちのいくつかは、ほとんどのユーザーがすでに知っているものです。

• タブ: 1 次元ナビゲーション。前または後に移動します。TAB ナビゲーションでは、階層内の次の要素または前の要素にフォーカスが移動します。デフォルトでは、Compose は Composables の宣言に従います。一方向ナビゲーションは、キーボードの tab キーまたはスマートウォッチの回転ベゼルを使用して実現できます。この種のフォーカス検索では、画面上の各要素が訪問されます。
• 矢印キー: 2 次元ナビゲーション。左、右、上、または下に移動します。2 次元ナビゲーションは、テレビの D-Pad またはキーボードの矢印キーで実現できます。トラバーサル順序では、特定のレベルの要素のみが訪問されます。十字キーの中央ボタンと戻るボタンを使用して、別のレベルに移動したり、戻ったりできます。

次のスクリーンショットを例に取ります。4 つのボタンが縦に並んでおり、表示順にすべてを切り替えたいとします。Jetpack Compose は、この動作をすぐに利用できるようにしています。このツールキットでは、tab キーを使用して、コンポーザブルを上から下へ垂直方向に順番に移動したり、上または下矢印キーを押してフォーカスを移動したりできます。

別の種類のレイアウトに切り替えると、少し変更されます。レイアウトに複数の列がある場合（下のレイアウトなど）、Jetpack Compose を使用すると、コードを追加しなくても列間を移動できます。tab キーを押すと、Jetpack Compose は宣言順に（First から Fourth まで）アイテムを自動的にハイライト表示します。キーボードの矢印キーを使用すると、選択したものが 2D 空間で目的の方向に移動します。

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables は 2 つの Rows で宣言され、フォーカス要素は 1 番目から 4 番目まで順番に宣言されます。tab キーを押すと、フォーカスは次の順序で移動します。

次のスニペットでは、Rows ではなく Columns でアイテムを宣言しています。

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

このレイアウトでは、画面の先頭から末尾に向かって、上から下へ垂直方向にアイテムが配置されます。

前の 2 つのサンプルは、一方向ナビゲーションでは異なりますが、2 次元ナビゲーションでは同じエクスペリエンスを提供します。通常、これは画面上のアイテムが両方の例で同じ地理的配置になっているためです。最初の Column から右に移動すると、フォーカスは 2 番目の Column に移動します。最初の Row から下に移動すると、フォーカスは下の Row に移動します。