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

比較して、UIListLayout、UIGridLayout、およびUITableLayoutは、より構造化された組織的なレイアウトを許可します。これらは、各アイテムが同じサイズのタイルのグリッドで表示されたり、関連する行/列に並べ替えられたりするようなインターフェイスに最適です。

グリッドレイアウト

UIGridLayout 位置の姉妹 GuiObjects は、親コンテナ内の同じサイズのユニフォームセルのグリッド内です。セルはレイアウトの FillDirection まで行または列によって追加され、次のセルがフィットしなくなると、新しい行または列が開始されます。さらなる制御のために、FillDirectionMaxCells プロパティを使用して、行または列ごとの最大セル数を設定できます。

デフォルトでは、 位置が、 下位の値が上位の値よりも先に行く順序で、等しい値は、追加した順序に応じて並べ替えられます。レイアウトの SortOrder を Enum.SortOrder.Name に変更すると、兄弟はアルファベット順に並び替えられます。

タブレイアウト

UITableLayout 位の姉妹 GuiObjects とその子供をテーブル形式に変換します。デフォルトの FillDirection の Vertical は、兄弟が最初に行に配置され、その兄弟の子が横向きに配置されてコラムを形成し、行内の各セルが同じ高さを持ち、コラム内の各セルが同じ幅を持つようになることを意味します。

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

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

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