ユーザーがアプリを操作する際は、タッチ以外の入力メカニズムを使用することがよくあります。
- デスクトップ環境: ユーザーは、物理的なハードウェア キーボードとトラックパッドを使用して、データを入力します。
- Android TV: ユーザーはD-padを使用してインターフェースを操作します。
- 自動車: ドライバーと乗客はロータリー コントローラを使用して操作します。
- 折りたたみ式デバイスとタブレット: ユーザーがキーボード カバーや外部入力アクセサリを取り付けます。
これらのシナリオでは、アプリは画面上でアクティブなインタラクティブ要素を追跡する必要があります。このアクティブな状態は「フォーカス」と呼ばれます。
直感的なキーボード ナビゲーションを実現するための主な要素
大画面とタッチ以外のデバイスで優れたユーザー エクスペリエンスを提供するには、次の原則に沿ってアプリを設計します。
- 論理的な当初のフォーカス: ユーザーが画面に入ったときに操作する可能性が最も高い要素に、当初のフォーカスを配置します。
- 一貫性のあるナビゲーション順序: 予測可能な 1 次元(Tab)および 2 次元(矢印キーまたは D-pad)のフォーカス移動を提供します。
- フォーカスの永続性: 中断、ダイアログの終了、構成の変更後にフォーカスをシームレスに復元します。
- フォーカス状態を明確にする: 現在フォーカスされている要素を示す、目立つアクセシブルな視覚的合図(フォーカス リングやリップルなど)を表示します。
- 直感的なスクロール: フォーカスされた要素とその周囲のコンテキストが、表示されているビューポートにスムーズにスクロールされるようにします。
フォーカス ガイド
Compose でフォーカスを管理およびカスタマイズする方法については、次のガイドをご覧ください。
- フォーカス ターゲット: インタラクティブ コンポーネントがフォーカス ターゲットになる仕組みと、カスタム コンポーザブルをフォーカス可能にする方法について説明します。
- フォーカス移動順序: 1 次元での外観の順序と 2 次元での空間ナビゲーション、移動パスをカスタマイズする方法について説明します。
- テキスト フィールドのフォーカス: 単一行と複数行のテキスト フィールドで Tab キーと矢印キーがどのように処理されるか、またテレビ IME のインタラクションの仕組みについて説明します。
- フォーカス ターゲットをグループ化する:
focusGroupでコンポーネントをグループ化し、エントリまたは終了のリダイレクトをインターセプトします。 - フォーカスを復元: コンテナ内の以前にアクティブだった子にフォーカスを復元し、ナビゲーション コンポーネントを処理し、画面遷移全体でフォーカスを管理します。
- フォーカス状態を示す: 視覚的な合図とカスタムの表示を適用して、フォーカスされているコンポーネントをハイライト表示します。
- フォーカスに反応する: フォーカスの変化を監視し、
onFocusChangedを使用してフォーカス状態のプロパティをクエリします。 - プログラムでフォーカスをリクエストする: ユーザー アクションや検証エラーに応じて、フォーカスを明示的に移動します。
- フォーカスを移動してクリアする:
FocusManagerを使用して、プログラムでフォーカスを進めたりクリアしたりします。 - フォーカスをキャプチャして解放する: モーダル サブインタラクションのフォーカスをキャプチャして安全に解放します。
- テスト フォーカス ナビゲーション: 1D、2D、テキスト フィールドのキーボード操作を検証する自動 Compose テストを作成します。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- フォーカス ターゲット
- フォーカス移動順序
- テキスト フィールドのフォーカス
- フォーカス ターゲットをグループ化する
- フォーカス ナビゲーションをテストする