Layout di griglie e tabelle

In confronto a UIListLayout, UIGridLayout e UITableLayout consentono layout più strutturati e organizzati. Questi sono più appropriati per interfacce come un inventario di negozio dove ogni oggetto può essere presentato in una griglia di riquadri di dimensioni uguali, oppure gli oggetti possono essere ordinati in righe/colonne correlate.

Layout a griglia

UIGridLayout posiziona i GuiObjects fratelli in una griglia di celle uniformi della stessa dimensione all'interno del loro contenitore padre. Le celle vengono aggiunte per riga o colonna in base alla FillDirection del layout fino a quando la successiva cella non si adatta, dopodiché inizia una nuova riga o colonna. Per un ulteriore controllo, puoi utilizzare la proprietà FillDirectionMaxCells per impostare il numero massimo di celle per riga o colonna.

Per impostazione predefinita, UIGridLayout posiziona i GuiObjects fratelli in ordine del loro LayoutOrder dove i valori più bassi vengono prima dei valori più alti, e i valori uguali si ordinano in base all'ordine in cui li hai aggiunti. Se modifichi il SortOrder del layout in Enum.SortOrder.Name, i fratelli vengono ordinati in ordine alfabetico.

Layout a tabella

UITableLayout posiziona i GuiObjects fratelli e i loro figli in formato tabella. La FillDirection predefinita di Vertical significa che i fratelli vengono posizionati per primi nelle righe, e i figli di quei fratelli vengono posizionati orizzontalmente per formare colonne, in modo che ogni cella all'interno di una riga abbia la stessa altezza e ogni cella all'interno di una colonna abbia la stessa larghezza.

Questo modello imita la struttura standard delle righe/colonne HTML:

<table>
	<tbody>
		<tr>
		<!-- Riga1 -->
			<td>Etichetta 1</td> <!-- TextLabel1 -->
			<td>Etichetta 2</td> <!-- TextLabel2 -->
			<td>Etichetta 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Riga2 -->
			<td>Etichetta 4</td> <!-- TextLabel4 -->
			<td>Etichetta 5</td> <!-- TextLabel5 -->
			<td>Etichetta 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Riga3 -->
			<td>Etichetta 7</td> <!-- TextLabel7 -->
			<td>Etichetta 8</td> <!-- TextLabel8 -->
			<td>Etichetta 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

A meno che tu non abiliti le proprietà FillEmptySpaceColumns o FillEmptySpaceRows del layout, la dimensione dei GuiObjects fratelli determina le dimensioni delle celle. Ad esempio, un TextLabel di dimensione UDim2.new(0.25, 0, 0.1, 0) creerà una cella di tabella con larghezza del 25% e altezza del 10% all'interno del contenitore padre.