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

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 を使用した比較テーブル。

参考情報