グリッド テーブル レイアウト

4 つ星の評価アイコン

このレシピでは、従来のネスト構造と比較して、Grid API がコードの可読性を向上させる方法を示します。自動サイズ設定のトラックを構成すると、テキスト コンポーザブルの固有サイズに基づいてセルの幅と高さに動的に適応するグリッドを作成できます。

このレシピでは、Grid API を使用してテーブルを作成します。

表 1. FlexBox API と Grid API の機能の比較
レイアウト 遅延読み込み ソフトラップ ダイナミック レイアウトの更新
FlexBox 1 日 いいえ ○ ○
Grid 2D いいえ いいえ ○

ベスト プラクティス

Grid コンポーザブルを使用して、テーブルの読みやすさと保守性を向上させます。Grid を使用すると、幅を手動で同期することなく、すべての行の列のサイズと配置を正確に制御できます。

材料

  • Grid: アイテムを 2 次元グリッドに配置するコンポーザブル レイアウト。レイアウト構成は config ラムダ パラメータ内で指定し、UI コンテンツ アイテムは content ラムダ パラメータ内で宣言します。
  • GridTrackSize.Auto: コンテンツの固有サイズに基づいて、グリッド構成内のトラックのサイズを自動的に指定します（column(GridTrackSize.Auto)、row(GridTrackSize.Auto) など）。
  • gap(): GridConfigurationScope 内の行と列の間隔（gap(row = 8.dp, column = 16.dp) など）を構成します。

手順

自動列配置とすべてのアイテムのサイズ調整を伴う単一の Grid レイアウトを使用して、複数列の比較表を作成します。

1. グリッドの行と列を数えてトラックのサイズを決定する

まず、列と行を数えて、トラックのサイズを決定します。

  • 列: 比較する属性の数に、商品名の列を 1 つ加えた数。
  • 行: 比較するアイテムの数にヘッダー行 1 行を加えた数。

このレシピでは、4 つの属性にわたって 2 つのコンポーネント（FlexBox と Grid）を比較するため、5 つの列と 3 つの行が必要です。

2. Grid を使用して比較表を実装する

Grid を使用してテーブル アイテムをレイアウトする TableInGrid コンポーザブルを作成します。config ラムダ内で column 関数と row 関数を呼び出してトラックサイズを定義し、gap() でセル間隔を設定します。テキストには固有のサイズがあるため、GridTrackSize.Auto はコンテンツに合わせて列と行のサイズを自動的に調整します。

content ラムダ内に、テーブルのヘッダーとデータを配置します。Grid は、すべてのセルの配置と位置合わせを自動的に処理します。

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

結果

これで、列の自動配置とセル間隔を備えた、すっきりとした 2 次元比較表が作成されました。

図 1. Grid を使用した比較表。

参考情報