コンテナのプロパティを設定する

グリッド コンテナの構成を定義して、さまざまな画面サイズやコンテンツ タイプに対応できる柔軟なレイアウトを作成できます。このページでは、次の操作を行う方法について説明します。

• グリッドを定義する: 行と列の基本構造を設定します。
• アイテムをグリッドに配置する: アイテムをグリッドセルに配置する方法と、フローの方向を変更する方法について説明します。
• トラックのサイズを管理する: 固定サイズ、パーセント サイズ、フレキシブル サイズ、固有サイズを使用してトラックのサイズを設定します。
• ギャップを設定する: 行と列の間の「ガター」を管理します。

グリッドを定義する

グリッドは列と行で構成されます。 Grid コンポーザブルには config パラメータ があり、ラムダを受け取って列と行を GridConfigurationScope 内で定義します。 次の例では、3 行 2 列のグリッドを定義しています。 各行と列のサイズは Dpで指定された固定サイズです。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

アイテムをグリッドに配置する

Grid は、content ラムダ内の UI 要素を受け取り、グリッドセルに配置します。 行と列を明示的に定義しているかどうかに関係なく、グリッドはアイテムを配置します。 デフォルトでは、Grid は UI 要素を行の空いているグリッドセルに配置しようとします。配置できない場合は、次の行の空いているグリッドセルに配置します。 空のセルがない場合、Grid は新しい行を作成します。

次の例では、グリッドに 6 つのグリッドセルがあり、それぞれにカードが配置されています（図 1）。 各グリッドセルのサイズは 160dp x 90dp で、グリッド全体のサイズは 320dp x 270dp です。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

このデフォルトの動作を列単位の配置に変更するには、 flow プロパティを GridFlow.Column に設定します。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

トラックのサイズを管理する

行と列はまとめてグリッド トラックと呼ばれます。 グリッド トラックのサイズは、次のいずれかの方法で指定できます。

• 固定 （Dp）: 特定のサイズを割り当てます（例: column(180.dp)）。
• パーセント （Float）: 使用可能なスペースの合計の割合を 0.0f から 1.0f の範囲で割り当てます（例: row(0.5f) は 50%）。
• フレキシブル (Fr): 固定 トラックとパーセント トラックの計算後に、残りのスペースを比例配分します。たとえば、2 つの行が 1.fr と 3.fr に設定されている場合、後者は残りの高さの 75% を受け取ります。
• 固有: トラック内のコンテンツに基づいてトラックのサイズを設定します。詳細については、グリッド トラックのサイズを固有に決定するをご覧ください。

次の例では、さまざまなトラック サイズ設定オプションを使用して行の高さを定義しています。

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

グリッド トラックのサイズを固有に決定する

Grid に 固有のサイズ設定を使用すると、 レイアウトを固定コンテナに強制的に配置するのではなく、 コンテンツに合わせて調整できます。 グリッド トラックのサイズは、次の値で決まります。

• GridTrackSize.MaxContent: コンテンツの固有の最大サイズを使用します（例: 幅は、折り返しのないテキスト ブロック内のテキストの全長によって決まります）。
• GridTrackSize.MinContent: コンテンツの固有の最小サイズを使用します（例: 幅は、テキスト ブロック内の最長の単語によって決まります）。
• GridTrackSize.Auto: 使用可能なスペースに基づいて調整されるトラックにフレキシブル サイズを使用します。デフォルトでは MaxContent と同様に動作しますが、親コンテナ内に収まるようにコンテンツを縮小して折り返します。

次の例では、2 つのテキストを並べて配置しています。 最初のテキストの列のサイズは、テキストを表示するために必要な最小幅によって決まります。2 番目の列の幅は、テキストに必要な最大幅によって決まります。

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

行と列の間にギャップを設定する

グリッド トラックのサイズを設定したら、 グリッドのギャップを変更してトラック間の間隔を調整できます。 列のギャップは columnGap 関数で、 行のギャップは rowGap で指定できます。次の例では、各行の間に 16dp のギャップがあり、各列の間に 8dp のギャップがあります（図 5）。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

便利な関数 gap を使用して、同じ列と行のサイズのギャップを定義したり、 1 つの関数を使用して列とギャップのサイズを個別に定義したりすることもできます。 次のコードでは、グリッドに 8dp のギャップを追加しています。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt