UITableLayout

Mostrar obsoleto

*Este conteúdo é traduzido por IA (Beta) e pode conter erros. Para ver a página em inglês, clique aqui.

Um UITableLayout coloca os elementos da interface irmã como linhas em uma tabela. Os elementos da interface irmã (as células da tabela) são então arranjados em colunas (dentro das colunas). Cada célula dentro de uma coluna tem a mesma altura, e cada célula dentro de uma coluna tem a mesma largura.

Ao alterar o UIGridStyleLayout.FillDirection, os elementos da interface irmã podem agir como colunas em vez disso.

Quando aplicado, um UITableLayout levará o controle de GuiObject.Size e GuiObject.Position de elementos irmãos e irmãos. Alterar esses na janela Propriedades ainda é possível sem produzir nenhum efeito.

As dimensões das células na tabela resultante são controladas pelas dimensões do elemento de UI pai. A menos que UITableLayout.FillEmptySpaceColumns ou UITableLayout.FillEmptySpaceRows esteja ativado, as dimensões das células serão as da página de UI pai (e, portanto, as tabelas com mais de uma célula estendem fora de sua página).

As células continuarão a respeitar objetos dentro delas. Em outras palavras, definir UISizeConstraint.MinSize dentro de uma célula dentro do cabeçalho pode determinar o tamanho do resto das células. Se UISizeConstraints

Amostras de código

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

Resumo

Propriedades

FillEmptySpaceColumns:bool
Ler Parallel
Determina se as células têm tamanho suficiente para ocupar o espaço horizontal do elemento da interface pai.
FillEmptySpaceRows:bool
Ler Parallel
Determina se as células têm tamanho suficiente para ocupar o espaço vertical da unidade de UI pai.
MajorAxis:Enum.TableMajorAxis
Ler Parallel
Determina se os elementos da interface de irmão são tratados como linhas ou colunas.
Padding:UDim2
Ler Parallel
Determina o espaço vazio entre as células.

Propriedades herdados de UIGridStyleLayout

AbsoluteContentSize:Vector2
Somente leitura
Não replicado
El tamaño absoluto del espacio que se está ocupando por la cuadrícula.
FillDirection:Enum.FillDirection
Ler Parallel
Determina el eje en el que se alinean los objetos de la interfaz de usuario.
HorizontalAlignment:Enum.HorizontalAlignment
Ler Parallel
Determina el alineamiento horizontal de los elementos de la interfaz de usuario dentro del elemento padre.
SortOrder:Enum.SortOrder
Ler Parallel
Determina el orden en que se colocan los objetos de la interfaz de usuario hija en un layout.
VerticalAlignment:Enum.VerticalAlignment
Ler Parallel
Determina el alineamiento vertical de los elementos de la interfaz de usuario dentro del elemento padre.

Ver todos os herdados de Instance

Ver todos os herdados de Object

Métodos

Ver todos os herdados de Instance

Ver todos os herdados de Object

Eventos

Ver todos os herdados de Instance

Ver todos os herdados de Object

Propriedades

FillEmptySpaceColumns

bool

Ler Parallel

FillEmptySpaceColumns determina se a X size dos células é definida de forma que o espaço horizontal total do elemento da interface pai seja usado. Ativar isso é útil para garantir que sua tabela tenha uma quantidade mais facilmente previsível de espaço horizontal (o tamanho X- axis do elemento da interface pai). Ainda é possível que um UISizeConstraint aplicado aos células cause um subprocesso/sobrecarregamento.

Ao habilitar essa propriedade, as larguras da coluna serão aproximadamente iguais às de seu pai GuiBase2d.AbsoluteSize .X component dividido pelo número de colunas (não contando o espaço reservado ou outros fatores).

Amostras de código

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

Ler Parallel

FillEmptySpaceSeconds determina se a área de Y dos células é configurada para que todo o espaço vertical do elemento da interface vertical seja usado. Ativar isso é útil para garantir que sua tabela tenha uma quantidade mais facilmente previsível de espaço vertical (o tamanho Y- axis do elemento da interface vertical). Ainda é possível que um UISizeConstraint aplicado aos células cause um subfluxo/sobrania de espaço vertical.

Ao habilitar essa propriedade, as alturas da linha serão aproximadamente iguais às alturas dos pais (GuiBase2d.AbsoluteSize).Y component dividido pelo número de linhas (não contando o espaçamento ou outros fatores).

Amostras de código

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

Ler Parallel

O MajorAxis determina se os elementos da interface tratados como irmãos ou colunas.

Amostras de código

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

Ler Parallel

O padrão irá posicionar elementos com espaço extra entre eles. Isso pode ser feito usando componentes de escala ou deslocamento de UDim2. Valores negativos podem trazer elementos mais perto um do outro. Quando não é zero, os elementos da interface irmã pode ser visíveis entre as células contidas nelas.

Amostras de código

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