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

UIListLayoutと比較して、UIGridLayoutおよびUITableLayoutは、より構造化され、整理されたレイアウトを可能にします。これらは、各アイテムが均等なサイズのタイルのグリッドで表示されるショップの在庫のようなインターフェースに最も適しています。また、アイテムを関連する行/列に分類することもできます。

グリッドレイアウト

UIGridLayoutは、親コンテナ内の均一なサイズのセルのグリッドに隣接するGuiObjectsを配置します。セルは、レイアウトのFillDirectionに基づいて行または列で追加され、次のセルがフィットしない場合は新しい行または列が始まります。詳細な制御が必要な場合は、FillDirectionMaxCellsプロパティを使用して、行または列ごとの最大セル数を設定できます。

デフォルトでは、UIGridLayoutは隣接するGuiObjectsをそのLayoutOrderの順序で配置し、低い値が高い値の前に来ます。同じ値の場合は、追加した順序に依存してソートされます。レイアウトのSortOrderをEnum.SortOrder.Nameに変更すると、隣接するアイテムはアルファベット順にソートされます。

テーブルレイアウト

UITableLayoutは、隣接するGuiObjectsとその子供をテーブル形式に配置します。デフォルトのFillDirectionがVerticalであるため、隣接するアイテムは最初に行に配置され、その隣接アイテムの子は水平方向に配置されて列を形成し、それぞれの行内のセルは同じ高さを持ち、各列内のセルは同じ幅を持ちます。

このパターンは、標準のHTML行/列構造を模倣しています：

<table>
	<tbody>
		<tr>
		<!-- Row1 -->
			<td>ラベル 1</td> <!-- TextLabel1 -->
			<td>ラベル 2</td> <!-- TextLabel2 -->
			<td>ラベル 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Row2 -->
			<td>ラベル 4</td> <!-- TextLabel4 -->
			<td>ラベル 5</td> <!-- TextLabel5 -->
			<td>ラベル 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Row3 -->
			<td>ラベル 7</td> <!-- TextLabel7 -->
			<td>ラベル 8</td> <!-- TextLabel8 -->
			<td>ラベル 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

レイアウトのFillEmptySpaceColumnsまたはFillEmptySpaceRowsプロパティを有効にしない限り、隣接するGuiObjectsのサイズがセルの寸法を決定します。たとえば、サイズがUDim2.new(0.25, 0, 0.1, 0)のTextLabelは、親コンテナ内に25%の幅と10%の高さのテーブルセルを作成します。