Engine
GuidesTutorialsReferenceResourcesArtDesign

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

Padding: UDim

Determines the amount of free space between each element.

Methods

Events

Properties

Padding

UDim

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

Methods

Events