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

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 行を加えた数。

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

2. グリッドを使用して比較表を実装する

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 を使用した比較表。

参考情報