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


                       
                          [ReadOnly]


                       
                          [NotReplicated]


                       
                         [Deprecated]

The cost of saving the instance using data persistence.





	


string


                    
                      Name

A non-unique identifier of the Instance





	
		
	


Instance


                    
                      Parent

Determines the hierarchical parent of the Instance





	


bool


                    
                      RobloxLocked


                       
                         [Deprecated]

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

Create a deep copy of a Roblox instance and descendants where Archivable = true.






void

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.






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


                            
                              [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


                            
                               [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


                            
                               [Deprecated]

Returns an array of the object’s children.






Instance


                            
                               [Deprecated]






void


                            
                               [Deprecated]






Instance


                        
                          findFirstChild
                          
                            (
                            
                              
                                
                                
                                




string

                                name
                              
                              
                                ,
                              
                            
                              
                                
                                
                                




bool

                                recursive
                              
                              
                            
                            )


                            
                               [Deprecated]






Objects


                        
                          getChildren
                          
                            (
                            
                            )


                            
                               [Deprecated]






bool


                            
                               [Deprecated]


                            
                              [CustomLuaState]






bool


                        
                          isDescendantOf
                          
                            (
                            
                              
                                
                                
                                




Instance

                                ancestor
                              
                              
                            
                            )


                            
                               [Deprecated]






void


                            
                               [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


                        
                           [DetectingPropertyChanges]

Fired immediately after a property of an object changes.






RBXScriptSignal

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


                        
                           [Deprecated]

Code Samples

UI Sort Order

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

				
					UI Sort Order
				
					Expected Output
				
					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

Show All Fonts

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

				
					Show All Fonts
				
					Expected Output
				
					Expand
					
			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
		
				Copy Code
			
				Light Theme

UI Scale Demo

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

				
					UI Scale Demo
				
					Expected Output
				
					Expand
					
			-- 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
		
				Copy Code
			
				Light Theme

UIGridLayout UIPadding

UIListLayout

UIListLayout

Properties

Functions

ClearAllChildren ( )

Clone ( )

Destroy ( )

FindFirstAncestor ( string name )

FindFirstAncestorOfClass ( string className )

FindFirstAncestorWhichIsA ( string className )

FindFirstChild ( string name , bool recursive )

FindFirstChildOfClass ( string className )

FindFirstChildWhichIsA ( string className , bool recursive )

GetAttribute ( string attribute )

GetAttributeChangedSignal ( string attribute )

GetAttributes ( )

GetChildren ( )

GetDebugId ( int scopeLength )

GetDescendants ( )

GetFullName ( )

GetPropertyChangedSignal ( string property )

IsA ( string className )

IsAncestorOf ( Instance descendant )

IsDescendantOf ( Instance ancestor )

Remove ( )

SetAttribute ( string attribute , Variant value )

WaitForChild ( string childName , double timeOut )

children ( )

clone ( )

destroy ( )

findFirstChild ( string name , bool recursive )

getChildren ( )

isA ( string className )

isDescendantOf ( Instance ancestor )

remove ( )

Events

AncestryChanged ( Instance child , Instance parent )

AttributeChanged ( string attribute )

Changed ( string property )

ChildAdded ( Instance child )

ChildRemoved ( Instance child )

DescendantAdded ( Instance descendant )

DescendantRemoving ( Instance descendant )

childAdded ( Instance child )

Code Samples

UI Sort Order

Show All Fonts

UI Scale Demo

FindFirstAncestor ( `string` name )

FindFirstAncestorOfClass ( `string` className )

FindFirstAncestorWhichIsA ( `string` className )

FindFirstChild ( `string` name , `bool` recursive )

FindFirstChildOfClass ( `string` className )

FindFirstChildWhichIsA ( `string` className , `bool` recursive )

GetAttribute ( `string` attribute )

GetAttributeChangedSignal ( `string` attribute )

GetDebugId ( `int` scopeLength )

GetPropertyChangedSignal ( `string` property )

IsA ( `string` className )

IsAncestorOf ( `Instance` descendant )

IsDescendantOf ( `Instance` ancestor )

SetAttribute ( `string` attribute , `Variant` value )

WaitForChild ( `string` childName , `double` timeOut )

findFirstChild ( `string` name , `bool` recursive )

isA ( `string` className )

isDescendantOf ( `Instance` ancestor )

AncestryChanged ( `Instance` child , `Instance` parent )

AttributeChanged ( `string` attribute )

Changed ( `string` property )

ChildAdded ( `Instance` child )

ChildRemoved ( `Instance` child )

DescendantAdded ( `Instance` descendant )

DescendantRemoving ( `Instance` descendant )

childAdded ( `Instance` child )