Engine

UIGridStyleLayout

Show Deprecated
not creatable
not browsable

The base class for grid style UI layouts.

Summary

Properties

Properties

AbsoluteContentSize

read only
not replicated

The AbsoluteContentSize property of a UIGridStyleLayout shows how much space the elements of the grid are taking up, including any padding created by the grid. This property is particularly useful to size containers of grids such as Frames to make sure they aren't any larger than the grid itself.

It updates as soon as it's read. It won't fire a changed event immediately after the UI has changed, but if the value is read it will be up to date. A Instance.Changed event should fire on the next render step.

Code Samples

Tracking AbsoluteContentSize Changes

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screen = Instance.new("ScreenGui")
screen.Parent = playerGui
local scrollingFrame = Instance.new("ScrollingFrame")
scrollingFrame.AnchorPoint = Vector2.new(0.5, 0.5)
scrollingFrame.Position = UDim2.new(0.5, 0, 0.5, 0)
scrollingFrame.Size = UDim2.new(0, 412, 0, 300)
scrollingFrame.Parent = screen
local grid = Instance.new("UIGridLayout")
grid.CellPadding = UDim2.new(0, 0, 0, 0)
grid.CellSize = UDim2.new(0, 100, 0, 100)
grid.Parent = scrollingFrame
local function onContentSizeChanged()
local absoluteSize = grid.AbsoluteContentSize
scrollingFrame.CanvasSize = UDim2.new(0, absoluteSize.X, 0, absoluteSize.Y)
end
grid:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(onContentSizeChanged)
for x = 1, 10 do
for y = 1, 4 do
local button = Instance.new("TextButton")
button.Text = x .. ", " .. y
button.Parent = scrollingFrame
end
end

FillDirection

read parallel

The FillDirection property determines the axis in which UI elements are laid out. Horizontal will arrange elements from left to right, while Vertical will arrange from top to bottom. To reverse elements (for instance, arrange right to left) you will need to reverse the sorting. This can be done by negating the child UI elements' GuiObject.LayoutOrder values when UIGridStyleLayout.SortOrder is set to LayoutOrder.

Code Samples

UIGridLayout Fill Directions and Alignments

-- Place me in a UIListLayout
local uiGridLayout = script.Parent
while true do
for _, fillDirection in pairs(Enum.FillDirection:GetEnumItems()) do
uiGridLayout.FillDirection = fillDirection
for _, verticalAlignment in pairs(Enum.VerticalAlignment:GetEnumItems()) do
uiGridLayout.VerticalAlignment = verticalAlignment
for _, horizontalAlignment in pairs(Enum.HorizontalAlignment:GetEnumItems()) do
uiGridLayout.HorizontalAlignment = horizontalAlignment
task.wait(1)
end
end
end
end

HorizontalAlignment

read parallel

The HorizontalAlignment property determines the X-axis alignment of the laid-out grid of UI elements, much like TextLabel.TextXAlignment does with TextLabel.Text.

Code Samples

UIGridLayout Fill Directions and Alignments

-- Place me in a UIListLayout
local uiGridLayout = script.Parent
while true do
for _, fillDirection in pairs(Enum.FillDirection:GetEnumItems()) do
uiGridLayout.FillDirection = fillDirection
for _, verticalAlignment in pairs(Enum.VerticalAlignment:GetEnumItems()) do
uiGridLayout.VerticalAlignment = verticalAlignment
for _, horizontalAlignment in pairs(Enum.HorizontalAlignment:GetEnumItems()) do
uiGridLayout.HorizontalAlignment = horizontalAlignment
task.wait(1)
end
end
end
end
read parallel

The SortOrder property determines the next UI element to be placed in a layout. For Name, a simple alphabetic sort is used on the Name property of the child UI elements. For LayoutOrder, a low-to-high sort is used on the GuiObject.LayoutOrder property of child UI elements. If two share the same GuiObject.LayoutOrder, whichever was added sooner to the parent object takes precedence. An easy way to reverse the sorting order is to negate LayoutOrder.

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

VerticalAlignment

read parallel

The VerticalAlignment property determines the Y-axis alignment of the laid-out grid of UI elements, much like TextLabel.TextYAlignment does with TextLabel.Text.

Code Samples

UIGridLayout Fill Directions and Alignments

-- Place me in a UIListLayout
local uiGridLayout = script.Parent
while true do
for _, fillDirection in pairs(Enum.FillDirection:GetEnumItems()) do
uiGridLayout.FillDirection = fillDirection
for _, verticalAlignment in pairs(Enum.VerticalAlignment:GetEnumItems()) do
uiGridLayout.VerticalAlignment = verticalAlignment
for _, horizontalAlignment in pairs(Enum.HorizontalAlignment:GetEnumItems()) do
uiGridLayout.HorizontalAlignment = horizontalAlignment
task.wait(1)
end
end
end
end

Methods

Events