Engine

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 Sort Order

-- Place in a script in a UIListLayout
local uiGridLayout = script.Parent
-- Some data to work with
local scores = {
["Player1"] = 2048,
["Ozzypig"] = 1337,
["Shedletsky"] = 1250,
["Cozecant"] = 96,
}
-- Build a scoreboard
for name, score in pairs(scores) do
local textLabel = Instance.new("TextLabel")
textLabel.Text = name .. ": " .. score
textLabel.Parent = script.Parent
textLabel.LayoutOrder = -score -- We want higher scores first, so negate for descending order
textLabel.Name = name
textLabel.Size = UDim2.new(0, 200, 0, 50)
textLabel.Parent = uiGridLayout.Parent
end
while true do
-- The name is the player's name
uiGridLayout.SortOrder = Enum.SortOrder.Name
uiGridLayout:ApplyLayout()
task.wait(2)
-- Since we set the LayoutOrder to the score, this will sort by descending score!
uiGridLayout.SortOrder = Enum.SortOrder.LayoutOrder
uiGridLayout:ApplyLayout()
task.wait(2)
end
Show All Fonts

local frame = script.Parent
-- Create a TextLabel displaying each font
for _, font in pairs(Enum.Font:GetEnumItems()) do
local textLabel = Instance.new("TextLabel")
textLabel.Name = font.Name
-- Set the text properties
textLabel.Text = font.Name
textLabel.Font = font
-- Some rendering properties
textLabel.TextSize = 24
textLabel.TextXAlignment = Enum.TextXAlignment.Left
-- Size the frame equal to the height of the text
textLabel.Size = UDim2.new(1, 0, 0, textLabel.TextSize)
-- Add to the parent frame
textLabel.Parent = frame
end
-- Layout the frames in a list (if they aren't already)
if not frame:FindFirstChildOfClass("UIListLayout") then
local uiListLayout = Instance.new("UIListLayout")
uiListLayout.Parent = frame
end
UI Scale Demo

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

Summary

Properties

Properties inherited from UIGridStyleLayout

Properties

HorizontalFlex

read parallel

ItemLineAlignment

read parallel

Padding

read parallel

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).

read parallel

Wraps

read parallel

Methods

Events