In vergelijking met UIListLayout bieden UIGridLayout en UITableLayout meer gestructureerde en georganiseerde indelingen. Deze zijn het meest geschikt voor interfaces zoals een winkelinventaris waar elk item kan worden gepresenteerd in een raster van gelijkmatig grote tegels, of items kunnen worden gesorteerd in gerelateerde rijen/kolommen.
Rasterindeling
UIGridLayout plaatst broeder GuiObjects in een raster van uniforme cellen van dezelfde grootte binnen hun bovenliggende container. Cellen worden toegevoegd per rij of kolom op basis van de FillDirection van de indeling totdat de volgende cel niet past, waarna een nieuwe rij of kolom begint. Voor verdere controle kun je de FillDirectionMaxCells eigenschap gebruiken om het maximale aantal cellen per rij of kolom in te stellen.
Standaard plaatst UIGridLayout broeder GuiObjects in volgorde van hun LayoutOrder waarbij lagere waarden vóór hogere waarden komen, en gelijke waarden worden gesorteerd afhankelijk van de volgorde waarin je ze hebt toegevoegd. Als je de SortOrder van de indeling wijzigt naar Enum.SortOrder.Name, worden broeders alfabetisch gesorteerd.
Zodra je een UIGridLayout invoegt, overschrijft of beïnvloedt het de Position en/of Size van alle broeder UI-objecten, zodat wijzigingen in die eigenschappen binnen het Eigenschappen venster of binnen een script niet het normale effect zullen hebben.
UIGridLayout respecteert alle beperkingen die je plaatst op objecten binnen het raster. Bijvoorbeeld, als een object een UISizeConstraint heeft met een MinSize eigenschap die hoger is dan de CellSize eigenschap van het raster, zal het object meerdere cellen beslaan.
Tabelindeling
UITableLayout plaatst broeder GuiObjects en hun kinderen in tabelvorm. De standaard FillDirection van Vertical betekent dat broeders eerst in rijen worden geplaatst, en kinderen van die broeders worden horizontaal geplaatst om kolommen te vormen, zodat elke cel binnen een rij dezelfde hoogte heeft en elke cel binnen een kolom dezelfde breedte heeft.
Dit patroon imiteert de standaard HTML rij/kolomstructuur:
<table>
<tbody>
<tr> <!-- Rij1 -->
<td>Label 1</td> <!-- TextLabel1 -->
<td>Label 2</td> <!-- TextLabel2 -->
<td>Label 3</td> <!-- TextLabel3 -->
</tr>
<tr> <!-- Rij2 -->
<td>Label 4</td> <!-- TextLabel4 -->
<td>Label 5</td> <!-- TextLabel5 -->
<td>Label 6</td> <!-- TextLabel6 -->
</tr>
<tr> <!-- Rij3 -->
<td>Label 7</td> <!-- TextLabel7 -->
<td>Label 8</td> <!-- TextLabel8 -->
<td>Label 9</td> <!-- TextLabel9 -->
</tr>
</tbody>
</table>Tenzij je de FillEmptySpaceColumns of FillEmptySpaceRows eigenschappen van de indeling inschakelt, bepaalt de grootte van de broeder GuiObjects de afmetingen van de cellen. Bijvoorbeeld, een TextLabel van grootte UDim2.new(0.25, 0, 0.1, 0) zal een tabelcel creëren van 25% breedte en 10% hoogte binnen de bovenliggende container.
Zodra je een UITableLayout invoegt, overschrijft of beïnvloedt het de Position en/of Size van alle broeder UI-objecten, zodat wijzigingen in die eigenschappen binnen het Eigenschappen venster of binnen een script niet het normale effect zullen hebben.
UITableLayout respecteert en is responsief voor elke UISizeConstraint die je plaatst op objecten binnen de tabel. Bijvoorbeeld, als een object een UISizeConstraint heeft met een MinSize eigenschap binnen een headercel, zullen de rest van de cellen binnen de kolom dezelfde grootte hebben als de headercel.
Let op dat als de MaxSize eigenschap de grootte van een cel beperkt om de toegewezen ruimte van een rij of kolom die breder is dan de cel te vullen, het object zich uitlijnt naar de bovenkant links van de cel.