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

LayoutOrder

GuiObject

int

LayoutOrder controls the sorting order of a GuiObject when using a UIGridStyleLayout (such as UIListLayout or UIPageLayout) with UIGridStyleLayout/SortOrder set to Enum.SortOrder.LayoutOrder. Lower values take more priority (come before) over values that are higher. If two GuiObject have LayoutOrder set to equal values, the behavior defaults to the order in which the objects were added to their parent. This property doesn’t have any other use if there is no sibling UIGridStyleLayout.

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


Code Samples


GuiObject.LayoutOrder

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