PcoWSkbVqDnWTu_dm2ix
Collapse Sidebar
  1. API Reference
  2. UIListLayout

UIListLayout

Show deprecated
Hide content
  1. apireference
  2. uilistlayout

UIListLayout

Show deprecated

A UIListLayout lays out sibling UI elements in a single row within the parent UI element, either horizontally or vertically. Each sibling UI element retains its original GuiObject/Size, but its GuiObject/Position will be taken under control by the UIListLayout. While under control, the Position property of sibling UI elements will not be editable in the Properties window.

You can use the elements’ GuiObject/LayoutOrder by changing UIListLayout/SortOrder to LayoutOrder. A UIListLayout will automatically re-layout elements when elements are added/removed, or if a relevant property changes: GuiObject/LayoutOrder, Instance/Name or GuiObject/Size. This can be triggered manually by calling UIGridStyleLayout/ApplyLayout, though this is typically not necessary.

Since each property that changes how elements are laid out will re-apply the layout, it is recommended to set the Instance/Parent property last so that the layout is only applied once. Similarly, since adding more UI elements will also re-apply the layout, add the UIListLayout last so it does not recalculate positions after each element.

Properties

UDim

Padding

Determines the amount of free space between each element.

Inherited from UIGridStyleLayout: Show Hide

Vector2

AbsoluteContentSize

[ReadOnly] [NotReplicated]

The absolute size of space being taken up by the grid layout.
FillDirection

FillDirection

Determines the axis in which UI elements are laid out.
HorizontalAlignment

HorizontalAlignment

Determines the horizontal alignment of UI elements within the parent element.
SortOrder

SortOrder

Determines the manner in which the next UI element is chosen when being laid out.
VerticalAlignment

VerticalAlignment

Determines the vertical alignment of UI elements within the parent element.

Inherited from Instance: Show Hide

bool

Archivable

Determines if an Instance can be cloned using /Instance/Clone or saved to file.
string

ClassName

[ReadOnly] [NotReplicated]

A read-only string representing the class this Instance belongs to
int

DataCost

[Hidden] [ReadOnly] [NotReplicated] [Deprecated]

The cost of saving the instance using data persistence.
string

Name

A non-unique identifier of the Instance
Instance

Parent

[NotReplicated]

Determines the hierarchical parent of the Instance
bool

RobloxLocked

[Hidden]

A deprecated property that used to protect CoreGui objects
bool

archivable

[Hidden] [NotReplicated] [Deprecated]
string

className

[ReadOnly] [NotReplicated] [Deprecated]

Functions

Inherited from Instance: Show Hide

void

ClearAllChildren ( )

This function destroys all of an Instance’s children.
Instance

Clone ( )

Create a copy of an object and all its descendants, ignoring objects that are not Instance/Archivable|Archivable
void

Destroy ( )

Sets the Instance/Parent property to nil, locks the Instance/Parent property, disconnects all connections and calls Destroy on all children.
Instance

FindFirstAncestor ( string name )

Returns the first ancestor of the Instance whose Instance/Name is equal to the given name.
Instance

FindFirstAncestorOfClass ( string className )

Returns the first ancestor of the Instance whose Instance/ClassName is equal to the given className.
Instance

FindFirstAncestorWhichIsA ( string className )

Returns the first ancestor of the Instance for whom Instance/IsA returns true for the given className.
Instance

FindFirstChild ( string name , bool recursive )

Returns the first child of the Instance found with the given name.
Instance

FindFirstChildOfClass ( string className )

Returns the first child of the Instance whose Instance/ClassName|ClassName is equal to the given className.
Instance

FindFirstChildWhichIsA ( string className , bool recursive )

Returns the first child of the Instance for whom Instance/IsA returns true for the given className.
Instance

GetActor ( )

Variant

GetAttribute ( string attribute )

Returns the attribute which has been assigned to the given name
RBXScriptSignal

GetAttributeChangedSignal ( string attribute )

Returns an event that fires when the given attribute changes
Dictionary

GetAttributes ( )

Returns a dictionary of string → variant pairs for each of the Instance|Instance’s attributes
Objects

GetChildren ( )

Returns an array containing all of the Instance’s children.
string

GetDebugId ( int scopeLength )

[NotBrowsable]

Returns a coded string of the Instances DebugId used internally by Roblox.
Array

GetDescendants ( )

[CustomLuaState]

Returns an array containing all of the descendants of the instance
string

GetFullName ( )

Returns a string describing the Instance’s ancestry.
RBXScriptSignal

GetPropertyChangedSignal ( string property )

Get an event that fires when a given property of an object changes.
bool

IsA ( string className )

[CustomLuaState]

Returns true if an Instance’s class matches or inherits from a given class
bool

IsAncestorOf ( Instance descendant )

Returns true if an Instance is an ancestor of the given descendant.
bool

IsDescendantOf ( Instance ancestor )

Returns true if an Instance is a descendant of the given ancestor.
void

Remove ( )

[Deprecated]

Sets the object’s Parent to nil, and does the same for all its descendants.
void

SetAttribute ( string attribute , Variant value )

Sets the attribute with the given name to the given value
Instance

WaitForChild ( string childName , double timeOut )

[CustomLuaState] [CanYield]

Returns the child of the Instance with the given name. If the child does not exist, it will yield the current thread until it does.
Objects

children ( )

[Deprecated]

Returns an array of the object’s children.
Instance

clone ( )

[Deprecated]
void

destroy ( )

[Deprecated]
Instance

findFirstChild ( string name , bool recursive )

[Deprecated]
Objects

getChildren ( )

[Deprecated]
bool

isA ( string className )

[Deprecated] [CustomLuaState]
bool

isDescendantOf ( Instance ancestor )

[Deprecated]
void

remove ( )

[Deprecated]

Events

Inherited from Instance: Show Hide

RBXScriptSignal

AncestryChanged ( Instance child , Instance parent )

Fires when the Instance/Parent property of the object or one of its ancestors is changed.
RBXScriptSignal

AttributeChanged ( string attribute )

Fires whenever an attribute is changed on the Instance
RBXScriptSignal

Changed ( string property )

Fired immediately after a property of an object changes.
RBXScriptSignal

ChildAdded ( Instance child )

Fires when an object is parented to this Instance.
RBXScriptSignal

ChildRemoved ( Instance child )

Fires when a child is removed from this Instance.
RBXScriptSignal

DescendantAdded ( Instance descendant )

Fires when a descendant is added to the Instance
RBXScriptSignal

DescendantRemoving ( Instance descendant )

Fires immediately before a descendant of the Instance is removed.
RBXScriptSignal

childAdded ( Instance child )

[Deprecated]

Code Samples

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

Show All Fonts

This code sample renders a list of all the available fonts.

local frame = script.Parent

-- Create a TextLabel displaying each font
for i, font in pairs(Enum.Font:GetEnumItems()) do
	local tl = Instance.new("TextLabel")
	tl.Name = font.Name
	-- Set the text properties
	tl.Text = font.Name
	tl.Font = font
	-- Some rendering properties
	tl.TextSize = 24
	tl.TextXAlignment = Enum.TextXAlignment.Left
	-- Size the frame equal to the height of the text
	tl.Size = UDim2.new(1, 0, 0, tl.TextSize)
	-- Add to the parent frame
	tl.Parent = frame
end

-- Layout the frames in a list (if they aren't already)
if not frame:FindFirstChildOfClass("UIListLayout") then
	Instance.new("UIListLayout", frame)
end

UI Scale Demo

This code sample creates some images of a lock and scales them using UIScale. It lays them out suing a UIListLayout.

-- Lay out the images in a list
Instance.new("UIListLayout", script.Parent).SortOrder = Enum.SortOrder.LayoutOrder

-- Create some images of varying sizes using UIScale objects
for size = .2, 1.5, .2 do
	local image = Instance.new("ImageLabel")
	image.Image = "rbxassetid://284402752" -- an image of a Lock
	image.Parent = script.Parent
	image.Size = UDim2.new(0, 100, 0, 100)
	-- Scale the image by adding a UIScale with the size
	--  Note: this is a shorthand since we don't need a reference to the UIScale
	Instance.new("UIScale", image).Scale = size
end
UIInlineLayout UIPadding