グリッド

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 要素をギャップにまたがらせることはできます。