LayoutOrder
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