Siatki i układy tabeli

W porównaniu do UIListLayout, UIGridLayout i UITableLayout pozwalają na bardziej zorganizowane i uporządkowane układy. Są najbardziej odpowiednie dla interfejsów takich jak inventariusz sklepu, gdzie każdy przedmiot może być prezentowany w siatce równych kafelków lub przedmioty mogą być sortowane w powiązane wiersze/kolumny.

Układ siatki

UIGridLayout ustawia rodzeństwo GuiObjects w siatce równomiernych komórek o tej samej wielkości w ich rodzicielskim kontenerze. Komórki są dodawane w wierszach lub kolumnach w zależności od FillDirection układu, aż do momentu, gdy następna komórka nie zmieści się, wtedy rozpoczyna się nowy wiersz lub kolumna. Dla dalszej kontroli można użyć właściwości FillDirectionMaxCells, aby ustawić maksymalną liczbę komórek na wiersz lub kolumnę.

Domyślnie UIGridLayout ustawia rodzeństwo GuiObjects w kolejności ich LayoutOrder, gdzie niższe wartości są przed wyższymi, a równe wartości są sortowane w zależności od kolejności, w jakiej zostały dodane. Jeśli zmienisz SortOrder układu na Enum.SortOrder.Name, rodzeństwo zostanie posortowane alfabetycznie.

Układ tabeli

UITableLayout ustawia rodzeństwo GuiObjects i ich dzieci w formacie tabeli. Domyślna FillDirection Vertical oznacza, że rodzeństwo jest najpierw ustawiane w wierszach, a dzieci tych rodzeństw są ustawiane poziomo, aby utworzyć kolumny, tak, że każda komórka w wierszu ma tę samą wysokość, a każda komórka w kolumnie ma tę samą szerokość.

Ten wzór naśladuje standardową strukturę wierszy/kolumn HTML:

<table>
	<tbody>
		<tr>
		<!-- Wiersz1 -->
			<td>Etykieta 1</td> <!-- TextLabel1 -->
			<td>Etykieta 2</td> <!-- TextLabel2 -->
			<td>Etykieta 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Wiersz2 -->
			<td>Etykieta 4</td> <!-- TextLabel4 -->
			<td>Etykieta 5</td> <!-- TextLabel5 -->
			<td>Etykieta 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Wiersz3 -->
			<td>Etykieta 7</td> <!-- TextLabel7 -->
			<td>Etykieta 8</td> <!-- TextLabel8 -->
			<td>Etykieta 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

O ile nie włączysz właściwości FillEmptySpaceColumns lub FillEmptySpaceRows w układzie, rozmiar rodzeństwa GuiObjects wyznacza wymiary komórek. Na przykład, TextLabel o rozmiarze UDim2.new(0.25, 0, 0.1, 0) utworzy komórkę tabeli o szerokości 25% i wysokości 10% wewnątrz rodzicielskiego kontenera.