グリッドを使用した UI 要素のオーバーレイ

Jetpack Compose Grid API は、構造的な 2 次元画面 レイアウト用に設計されています。大きなデータセット用に最適化された Lazy Grid とは異なり、Grid では、トラック（行と列）、 ギャップ、およびグリッド領域を使用して、固定レイアウト構造またはレスポンシブレイアウト構造を定義できます。Modifier.gridItem を使用して、この構造にアイテムを配置します。これにより、グリッド コンテナ内の配置とスパンを明示的に制御できます。

UI で、同じ グリッド領域または重複する 領域に複数のアイテム（バッジのオーバーレイ、ステータス インジケーター、レイヤード カードなど）が必要な場合、座標の 曖昧さによりレイアウトの動作が予測できなくなる可能性があります。複雑な Box のネストや手動の座標オフセットに頼らずに、重複するコンポーネントの深度を管理することは、クリーンで読みやすいレイアウト コードを維持するために不可欠です。

ベスト プラクティス

• 宣言の順序: Grid は、Grid ブロック内の宣言の順序に基づいて、標準の zIndex の順序に従います。Grid コンテンツ ブロックで後から宣言されたアイテムは、先に宣言されたアイテムの上にレンダリングされます。
• 明示的な z-index の制御: 重複する要素のデフォルトの描画順序を明示的に 制御またはオーバーライドする必要がある場合は、Modifier.zIndex を使用します。
• 名前付き領域とアイテムのオーバーレイ: Grid と名前付き領域を使用してレイアウトの構造を定義しますが、オーバーレイがそのグリッドセルに論理的に関連付けられている場合は、複雑なオーバーレイ ロジックを特定の gridItem 内に保持します。
• オーバーレイの意図的なスパン: オーバーレイを行う場合は、重複する要素に対して rowSpan パラメータと columnSpan パラメータが意図的に設定されていることを確認して、基盤となるコンテンツのどの程度が隠されるかを制御します。

材料

• Grid: 構造的な 2 次元レイアウト コンテナ
• GridConfigurationScope.area: グリッド トラック全体で名前付き領域とオーバーレイ領域を定義するために使用されるスコープ関数
• Modifier.gridItem: グリッド トラックまたは名前付きグリッド領域にコンポーザブルを配置してスパンするために使用される Modifier
• Modifier.zIndex: 描画順序とレイヤの昇順を明示的に制御するために使用される Modifier

手順

グリッド レイアウトと名前付き領域を構成し、ターゲット グリッド座標内にベースレイヤ コンテンツを配置して、共有グリッドセルまたは重複する領域にオーバーレイ要素を配置します。

1. グリッド構成を定義する

行トラックと列トラック、およびセル全体にまたがる名前付き領域を指定して、オーバーレイ領域を定義する Grid コンポーザブル構成を作成します。

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. ベース コンテンツを配置してオーバーレイを宣言する

Modifier.gridItem を使用して、ベース コンポーザブルをグリッドセルに配置します。Grid は、構成の順序に基づいて標準の zIndex の順序に従うため、Grid ブロック内で後から宣言されたアイテムは、先に宣言されたアイテムの上に描画されます。同じセルまたは重複する領域にオーバーレイを配置する場合は、ベース要素の後にオーバーレイ コンポーザブルを宣言するか、名前付き領域を参照します。このデフォルトの描画順序を明示的に制御またはオーバーライドする必要がある場合は、Modifier.zIndex を使用できます。

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

結果

UI 要素は、2D グリッド構造内で予測どおりにオーバーレイされます。標準の宣言順序に依存することで、クリーンでレスポンシブなレイアウト コードを維持しながら、複雑なネストされたコンテナを回避できます。