Jetpack Compose Glimmer のフォーカス

対象の XR デバイス
このガイダンスは、このようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスの種類について →
AI メガネ
XR デバイスの種類について →

すべての Jetpack Compose Glimmer コンポーネントは、AI グラスのタッチパッドでのタップやスワイプなどの標準的な入力方法で動作するように設計されています。また、AI グラスのハードウェアに固有の下位レベルの入力コマンドにも対応しています。Jetpack Compose Glimmer コンポーネントは、必要な入力イベントを自動的に処理します。カスタム コンポーネントでは、Modifier.draggable や Modifier.scrollable などの既存の Compose API を利用して、特定のインタラクション動作を実装できます。

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

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

ユーザーがアプリ内を移動する際に、フォーカスの移動と順序の変更を行います。

フォーカスの移動

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

フォーカス順序

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

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

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

スクロール コンテナ

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

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

Jetpack Compose Glimmer は、サーフェス、カード、リストアイテムなどの操作可能なコンポーネント全体にデフォルトのフォーカス状態を実装し、ユーザー操作中の一貫性のある明確な視覚的フィードバックを促進します。

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

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

  • フォーカス: フォーカスを伝えるために枠線の幅が広げられます。

  • Focused + Pressed: 選択された状態を示すため、背景が不透明度 100% の GlimmerTheme.colors.surface に設定されます。