Die UIListLayout positioniert Geschwister-GuiObjects in horizontalen Reihen oder vertikalen Spalten innerhalb ihres übergeordneten Containers. Jedes Mal, wenn Sie ein Geschwisterobjekt hinzufügen oder entfernen, passt sich das Layout entsprechend an.
Sobald Sie eine UIListLayout einfügen, überschreibt oder beeinflusst sie die Position, Rotation und/oder Size aller Geschwister-UI-Objekte, sodass Änderungen an diesen Eigenschaften im Eigenschaften Fenster oder in einem Skript nicht die normale Wirkung haben.
Füllrichtung
Die FillDirection-Eigenschaft bestimmt die Richtung, in der die Geschwister der Listenanordnung gerendert werden.
Die Reihenfolge wird durch die SortOrder-Eigenschaft des Layouts bestimmt, die entweder aufsteigend numerisch, basierend auf dem LayoutOrder Integerwert jedes Elements, oder alphanumerisch basierend auf dem Name des Elements sein kann.
Um Elemente umzukehren, wie z.B. eine rechteckige Anordnung in einer horizontalen Liste, müssen Sie die Sortierung umkehren. Wenn beispielsweise vier Elemente in der Reihenfolge LayoutOrder von 0, 1, 2, 3 angeordnet sind, negieren Sie jeden Wert, um eine Reihenfolge von 0, -1, -2, -3 zu bilden.
Ausrichtung
Die HorizontalAlignment und VerticalAlignment Eigenschaften bestimmen die jeweilige X und Y Ausrichtung der Geschwister der Liste in Bezug aufeinander und die Gesamtgrenzen der Liste innerhalb ihres Containers. Zum Beispiel zentriert eine horizontal gefüllte Liste mit VerticalAlignment von Center die Geschwister der Liste zueinander und zentriert die Liste vertikal in ihrem Container.
HorizontalAlignment und VerticalAlignment unterscheiden sich leicht von der Ausrichtung der Elemente in Zeilen in einem Flex-Layout, mit dem Sie Elemente in derselben Zeile ausrichten können, ohne die gleiche Ausrichtung auf die Gesamtgrenzen der Liste in ihrem Container anzuwenden.
Umbruch
Die Wraps-Boolean steuert, ob Geschwister innerhalb des übergeordneten Containers zu einer anderen Zeile umschlagen, wenn ihre Standardgröße die Breite/Höhe der Grenzen des Containers überschreitet.
Innenabstand
Die Padding-Eigenschaft bestimmt die Menge an leerem Raum zwischen jedem Listenelement, die entweder als Skalierung (Prozentsatz der Größe des Containers in der aktuellen Richtung) oder als Versatz (statischer Abstandsbereich ähnlich der Pixelgröße) festgelegt wird.
Diese Eigenschaft wendet keine Polsterung um die gesamten Grenzen der Liste an; siehe UIPadding, um oben, unten, links und/oder rechts Polsterung auf die Inhalte des übergeordneten Containers anzuwenden.
Flex-Layouts
Die Integration von Flex in eine UIListLayout ist eine leistungsstarke Möglichkeit, um gleichmäßig zu füllen/verteilen oder Ausrichten/Strecken von Listenelementen über ihre Linie oder flexible spezifische Elemente über einen variablen Raum.
Obwohl Flex ein leistungsstarkes Werkzeug ist, sollten Sie es nicht ohne Zweck auf eine UIListLayout anwenden, da es eine leichte Leistungsbeeinträchtigung im Vergleich zu Nicht-Flex hinzufügt, insbesondere beim Ändern der Größe des Layouts oder beim dynamischen Hinzufügen/Entfernen von Flex-Elementen.
Zusätzlich kann ein Rasterlayout vorteilhaft sein, wenn Elemente strikt in beiden X und Y Richtungen an ein Raster ausgerichtet werden sollen, da Rasterlayouts eine konsistente Zellgröße erzwingen, während Flex-Layouts eine variable Anzahl von Elementen pro Zeile verwenden können.
Gleichmäßiges Füllen oder Verteilen
Wenn die Füllrichtung des Listenlayouts auf Horizontal eingestellt ist, gibt die HorizontalFlex-Eigenschaft an, wie zusätzlicher horizontaler Raum im übergeordneten Container verteilt werden soll. Ebenso gibt die VerticalFlex-Eigenschaft an, wie zusätzlicher vertikaler Raum verteilt werden soll, wenn die Füllrichtung auf Vertical eingestellt ist.
Ein praktischer Einsatz von HorizontalFlex ist eine Tabbed Window-Schnittstelle, bei der Flex die Tab-Leiste gleichmäßig ausfüllt, unabhängig von der Anzahl der Tabs. Kein Ansatz ist in diesem Fall einfacher als Flex, da es automatisch die Breite jedes Tabs berechnet, ohne dass Breiteinstellungen durch den Entwickler definiert werden müssen, und es passt sich automatisch an, wenn sich die Anzahl der Tabs ändert.
Ausrichtung der Elemente in der Zeile
Die ItemLineAlignment-Eigenschaft definiert die querrichtungs-Ausrichtung der Geschwister innerhalb einer Zeile und ermöglicht es Ihnen, Objekte unterschiedlicher Breiten/Höhen auszurichten oder Objekte mit geringerer Breite/Höhe ihre gesamte Zeile ausfüllen zu lassen.
Ein praktischer Anwendungsfall für ItemLineAlignment besteht darin, eine Reihe von unterschiedlich großen Kacheln zu dehnen, um ihre gesamte Zeile auszufüllen (Stretch), was das Layout kohärenter macht.
Flex individuelle Elemente
Während das Flexen eines gesamten Layouts ein leistungsstarkes Hilfsmittel ist, sind bestimmte Layouts besser für Flexen individueller Elemente geeignet. In solchen Layouts behalten einige Elemente in der Liste ihre Kerngröße, während andere Elemente sich dehnen, um variable Räume auszufüllen. Ein praktischer Anwendungsfall ist ein Schieberegler-Widget mit einheitlichen Labels an beiden Enden und einem flexiblen Schieberegler, der die gesamte Breite dazwischen ausfüllt.
Um ein bestimmtes Listenelement als flexibel festzulegen, fügen Sie ein UIFlexItem als Kind des flexiblen Elements ein und setzen dann seine FlexMode-Eigenschaft auf Fill, Grow, Shrink oder Custom.
