Jetpack Compose Glimmer のフォーカス

対応する XR デバイス

このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスのタイプについて →

AI グラス

XR デバイスのタイプについて →

Jetpack Compose Glimmer のすべてのコンポーネントは、AI グラスのタッチパッドのタップやスワイプなど、スマートフォンと同様の標準的な入力 方法で動作するように設計されています。 また、カメラやディスプレイ ボタンなど、AI グラスの ハードウェアに固有の入力コマンドも受け付けます。カメラとディスプレイ ボタンJetpack Compose Glimmer コンポーネントは、必要な入力イベントを自動的に処理します。カスタム コンポーネントの場合は、既存の Compose API（ Modifier.draggable や Modifier.scrollable など）を使用して、特定の インタラクション動作を実装できます。

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

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

（一時的な要件）必要な入力フラグを有効にする:

Jetpack Compose の機能を使用すると、画面の読み込み時に最初のフォーカス可能な要素（多くの場合、画面の左上のアイテム）に初期フォーカスを自動的に設定できます。この機能はまだ開発中であり、デフォルトでは有効になっていません。この機能を有効にするには、アクティビティの onCreate() メソッドで isInitialFocusOnFocusableAvailable フラグを true に設定します。

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

ナビゲーションの動作と順序

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

フォーカスの移動

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

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

• フォーカス + 押下: 選択状態を伝えるために、背景が不透明度 100% の GlimmerTheme.colors.surfaceに設定されています。