Le UIListLayout positionne les GuiObjects frères dans des lignes horizontales ou des colonnes verticales au sein de leur conteneur parent. Chaque fois que vous ajoutez ou retirez un objet frère, la mise en page s'ajuste en conséquence.
Une fois que vous insérez un UIListLayout, cela remplace ou influence la Position, la Rotation, et/ou la Size de tous les objets UI frères, donc les modifications de ces propriétés dans la fenêtre Propriétés ou dans un script n'auront pas l'effet normal.
Direction de remplissage
La propriété FillDirection détermine la direction dans laquelle les frères de la mise en page en liste seront rendus.
L'ordre est déterminé par la propriété SortOrder de la mise en page qui peut être soit numérique croissant, basé sur la valeur entière LayoutOrder de chaque élément, ou alphanumérique basé sur le nom de l'élément Name.
Pour inverser les éléments, comme un ordre de droite à gauche dans une liste horizontale, vous devrez inverser le tri. Par exemple, si quatre éléments sont ordonnés par LayoutOrder de 0, 1, 2, 3 respectivement, négatez chaque valeur pour former un ordre de 0, -1, -2, -3.
Alignement
Les propriétés HorizontalAlignment et VerticalAlignment déterminent l'alignement respectif X et Y des frères de la liste les uns par rapport aux autres et les limites globales de la liste dans son conteneur. Par exemple, une liste remplie horizontalement avec un VerticalAlignment de Center aligne au centre les frères de la liste entre eux et centre la liste verticalement dans son conteneur.
Les propriétés HorizontalAlignment et VerticalAlignment diffèrent légèrement de l'alignement des lignes d'élément dans une mise en page flex, avec laquelle vous pouvez aligner des éléments sur la même ligne sans appliquer le même alignement aux limites globales de la liste dans son conteneur.
Enveloppement
Le booléen Wraps contrôle si les frères dans le conteneur parent s'enveloppent à une nouvelle ligne lorsque leur taille par défaut dépasse la largeur/hauteur des limites du conteneur.
Rembourrage
La propriété Padding détermine la quantité d'espace vide entre chaque élément de la liste, fixée soit à une échelle (pourcentage de la taille du conteneur dans la direction actuelle) soit à un décalage (valeur d'espacement fixe similaire à la taille en pixels).
Cette propriété n'applique pas de rembourrage autour des limites globales de la liste ; consultez UIPadding pour appliquer un rembourrage en haut, en bas, à gauche et/ou à droite aux contenus du parent.
Mises en page flex
L'intégration de flex dans un UIListLayout est un moyen puissant de remplir/distribuer également ou aligner/étendre des éléments de la liste sur leur ligne, ou de flexibiliser des éléments spécifiques sur un espace variable.
Bien que flex soit un outil puissant, vous ne devriez pas l'appliquer à un UIListLayout sans but, car cela entraîne un léger coût de performance par rapport à non-flex, en particulier lors du redimensionnement de la mise en page ou de l'ajout/suppression dynamique d'éléments flex.
De plus, une mise en page en grille peut être préférable lorsque les éléments doivent strictement s'aligner dans les directions X et Y, car les mises en page en grille imposent une taille de cellule cohérente tandis que les mises en page flex peuvent utiliser un nombre variable d'éléments par ligne.
Remplissage ou distribution égale
Lorsque la direction de remplissage de la mise en page de liste est définie sur Horizontal, la propriété HorizontalFlex spécifie comment distribuer l'espace horizontal supplémentaire dans le conteneur parent. De même, lorsque la direction de remplissage est définie sur Vertical, la propriété VerticalFlex spécifie comment distribuer l'espace vertical supplémentaire.
Une utilisation pratique de HorizontalFlex est une interface de fenêtre à onglets où flex remplit la barre d'onglets également, peu importe le nombre d'onglets. Aucune approche n'est plus simple que flex dans ce cas, car cela calcule automatiquement la largeur de chaque onglet sans paramètres de largeur définis par le développeur, et cela s'ajuste automatiquement si le nombre d'onglets change.
Alignement des lignes d'éléments
La propriété ItemLineAlignment définit l'alignement cross-directionnel des frères au sein d'une ligne, vous permettant d'aligner des objets de différentes largeurs/hauteurs ou de faire en sorte que des objets de largeur/hauteur inférieure remplissent l'ensemble de leur ligne.
Un cas d'utilisation pratique pour ItemLineAlignment est d'étirer une série de tuiles de tailles inconsistantes pour remplir toute leur ligne (Stretch), rendant la mise en page plus cohésive.
Flexibilité des éléments individuels
Bien que la flexibilité d'une mise en page entière soit une utilité puissante, certaines mises en page conviennent mieux à la flexibilité des éléments individuels. Dans de telles mises en page, certains éléments de la liste conservent leur taille de base tandis que d'autres éléments se flexent pour remplir des espaces variables. Une utilisation pratique est un widget de barre de défilement avec des étiquettes uniformes à chaque extrémité et une barre de défilement flexible qui remplit toute la largeur entre elles.
Pour définir un élément de liste spécifique comme flexible, insérez un UIFlexItem comme enfant de l'élément flexible, puis définissez sa propriété FlexMode sur Fill, Grow, Shrink, ou Custom.
