LayoutOrder

Value Type: int

Description:

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.

Expand

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

Copy Code Light Theme

UI Sort Order

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

Expand

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

Copy Code Light Theme