UIListLayout

Show Deprecated

A UIListLayout lays out sibling UI elements in a single row within the parent UI element, either horizontally or vertically. Each sibling UI element retains its original GuiObject.Size, but its GuiObject.Position will be taken under control by the UIListLayout. While under control, the Position property of sibling UI elements will not be editable in the Properties window.

You can use the elements' GuiObject.LayoutOrder by changing UIListLayout.SortOrder to LayoutOrder. A UIListLayout will automatically re-layout elements when elements are added/removed, or if a relevant property changes: GuiObject.LayoutOrder, Instance.Name or GuiObject.Size. This can be triggered manually by calling UIGridStyleLayout:ApplyLayout(), though this is typically not necessary.

Since each property that changes how elements are laid out will re-apply the layout, it is recommended to set the Instance.Parent property last so that the layout is only applied once. Similarly, since adding more UI elements will also re-apply the layout, add the UIListLayout last so it does not recalculate positions after each element.

Code Samples

UI Scale Demo

1-- Lay out the images in a list
2Instance.new("UIListLayout", script.Parent).SortOrder = Enum.SortOrder.LayoutOrder
3
4-- Create some images of varying sizes using UIScale objects
5for size = 0.2, 1.5, 0.2 do
6 local image = Instance.new("ImageLabel")
7 image.Image = "rbxassetid://284402752" -- an image of a Lock
8 image.Parent = script.Parent
9 image.Size = UDim2.new(0, 100, 0, 100)
10 -- Scale the image by adding a UIScale with the size
11 -- Note: this is a shorthand since we don't need a reference to the UIScale
12 Instance.new("UIScale", image).Scale = size
13end
Show All Fonts

1local frame = script.Parent
2
3-- Create a TextLabel displaying each font
4for _, font in pairs(Enum.Font:GetEnumItems()) do
5 local textLabel = Instance.new("TextLabel")
6 textLabel.Name = font.Name
7 -- Set the text properties
8 textLabel.Text = font.Name
9 textLabel.Font = font
10 -- Some rendering properties
11 textLabel.TextSize = 24
12 textLabel.TextXAlignment = Enum.TextXAlignment.Left
13 -- Size the frame equal to the height of the text
14 textLabel.Size = UDim2.new(1, 0, 0, textLabel.TextSize)
15 -- Add to the parent frame
16 textLabel.Parent = frame
17end
18
19-- Layout the frames in a list (if they aren't already)
20if not frame:FindFirstChildOfClass("UIListLayout") then
21 local uiListLayout = Instance.new("UIListLayout")
22 uiListLayout.Parent = frame
23end
UI Sort Order

1-- Place in a script in a UIListLayout
2local uiGridLayout = script.Parent
3
4-- Some data to work with
5local scores = {
6 ["Player1"] = 2048,
7 ["Ozzypig"] = 1337,
8 ["Shedletsky"] = 1250,
9 ["Cozecant"] = 96,
10}
11
12-- Build a scoreboard
13for name, score in pairs(scores) do
14 local textLabel = Instance.new("TextLabel")
15 textLabel.Text = name .. ": " .. score
16 textLabel.Parent = script.Parent
17 textLabel.LayoutOrder = -score -- We want higher scores first, so negate for descending order
18 textLabel.Name = name
19 textLabel.Size = UDim2.new(0, 200, 0, 50)
20 textLabel.Parent = uiGridLayout.Parent
21end
22
23while true do
24 -- The name is the player's name
25 uiGridLayout.SortOrder = Enum.SortOrder.Name
26 uiGridLayout:ApplyLayout()
27 task.wait(2)
28 -- Since we set the LayoutOrder to the score, this will sort by descending score!
29 uiGridLayout.SortOrder = Enum.SortOrder.LayoutOrder
30 uiGridLayout:ApplyLayout()
31 task.wait(2)
32end

Summary

Properties

Determines the amount of free space between each element.

Events

Methods

Properties

Padding

Determines the amount of free space between each element. Can be set either using scale (Percentage of parent's size in the current direction) or offset (a static spacing value, similar to pixel size).

Events

Methods