Composants de Disposition de l'Interface Graphique (GUI)

ComposantsDétails
UIListLayoutOrganise les éléments de l'interface utilisateur dans une liste verticale ou horizontale.
UIGridLayoutOrganise les éléments de l'interface utilisateur dans une grille.
UITableLayoutOrganise les éléments de l'interface utilisateur sous forme de tableau.
UIPageLayoutCrée des pages entre lesquelles on peut naviguer.

UIListLayout

Image 1
Roblox Studio
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 300, 0, 300)
frame.Position = UDim2.new(0.5, -150, 0.5, -150)
frame.BackgroundColor3 = Color3.fromRGB(255, 165, 100)
frame.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiListLayout = Instance.new("UIListLayout")
uiListLayout.SortOrder = Enum.SortOrder.LayoutOrder
uiListLayout.Padding = UDim.new(0, 10) -- Space between elements
uiListLayout.Parent = frame

-- Adding some elements to the frame
for i = 1, 5 do
	local item = Instance.new("TextLabel")
	item.Size = UDim2.new(1, 0, 0, 50)
	item.Text = "Item " .. i
	item.TextColor3 = Color3.fromRGB(0,0,0) 

	item.LayoutOrder = i
	item.Parent = frame
end

UIGridLayout

Image 1
Roblox Studio
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 400, 0, 300)
frame.Position = UDim2.new(0.5, -200, 0.5, -150)
frame.BackgroundColor3 = Color3.fromRGB(255, 165, 100)
frame.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiGridLayout = Instance.new("UIGridLayout")
uiGridLayout.CellSize = UDim2.new(0, 100, 0, 100) -- Each cell is 100x100 pixels
uiGridLayout.CellPadding = UDim2.new(0, 10, 0, 10) -- Padding between cells
uiGridLayout.Parent = frame

-- Adding some elements to the frame
for i = 1, 6 do
	local item = Instance.new("TextLabel")
	item.Size = UDim2.new(0, 100, 0, 100)
	item.Text = "Item " .. i
	item.Parent = frame
end

UITableLayout

Image 1
Roblox Studio
local playerGui = game.Players.LocalPlayer:WaitForChild("PlayerGui")

-- Create the main frame
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 500, 0, 300)
frame.Position = UDim2.new(0.5, -250, 0.5, -150)
frame.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
frame.Parent = playerGui:FindFirstChild("ScreenGui") or Instance.new("ScreenGui", playerGui)

-- Table data
local headers = {"header1", "header2"}
local data = {
	{"data_1a", "data_1b"},
	{"data_2a", "data_2b"},
}

-- Create the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.Padding = UDim2.new(0, 0, 0, 0)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
uiTableLayout.Parent = frame

-- Create header and row cells
local function createCell(text, parent, data_index)
	local cell = Instance.new("TextLabel")
	cell.TextColor3 = Color3.fromRGB(255, 255, 255) 
	cell.BackgroundColor3 = Color3.fromRGB(255, 165, 0)

	cell.Text = text
	cell.Size = UDim2.new(0, 150, 0, 24)
	cell.TextXAlignment = Enum.TextXAlignment.Center
	cell.LayoutOrder = data_index
	cell.Parent = parent
end

-- Create the header row
local headerFrame = Instance.new("Frame", frame)
headerFrame.Name = "Headers"
headerFrame.BackgroundColor3 = Color3.fromRGB(255, 165, 0)
for header_index, header in ipairs(headers) do
	createCell(header, headerFrame, header_index)
end

-- Create data rows
for data_index, row in ipairs(data) do
	local rowFrame = Instance.new("Frame", frame)
	rowFrame.Name = "Row" .. data_index
	rowFrame.BackgroundColor3 = Color3.fromRGB(255, 165, 0)
	for header_index, cellData in ipairs(row) do
		createCell(cellData, rowFrame, data_index)
	end
end

UIPageLayout

Image 1
Roblox Studio
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 300, 0, 300)
frame.Position = UDim2.new(0.5, -150, 0.5, -150)
frame.BackgroundColor3 = Color3.fromRGB(100, 100, 100)
-- Ensure only one page is visible at a time

frame.ClipsDescendants = true 
local playerGui = game.Players.LocalPlayer:WaitForChild("PlayerGui")
local screenGui = playerGui:WaitForChild("ScreenGui")
frame.Parent = screenGui



local uiPageLayout = Instance.new("UIPageLayout")
uiPageLayout.FillDirection = Enum.FillDirection.Horizontal
uiPageLayout.SortOrder = Enum.SortOrder.LayoutOrder
uiPageLayout.EasingStyle = Enum.EasingStyle.Quad
uiPageLayout.EasingDirection = Enum.EasingDirection.Out
uiPageLayout.TweenTime = 0.5 
-- Time taken to transition between pages
uiPageLayout.Parent = frame


-- Adding some pages to the frame
for i = 1, 3 do
	local page = Instance.new("Frame")
	page.BackgroundColor3 = Color3.fromRGB(255 , 165, 0)
	page.Size = UDim2.new(1, 0, 1, 0)
	page.LayoutOrder = i

	local textLabel = Instance.new("TextLabel")
	textLabel.Size = UDim2.new(1, 0, 1, 0)
	textLabel.Text = "Page " .. i
	textLabel.TextSize = 30
	textLabel.BackgroundColor3 = Color3.fromRGB(255 , 165, 0)
	textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
	textLabel.Parent = page

	page.Parent = frame
end

-- Example of changing pages
spawn(function()
	while true do
		for i = 1, 3 do
			uiPageLayout:JumpToIndex(i - 1)
			wait(1)
		end
	end
end)

Si ce tutoriel vous a été utile et que vous souhaitez soutenir mon travail, veuillez envisager de m'offrir un café.

Merci beaucoup pour votre soutien !

M'offrir un café