Jetpack Compose Glimmer のフォーカス

対応する XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
[
Display Glasses
]
XR デバイスのタイプについて →

Jetpack Compose Glimmer のすべてのコンポーネントは、グラスのタッチパッドでのタップやスワイプなどの標準的な入力方法で動作するように設計されています。また、ディスプレイ グラスのハードウェアに固有の下位レベルの入力コマンドにも対応しています。Jetpack Compose Glimmer コンポーネントは、必要な入力イベントを自動的に処理します。

スクロールやドラッグなどの標準的な操作には、Jetpack Compose Glimmer コンポーネントを使用して、一貫したエクスペリエンスを提供します。ただし、カスタム コンポーネントや カスタムのインタラクション動作の場合は、既存の Compose API（ Modifier.draggable や Modifier.scrollable など）を使用できます。

ポインタ入力とフォーカス

ディスプレイ グラスでは、ポインタ入力がフォーカスに影響する可能性があります。

  • タップ: 要素を有効にするための直接操作。ユーザーが要素を操作すると、フォーカスがその要素に移動します。
  • スワイプ: ナビゲーションとスクロールに使用されます。処理されないスワイプ操作は自動的にフォーカスの移動に変換されるため、ポインタを直接入力しなくても UI をスムーズに移動できます。

ユーザーがアプリ内を移動すると、フォーカスの移動と順序が変わります。

フォーカスの移動

スクロール可能なコンテナでは、タッチパッドをスワイプするとフォーカスが連続して移動します。ボタンの行などの個別の要素の場合、スワイプするたびにフォーカスが 1 つの要素ずつ移動します。

フォーカスの順序

Jetpack Compose と同様に、Jetpack Compose Glimmer では 1 次元のフォーカス検索を使用します。フォーカス移動の順序について詳しくは、フォーカス移動の順序 を変更するをご覧ください。

最初にフォーカスされるアイテムを変更するには、最上位の Modifier.focusGroup()を追加し、カスタムのonEnter focusPropertyを指定します。

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        // Prevent focus from exiting the group
        cancelFocusChange()
    }
}
.focusGroup()

スクロール コンテナ

最適なユーザー エクスペリエンスを実現するには、リストなどのスクロール コンテナを画面上の主要なコンポーネントにする必要があります。ナビゲーションの混乱を防ぎ、スムーズで予測可能なフォーカスの移動を促進するため、ボタンなどの他のインタラクティブな要素のすぐ上または下にスクロール可能なリストを配置しないでください。

デフォルトのフォーカス状態

Jetpack Compose Glimmer は、サーフェス、カード、リストアイテムなど、インタラクティブなコンポーネント全体でデフォルトのフォーカス状態を実装し、ユーザー インタラクション中の一貫した明確な視覚的フィードバックを促進します。

図 1.Jetpack Compose Glimmer の 3 つのフォーカス状態。アウトラインベースの視覚的フィードバックを使用して区別されます。

  • デフォルト: ボタンの背景色は GlimmerTheme.colors.surfaceから派生し、メイン コンテンツはそのサーフェスのコンテンツ 色を計算します。

  • フォーカス: フォーカスを伝えるために枠線の太さが広くなっています。

  • フォーカス + 押下: 背景は GlimmerTheme.colors.surfaceに設定され、不透明度が高くなっているため、 選択状態であることがわかります。