그리드 및 테이블 레이아웃

UIListLayout과 비교할 때, UIGridLayout 및 UITableLayout은 더 구조화되고 조직적인 레이아웃을 허용합니다. 이는 각 항목이 크기가 같은 타일의 그리드에 배치될 수 있는 상점 재고와 같은 인터페이스에 가장 적합하며, 항목을 관련된 행/열로 정렬할 수 있습니다.

그리드 레이아웃

UIGridLayout은 형제 GuiObjects를 부모 컨테이너 내에서 동일한 크기의 균일한 셀의 그리드에 배치합니다. 셀은 레이아웃의 FillDirection에 따라 행 또는 열로 추가되며, 다음 셀이 맞지 않을 경우 새로운 행이나 열이 시작됩니다. 추가적인 제어를 원할 경우, FillDirectionMaxCells 속성을 사용하여 행 또는 열당 최대 셀 수를 설정할 수 있습니다.

기본적으로, UIGridLayout은 형제 GuiObjects를 LayoutOrder에 따라 정렬하며, 낮은 값이 높은 값보다 먼저 오고, 같은 값은 추가한 순서에 따라 정렬됩니다. 레이아웃의 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의 크기가 셀의 크기를 결정합니다. 예를 들어, 크기가 UDim2.new(0.25, 0, 0.1, 0)인 TextLabel은 부모 컨테이너 내에 25% 너비와 10% 높이의 테이블 셀을 생성합니다.