Bố cục lưới và bảng

So với UIListLayout, UIGridLayout và UITableLayout cho phép bố cục có cấu trúc và tổ chức hơn. Những điều này phù hợp nhất cho những giao diện như một kho hàng, nơi mỗi mục có thể được trình bày trong một lưới các ô có kích thước bằng nhau, hoặc các mục có thể được sắp xếp thành các hàng/cột liên quan.

Bố cục lưới

UIGridLayout định vị các đối tượng GuiObjects cùng nhau trong một lưới các ô đồng nhất có kích thước giống nhau bên trong container cha của chúng. Các ô được thêm vào theo hàng hoặc cột dựa trên thuộc tính FillDirection của bố cục cho đến khi ô tiếp theo không vừa, sau đó một hàng hoặc cột mới bắt đầu. Để kiểm soát thêm, bạn có thể sử dụng thuộc tính FillDirectionMaxCells để đặt số lượng ô tối đa trên mỗi hàng hoặc cột.

Mặc định, UIGridLayout định vị các đối tượng GuiObjects cùng nhau theo thứ tự LayoutOrder của chúng, trong đó giá trị thấp hơn đứng trước giá trị cao hơn, và các giá trị bằng nhau được sắp xếp tùy thuộc vào thứ tự mà bạn đã thêm chúng. Nếu bạn thay đổi SortOrder của bố cục thành Enum.SortOrder.Name, các đối tượng cùng thứ tự sẽ được sắp xếp theo thứ tự chữ cái.

Bố cục bảng

UITableLayout định vị các đối tượng GuiObjects và các con của chúng theo định dạng bảng. Thuộc tính mặc định FillDirection của Vertical có nghĩa là các đối tượng cùng thứ tự được định vị trước tiên vào các hàng, và các con của những đối tượng đó được định vị theo chiều ngang để tạo thành các cột, sao cho mỗi ô trong một hàng có chiều cao giống nhau và mỗi ô trong một cột có chiều rộng giống nhau.

Mẫu này mô phỏng cấu trúc hàng/cột HTML chuẩn:

<table>
	<tbody>
		<tr>
		<!-- Hàng1 -->
			<td>Nhãn 1</td> <!-- TextLabel1 -->
			<td>Nhãn 2</td> <!-- TextLabel2 -->
			<td>Nhãn 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Hàng2 -->
			<td>Nhãn 4</td> <!-- TextLabel4 -->
			<td>Nhãn 5</td> <!-- TextLabel5 -->
			<td>Nhãn 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Hàng3 -->
			<td>Nhãn 7</td> <!-- TextLabel7 -->
			<td>Nhãn 8</td> <!-- TextLabel8 -->
			<td>Nhãn 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

Trừ khi bạn kích hoạt thuộc tính FillEmptySpaceColumns hoặc FillEmptySpaceRows của bố cục, kích thước của các đối tượng GuiObjects cùng nhau sẽ xác định kích thước của các ô. Ví dụ, một TextLabel có kích thước UDim2.new(0.25, 0, 0.1, 0) sẽ tạo ra một ô bảng với chiều rộng 25% và chiều cao 10% bên trong container cha.