PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience
Collapse Sidebar

LayoutOrder

GuiObject

int

This property controls the sorting order of a GuiObject|GUI when using a UIGridStyleLayout (such as UIListLayout or UIPageLayout) with UIGridStyleLayout/SortOrder set to Enum/SortOrder|Enum.SortOrder.LayoutOrder. It has no functionality if the GUI does not have a sibling UI Layout.

It is a signed 32-bit int, so it can be set to any value from -2,147,483,648 to 2,147,483,647 (inclusive). GUIs are placed in ascending order where lower values take more priority over, and are ordered before, higher values. Values that are equal will fall back to the order they were added in.

If you are unsure if you will need to add an element between two already-existing elements in the future, it can be a good idea to use multiples of 100, i.e. 0, 100, 200. This ensures a large gap of LayoutOrder values you can use for elements ordered in-between other elements.

See also

  • GuiObject/ZIndex, which determines the GUI render order instead of placement order.


Code Samples


Ordering Images with a UIGridLayout

This example uses LayoutOrder within a UIGridLayout to change the order of images.

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer
local playerGui = localPlayer:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui

local uiGridLayout = Instance.new("UIGridLayout")
uiGridLayout.SortOrder = Enum.SortOrder.LayoutOrder
uiGridLayout.Parent = screenGui

local function createImage(color)
	local imageLabel = Instance.new("ImageLabel")
	imageLabel.Image = "rbxassetid://924320031"
	imageLabel.ImageColor3 = color
	imageLabel.Parent = screenGui
	return imageLabel
end

local firstImageLabel = createImage(Color3.new(255, 0, 0))
local secondImageLabel = createImage(Color3.new(0, 255, 0))
local thirdImageLabel = createImage(Color3.new(0, 0, 255))

wait(3) -- wait time to show change in LayoutOrder

firstImageLabel.LayoutOrder = 3
secondImageLabel.LayoutOrder = 1
thirdImageLabel.LayoutOrder = 2

UI Sort Order

This code sample demonstrates sorting data using UIGridStyleLayout/SortOrder and GuiObject/LayoutOrder.

-- Place in a script in a UIListLayout
local uiGridLayout = script.Parent

-- Some data to work with
local scores = {
	["Player1"] = 2048;
	["Ozzypig"] = 1337;
	["Shedletsky"] = 1250;
	["Builderman"] = 1000;  
}

-- Build a scoreboard
for name, score in pairs(scores) do
	local tl = Instance.new("TextLabel")
	tl.Text = name .. ": " .. score
	tl.Parent = script.Parent
	tl.LayoutOrder = -score -- We want higher scores first, so negate for descending order
	tl.Name = name
	tl.Size = UDim2.new(0, 200, 0, 50)
	tl.Parent = uiGridLayout.Parent
end

while true do
	-- The name is the player's name
	uiGridLayout.SortOrder = Enum.SortOrder.Name
	uiGridLayout:ApplyLayout()
	wait(2)
	-- Since we set the LayoutOrder to the score, this will sort by descending score!
	uiGridLayout.SortOrder = Enum.SortOrder.LayoutOrder
	uiGridLayout:ApplyLayout()
	wait(2)
end