グリッド

Grid は、2 次元レイアウトを柔軟に実装できる Jetpack Compose API です。 この API を使用すると、使用可能なコンテナサイズに合わせて調整される複数列または複数行のレイアウトでアイテムを表示できます。

Grid は類似のコンポーザブルとどう違うのですか？

Compose には、LazyVerticalGrid などの類似のコンポーネントがすでに用意されています。 これらのコンポーネントは主に、大規模で均質なデータセットの視覚化を目的としています。たとえば、動画ストリーミング アプリでコンテンツ カタログを表示する場合などです。これらのコンポーネントは、画面や複雑なコンポーネントの構造レイアウト用に設計されていません。

複数の Row コンポーザブルと Column コンポーザブルを組み合わせることで、2 次元レイアウトを実装することもできます。 ただし、この方法には、階層が深くなる、適応が難しいなどのデメリットがあります。

次の表に、各 API に適したレイアウトの概要を示します。

コンポーネント	目的
LazyVerticalGrid、LazyStaggeredGrid、LazyHorizontalGrid	遅延読み込みが必要な大規模で均質なデータセットの視覚化。
Row、Column、FlexBox	1 次元レイアウト
Grid	2 次元レイアウト

用語

Grid の仕組みを理解するには、次の用語をよく理解してください。

グリッド線

グリッドは、水平方向と垂直方向に伸びる線で構成されています。 グリッドに 3 行ある場合、最後の行の後の線を含めて 4 本の水平線があります。 次の図では、点線がグリッド線を表しています。

グリッド トラック

グリッド トラックは、2 本のグリッド線の間のスペースです。 行トラックは 2 本の水平線の間にあり、列トラックは 2 本の垂直線の間にあります。 これらのトラックのサイズを定義するには、グリッドの作成時にサイズを割り当てます。

グリッドセル

グリッドセルは、行トラックと列トラックの交点です。

グリッド領域

グリッド領域は、複数のグリッドセルで構成されます。 アイテムを複数のトラックにまたがるようにすることで、グリッド領域を定義できます。

グリッドギャップ

グリッドギャップは、グリッド トラック間のガターです。 ギャップに UI 要素を配置することはできませんが、UI 要素をまたがらせることはできます。