De UIListLayout plaatst broers en zussen GuiObjects in horizontale rijen of verticale kolommen binnen hun bovenliggende container. Telkens wanneer je een broertje of zusje toevoegt of verwijdert, past de lay-out zich dienovereenkomstig aan.
Zodra je een UIListLayout invoegt, overschrijft of beïnvloedt het de Position, Rotation, en/of Size van alle broers en zussen UI-objecten, zodat wijzigingen in die eigenschappen binnen het Eigenschappen venster of binnen een script niet het normale effect hebben.
Vulrichting
De FillDirection eigenschap bepaalt de richting waarin de broers en zussen van de lijstlay-out worden weergegeven.
De volgorde wordt bepaald door de SortOrder eigenschap van de lay-out, die ofwel oplopend numeriek kan zijn, gebaseerd op de LayoutOrder gehele waarde van elk item, of alfanumeriek op basis van de Name van het item.
Om elementen om te keren, zoals een rechts-naar-links volgorde in een horizontale lijst, moet je de sortering omkeren. Als bijvoorbeeld vier items zijn geordend op LayoutOrder van 0, 1, 2, 3 respectievelijk, negatief elke waarde om een volgorde van 0, -1, -2, -3 te vormen.
Uitlijning
De HorizontalAlignment en VerticalAlignment eigenschappen bepalen de respectieve X en Y uitlijning van zowel de broers en zussen van de lijst ten opzichte van elkaar en de algehele grenzen van de lijst binnen zijn container. Bijvoorbeeld, een horizontaal gevulde lijst met VerticalAlignment van Center centreert de broers en zussen van de lijst met elkaar en centreert de lijst verticaal in zijn container.
HorizontalAlignment en VerticalAlignment verschillen iets van itemlijnuitlijning in een flex lay-out, waarmee je items in dezelfde lijn kunt uitlijnen zonder dezelfde uitlijning op de algehele grenzen van de lijst in zijn container toe te passen.
Wikkelen
De Wraps boolean controleert of broers en zussen binnen de bovenliggende container naar een andere regel wikkelen wanneer hun standaardgrootte de breedte/hoogte van de grenzen van de container overschrijdt.
Opvulling
De Padding eigenschap bepaalt de hoeveelheid lege ruimte tussen elk lijstitem, ingesteld op ofwel een schaal (percentage van de grootte van de container in de huidige richting) of een offset (statische spatiële waarde vergelijkbaar met pixelgrootte).
Deze eigenschap past geen opvulling rondom de algehele grenzen van de lijst toe; zie UIPadding om boven-, onder-, links- en/of rechtsopvulling toe te passen op de inhoud van de bovenliggende container.
Flex-layouts
Integreren van flex in een UIListLayout is een krachtige manier om gelijkmatig te vullen/distribueren of uit te lijnen/strekken lijstitems over hun lijn, of flex specifieke items over een variabele ruimte.
Hoewel flex een krachtig hulpmiddel is, moet je het niet zonder doel toepassen op een UIListLayout, omdat het een lichte prestatiekost met zich meebrengt boven niet-flex, vooral bij het wijzigen van de lay-out of dynamisch toevoegen/verwijderen van flex-items.
Bovendien kan een gridlay-out verkieslijk zijn wanneer items strikt moeten uitlijnen op een grid in zowel de X als Y richtingen, aangezien gridlay-outs een consistente celgrootte afdwingen terwijl flexlay-outs een variabel aantal items per lijn kunnen gebruiken.
Gelijkmatig vullen of distribueren
Wanneer de lijstlay-out's vulrichting is ingesteld op Horizontal, specificeert de HorizontalFlex eigenschap hoe extra horizontale ruimte in de bovenliggende container moet worden verdeeld. Evenzo, wanneer de vulrichting is ingesteld op Vertical, specificeert de VerticalFlex eigenschap hoe extra verticale ruimte moet worden verdeeld.
Een praktische toepassing van HorizontalFlex is een tabblad venster interface waar flex de tabbladbalk gelijkmatig vult, ongeacht het aantal tabbladen. Geen enkele benadering is gemakkelijker dan flex in dit geval, omdat het automatisch de breedte van elk tabblad berekent zonder door de ontwikkelaar gedefinieerde breedte-instellingen, en het past zich automatisch aan als het aantal tabbladen verandert.
Itemlijnuitlijning
De ItemLineAlignment eigenschap definieert de kruis-richting uitlijning van broers en zussen binnen een lijn, waardoor je objecten van verschillende breedtes/hoogtes kunt uitlijnen of objecten van kleinere breedte/hoogte de hele lijn kunt laten vullen.
Een praktische gebruiksgeval voor ItemLineAlignment is om een reeks inconsistent geconfigureerde tegels uit te rekken om hun hele rij te vullen (Stretch), waardoor de lay-out coherenter wordt.
Flex individuele items
Hoewel het flexen van een hele lay-out een krachtige functie is, zijn bepaalde lay-outs beter geschikt voor individueel itemflexen. In dergelijke lay-outs behouden sommige elementen in de lijst hun kernmaat terwijl andere items flexen om variabele ruimtes te vullen. Een praktische toepassing is een schuifbalk-widget met uniforme labels aan beide uiteinden en een flexibele schuifbalk die de volledige breedte ertussen vult.
Om één specifiek lijstitem als flexibel in te stellen, voeg je een UIFlexItem toe als een kind van het flexibele item, en stel je de FlexMode eigenschap in op Fill, Grow, Shrink, of Custom.
