Jetpack Compose Glimmer のサーフェス

該当する XR デバイス

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

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

ディスプレイメガネ

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

Jetpack Compose Glimmer の surface コンポーネントは、ボタンやカードなどのコンポーネントの個別の視覚領域または物理的な境界を表す基本的な構成要素です。

サーフェスは、次の視覚的および物理的なプロパティを担当します。

クリッピング: 子要素を指定した形状にクリップします。
枠線: 内側の枠線を描画して、コンポーネントの境界を強調します。フォーカスされている場合は、フォーカスハイライト付きの太い枠線を描画します。
背景: サーフェス領域に背景色を適用します。
奥行き効果: コンポーネントの状態（デフォルトとフォーカスなど）に基づいて DepthEffect シャドウをレンダリングします。
コンテンツの色: サーフェス内のテキストとアイコンの色を指定します。デフォルトでは背景色から計算されます。
インタラクションの状態: サーフェスが押されると押されたオーバーレイを描画しフォーカスされている場合はハイライト付きの太い枠線を描画します。

例: サーフェスを作成する

次のコードは、クリッピング、背景、デフォルトの枠線を持つサーフェスを作成します。

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

インタラクションとフォーカス

サーフェスはデフォルトではフォーカスできないため、ユーザーは操作できません。ほとんどの場合、サーフェスはインタラクティブにして、ユーザーがフォーカスを移動してコンポーネント間を移動できるようにする必要があります。フォーカス可能にすることのみを目的としたサーフェスには、Compose の focusable 修飾子を使用できます。同様に、Compose の clickable 修飾子を使用して、クリック可能なサーフェスを作成できます。アクションが必要なサーフェスには、他の修飾子も使用できます。

次のコードは、フォーカス可能なサーフェスとクリック可能なサーフェスの両方の例を示しています。

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}SurfaceSamples.kt

コードに関する主なポイント

フォーカス可能なサーフェスの共有インタラクションソース: .surface() と .focusable() は同じ interactionSource を共有する必要があります。これにより、サーフェスがフォーカスの変更に反応できるようになります。
クリック可能なサーフェスの共有インタラクションソース: .surface() と .clickable() は同じ interactionSource を共有する必要があります。これにより、視覚的な状態（押す、フォーカスなど）が同期され、サーフェスがユーザー入力に視覚的に反応できるようになります。
修飾子の順序: 修飾子の順序は重要です。.surface() はレイアウトをクリップするため、.clickable() の前に配置すると、タッチターゲットがサーフェスの形状に制限されます。 .clickable() が最初に来ると、インタラクション領域がコンポーネントの表示されるクリップされた境界を超えて拡張される可能性があります。

SurfaceDepthEffect

SurfaceDepthEffect クラスは、インタラクション状態間のシャドウの遷移を管理します。

depthEffect: サーフェスがデフォルトの状態のときに使用されるシャドウ効果。
focusedDepthEffect: サーフェスがフォーカスされているときに使用されるシャドウ効果。