UITableLayout

Visualizza obsoleti

*Questo contenuto è tradotto usando AI (Beta) e potrebbe contenere errori. Per visualizzare questa pagina in inglese, clicca qui.

A UITableLayout lays out UI elements as rows in a table. Child UI elements (the table cells) of these rows are then arranged in columns (within rows). Each cell within a row has the same height, and each cell within a column has the same width.

Modificando il UIGridStyleLayout.FillDirection, gli elementi UI fratelli possono agire come colonne invece.

Quando viene applicato, un UITableLayout prenderà il controllo di fratelli e elementi di cellule' GuiObject.Size e GuiObject.Position . Cambiando questi nella finestra Proprietà non creerà alcun effetto.

Le dimensioni delle celle nella tabella di destinazione sono controllate dalle dimensioni dell'elemento UI padre. A meno che UITableLayout.FillEmptySpaceColumns o UITableLayout.FillEmptySpaceRows non siano abilitati, le dimensioni delle celle saranno quelle dell'elemento UI padre (e quindi le tabelle con più di una cellula estendono al di fuori della loro parent).

Le celle continueranno a rispettare gli oggetti UISizeConstraint all'interno di loro. In altre parole, impostare UISizeConstraint.MinSize su UISizeConstraints all'interno delle cell

Campioni di codice

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table

local frame = script.Parent

-- Table data
local headerWidth = { 200, 80, 80 }
local headers = {
	"Name",
	"Job",
	"Cash",
}
local data = {
	{ "Bob", "Waiter", 100 },
	{ "Lisa", "Police", 200 },
	{ "George", "-", 50 },
}

-- First, build the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.FillEmptySpaceColumns = false
uiTableLayout.FillEmptySpaceRows = false
uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
uiTableLayout.Parent = frame

-- Next, create column headers
local headerFrame = Instance.new("Frame")
headerFrame.Name = "Headers"
headerFrame.Parent = frame
for i = 1, #headers do
	local headerText = headers[i]
	local headerCell = Instance.new("TextLabel")
	headerCell.Text = headerText
	headerCell.Name = headerText
	headerCell.LayoutOrder = i
	headerCell.Size = UDim2.new(0, 0, 0, 24)
	headerCell.Parent = headerFrame
	local headerSize = Instance.new("UISizeConstraint")
	headerSize.MinSize = Vector2.new(headerWidth[i], 0)
	headerSize.Parent = headerCell
end

-- Finally, add data rows by iterating over each row and the columns in that row
for index, value in ipairs(data) do
	local rowData = value
	local rowFrame = Instance.new("Frame")
	rowFrame.Name = "Row" .. index
	rowFrame.Parent = frame
	for col = 1, #value do
		local cellData = rowData[col]
		local cell = Instance.new("TextLabel")
		cell.Text = cellData
		cell.Name = headers[col]
		cell.TextXAlignment = Enum.TextXAlignment.Left
		if tonumber(cellData) then -- If this cell is a number, right-align it instead
			cell.TextXAlignment = Enum.TextXAlignment.Right
		end
		cell.ClipsDescendants = true
		cell.Size = UDim2.new(0, 0, 0, 24)
		cell.Parent = rowFrame
	end
end

Sommario

Proprietà

FillEmptySpaceColumns:bool
Lettura Parallela
Determina se le cellule sono di dimensioni in modo che occupino lo spazio orizzontale dell'elemento UI padre.
FillEmptySpaceRows:bool
Lettura Parallela
Determina se le celle sono di dimensioni in modo che occupino lo spazio verticale dell'elemento UI padre.
MajorAxis:Enum.TableMajorAxis
Lettura Parallela
Determina se gli elementi dell'interfaccia utente sorella vengono trattati come righe o colonne.
Padding:UDim2
Lettura Parallela
Determina lo spazio vuoto tra le cellule.

Proprietà provenienti da UIGridStyleLayout

AbsoluteContentSize:Vector2
Sola Lettura
Non Replicato
La dimensione assoluta dello spazio occupato dalla griglia di layout.
FillDirection:Enum.FillDirection
Lettura Parallela
Determina l'asse in cui vengono posizionati gli oggetti UI.
HorizontalAlignment:Enum.HorizontalAlignment
Lettura Parallela
Determina l'allineamento orizzontale degli elementi UI all'interno dell'elemento padre.
SortOrder:Enum.SortOrder
Lettura Parallela
Determina l'ordine in cui gli oggetti dell'interfaccia utente bambino vengono posizionati in una layout.
VerticalAlignment:Enum.VerticalAlignment
Lettura Parallela
Determina l'allineamento verticale degli elementi UI all'interno dell'elemento padre.

Visualizza tutti gli elementi ereditati da Instance

Visualizza tutti gli elementi ereditati da Object

Metodi

Visualizza tutti gli elementi ereditati da Instance

Visualizza tutti gli elementi ereditati da Object

Eventi

Visualizza tutti gli elementi ereditati da Instance

Visualizza tutti gli elementi ereditati da Object

Proprietà

FillEmptySpaceColumns

bool

Lettura Parallela

FillEmptySpaceColumns determina se la dimensione X delle cellule è impostata in modo che l'intero spazio orizzontale dell'elemento UI padre venga utilizzato. Abilitando questo è utile per assicurarsi che la tua tabella occupi una quantità più facilmente predicibile di spazio orizzontale (la dimensione X dell'elemento UI padre). È ancora possibile che un UISizeConstraint applicato alle cellule causi un flusso/oltrorso.

Quando si abilita questa Proprietà, le larghezze della colonna saranno circa uguali alla GuiBase2d.AbsoluteSize .X componente diviso dal numero di colonne (non tenendo conto del pad o di altri fattori).

Campioni di codice

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table

local frame = script.Parent

-- Table data
local headerWidth = { 200, 80, 80 }
local headers = {
	"Name",
	"Job",
	"Cash",
}
local data = {
	{ "Bob", "Waiter", 100 },
	{ "Lisa", "Police", 200 },
	{ "George", "-", 50 },
}

-- First, build the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.FillEmptySpaceColumns = false
uiTableLayout.FillEmptySpaceRows = false
uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
uiTableLayout.Parent = frame

-- Next, create column headers
local headerFrame = Instance.new("Frame")
headerFrame.Name = "Headers"
headerFrame.Parent = frame
for i = 1, #headers do
	local headerText = headers[i]
	local headerCell = Instance.new("TextLabel")
	headerCell.Text = headerText
	headerCell.Name = headerText
	headerCell.LayoutOrder = i
	headerCell.Size = UDim2.new(0, 0, 0, 24)
	headerCell.Parent = headerFrame
	local headerSize = Instance.new("UISizeConstraint")
	headerSize.MinSize = Vector2.new(headerWidth[i], 0)
	headerSize.Parent = headerCell
end

-- Finally, add data rows by iterating over each row and the columns in that row
for index, value in ipairs(data) do
	local rowData = value
	local rowFrame = Instance.new("Frame")
	rowFrame.Name = "Row" .. index
	rowFrame.Parent = frame
	for col = 1, #value do
		local cellData = rowData[col]
		local cell = Instance.new("TextLabel")
		cell.Text = cellData
		cell.Name = headers[col]
		cell.TextXAlignment = Enum.TextXAlignment.Left
		if tonumber(cellData) then -- If this cell is a number, right-align it instead
			cell.TextXAlignment = Enum.TextXAlignment.Right
		end
		cell.ClipsDescendants = true
		cell.Size = UDim2.new(0, 0, 0, 24)
		cell.Parent = rowFrame
	end
end

FillEmptySpaceRows

bool

Lettura Parallela

FillEmptySpaceSeconds determina se la dimensione Y delle celle è impostata in modo che l'intero spazio verticale dell'elemento UI padre venga utilizzato. Abilitando questo è utile per assicurarsi che la tua tabella occupi una quantità più facilmente predicibile di spazio verticale (la dimensione Y dell'elemento UI padre). È ancora possibile che un UISizeConstraint applicato alle cellule causerà un flusso/oltrorsovero.

Quando si abilita questa Proprietà, le altezze della riga saranno circa uguali alle dimensioni di parentGuiBase2d.AbsoluteSize .Y component diviso dal numero di righe (non in conto di spazio o altri fattori).

Campioni di codice

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table

local frame = script.Parent

-- Table data
local headerWidth = { 200, 80, 80 }
local headers = {
	"Name",
	"Job",
	"Cash",
}
local data = {
	{ "Bob", "Waiter", 100 },
	{ "Lisa", "Police", 200 },
	{ "George", "-", 50 },
}

-- First, build the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.FillEmptySpaceColumns = false
uiTableLayout.FillEmptySpaceRows = false
uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
uiTableLayout.Parent = frame

-- Next, create column headers
local headerFrame = Instance.new("Frame")
headerFrame.Name = "Headers"
headerFrame.Parent = frame
for i = 1, #headers do
	local headerText = headers[i]
	local headerCell = Instance.new("TextLabel")
	headerCell.Text = headerText
	headerCell.Name = headerText
	headerCell.LayoutOrder = i
	headerCell.Size = UDim2.new(0, 0, 0, 24)
	headerCell.Parent = headerFrame
	local headerSize = Instance.new("UISizeConstraint")
	headerSize.MinSize = Vector2.new(headerWidth[i], 0)
	headerSize.Parent = headerCell
end

-- Finally, add data rows by iterating over each row and the columns in that row
for index, value in ipairs(data) do
	local rowData = value
	local rowFrame = Instance.new("Frame")
	rowFrame.Name = "Row" .. index
	rowFrame.Parent = frame
	for col = 1, #value do
		local cellData = rowData[col]
		local cell = Instance.new("TextLabel")
		cell.Text = cellData
		cell.Name = headers[col]
		cell.TextXAlignment = Enum.TextXAlignment.Left
		if tonumber(cellData) then -- If this cell is a number, right-align it instead
			cell.TextXAlignment = Enum.TextXAlignment.Right
		end
		cell.ClipsDescendants = true
		cell.Size = UDim2.new(0, 0, 0, 24)
		cell.Parent = rowFrame
	end
end

MajorAxis

Enum.TableMajorAxis

Lettura Parallela

MajorAxis determina se gli elementi dell'interfaccia utente fratello vengono trattati come righe o colonne.

Campioni di codice

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table

local frame = script.Parent

-- Table data
local headerWidth = { 200, 80, 80 }
local headers = {
	"Name",
	"Job",
	"Cash",
}
local data = {
	{ "Bob", "Waiter", 100 },
	{ "Lisa", "Police", 200 },
	{ "George", "-", 50 },
}

-- First, build the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.FillEmptySpaceColumns = false
uiTableLayout.FillEmptySpaceRows = false
uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
uiTableLayout.Parent = frame

-- Next, create column headers
local headerFrame = Instance.new("Frame")
headerFrame.Name = "Headers"
headerFrame.Parent = frame
for i = 1, #headers do
	local headerText = headers[i]
	local headerCell = Instance.new("TextLabel")
	headerCell.Text = headerText
	headerCell.Name = headerText
	headerCell.LayoutOrder = i
	headerCell.Size = UDim2.new(0, 0, 0, 24)
	headerCell.Parent = headerFrame
	local headerSize = Instance.new("UISizeConstraint")
	headerSize.MinSize = Vector2.new(headerWidth[i], 0)
	headerSize.Parent = headerCell
end

-- Finally, add data rows by iterating over each row and the columns in that row
for index, value in ipairs(data) do
	local rowData = value
	local rowFrame = Instance.new("Frame")
	rowFrame.Name = "Row" .. index
	rowFrame.Parent = frame
	for col = 1, #value do
		local cellData = rowData[col]
		local cell = Instance.new("TextLabel")
		cell.Text = cellData
		cell.Name = headers[col]
		cell.TextXAlignment = Enum.TextXAlignment.Left
		if tonumber(cellData) then -- If this cell is a number, right-align it instead
			cell.TextXAlignment = Enum.TextXAlignment.Right
		end
		cell.ClipsDescendants = true
		cell.Size = UDim2.new(0, 0, 0, 24)
		cell.Parent = rowFrame
	end
end

Padding

UDim2

Lettura Parallela

L'inserimento posiziona gli elementi con spazio extra tra di loro. Questo può essere fatto usando componenti di dimensioni Scale o Offset di UDim2. I valori negativi possono portare gli elementi più vicini tra loro. Quando non è zero, gli elementi UI fratelli possono essere visibili tra le celle contenute in loro.

Campioni di codice

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table

local frame = script.Parent

-- Table data
local headerWidth = { 200, 80, 80 }
local headers = {
	"Name",
	"Job",
	"Cash",
}
local data = {
	{ "Bob", "Waiter", 100 },
	{ "Lisa", "Police", 200 },
	{ "George", "-", 50 },
}

-- First, build the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.FillEmptySpaceColumns = false
uiTableLayout.FillEmptySpaceRows = false
uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
uiTableLayout.Parent = frame

-- Next, create column headers
local headerFrame = Instance.new("Frame")
headerFrame.Name = "Headers"
headerFrame.Parent = frame
for i = 1, #headers do
	local headerText = headers[i]
	local headerCell = Instance.new("TextLabel")
	headerCell.Text = headerText
	headerCell.Name = headerText
	headerCell.LayoutOrder = i
	headerCell.Size = UDim2.new(0, 0, 0, 24)
	headerCell.Parent = headerFrame
	local headerSize = Instance.new("UISizeConstraint")
	headerSize.MinSize = Vector2.new(headerWidth[i], 0)
	headerSize.Parent = headerCell
end

-- Finally, add data rows by iterating over each row and the columns in that row
for index, value in ipairs(data) do
	local rowData = value
	local rowFrame = Instance.new("Frame")
	rowFrame.Name = "Row" .. index
	rowFrame.Parent = frame
	for col = 1, #value do
		local cellData = rowData[col]
		local cell = Instance.new("TextLabel")
		cell.Text = cellData
		cell.Name = headers[col]
		cell.TextXAlignment = Enum.TextXAlignment.Left
		if tonumber(cellData) then -- If this cell is a number, right-align it instead
			cell.TextXAlignment = Enum.TextXAlignment.Right
		end
		cell.ClipsDescendants = true
		cell.Size = UDim2.new(0, 0, 0, 24)
		cell.Parent = rowFrame
	end
end