Grilles et mises en page de tableaux | Documentation

En comparaison avec UIListLayout, UIGridLayout et UITableLayout permettent des mises en page plus structurées et organisées. Celles-ci sont les plus appropriées pour des interfaces comme un inventaire de magasin où chaque article peut être présenté dans une grille de tuiles de taille égale, ou les articles peuvent être triés en lignes/colonnes connexes.

Mise en page en grille

UIGridLayout positionne les GuiObjects frères dans une grille de cellules uniformes de même taille au sein de leur conteneur parent. Les cellules sont ajoutées par ligne ou par colonne en fonction de la FillDirection de la mise en page jusqu'à ce que la cellule suivante ne puisse pas s'adapter, puis une nouvelle ligne ou colonne commence. Pour un contrôle supplémentaire, vous pouvez utiliser la propriété FillDirectionMaxCells pour définir le nombre maximal de cellules par ligne ou par colonne.

Par défaut, UIGridLayout positionne les GuiObjects frères dans l'ordre de leur LayoutOrder où des valeurs plus faibles vont avant des valeurs plus élevées, et des valeurs égales se trient en fonction de l'ordre dans lequel vous les avez ajoutées. Si vous changez le SortOrder de la mise en page à Enum.SortOrder.Name, les frères se trient en ordre alphabétique.

Une fois que vous insérez un UIGridLayout, il écrase ou influence le Position et/ou Size de tous les objets UI frères, donc les changements à ces propriétés dans la fenêtre des Propriétés ou dans un script n'auront pas l'effet normal.

UIGridLayout respecte toutes les contraintes que vous appliquez aux objets au sein de la grille. Par exemple, si un objet a une UISizeConstraint avec une propriété MinSize qui est supérieure à la propriété CellSize de la grille, l'objet s'étendra sur plusieurs cellules.

Mise en page de tableau

UITableLayout positionne les GuiObjects frères et leurs enfants au format de tableau. La FillDirection par défaut de Vertical signifie que les frères sont d'abord positionnés dans des lignes, et les enfants de ces frères sont positionnés horizontalement pour former des colonnes, de sorte que chaque cellule dans une ligne ait la même hauteur et chaque cellule dans une colonne ait la même largeur.

Ce modèle imite la structure standard des lignes/colonnes HTML :


<table>
	<tbody>
		<tr>
		<!-- Row1 -->
			<td>Étiquette 1</td> <!-- TextLabel1 -->
			<td>Étiquette 2</td> <!-- TextLabel2 -->
			<td>Étiquette 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Row2 -->
			<td>Étiquette 4</td> <!-- TextLabel4 -->
			<td>Étiquette 5</td> <!-- TextLabel5 -->
			<td>Étiquette 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Row3 -->
			<td>Étiquette 7</td> <!-- TextLabel7 -->
			<td>Étiquette 8</td> <!-- TextLabel8 -->
			<td>Étiquette 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

À moins que vous n'activiez les propriétés FillEmptySpaceColumns ou FillEmptySpaceRows de la mise en page, la taille des GuiObjects frères détermine les dimensions des cellules. Par exemple, une TextLabel de taille UDim2.new(0.25, 0, 0.1, 0) créera une cellule de tableau de 25% de largeur et 10% de hauteur à l'intérieur du conteneur parent.

Une fois que vous insérez un UITableLayout, il écrase ou influence le Position et/ou Size de tous les objets UI frères, donc les changements à ces propriétés dans la fenêtre des Propriétés ou dans un script n'auront pas l'effet normal.

UITableLayout respecte et est réactif à toute UISizeConstraint que vous appliquez aux objets au sein du tableau. Par exemple, si un objet a une UISizeConstraint avec une propriété MinSize à l'intérieur d'une cellule d'en-tête, le reste des cellules dans la colonne aura la même taille que la cellule d'en-tête.

Notez que si la propriété MaxSize empêche la taille d'une cellule de remplir l'espace alloué d'une ligne ou colonne qui est plus large que la cellule, l'objet s'aligne en haut à gauche de la cellule.