UITableLayout

Visualizza obsoleti

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

Una griglia UITableLayout distribuisce gli elementi dell'interfaccia utente fratelli come righe in una tabella.Gli elementi UI del bambino (le celle della tabella) di queste righe vengono quindi ordinati in colonne (all'interno delle righe).Ogni cellula all'interno di una riga ha la stessa altezza e ogni cellula all'interno di una colonna ha la stessa larghezza.

Cambiando il UIGridStyleLayout.FillDirection, gli elementi dell'interfaccia utente fratelli possono agire come colonne invece.

Quando viene applicato, un UITableLayout prenderà il controllo di sibling e cell elements' GuiObject.Size e GuiObject.Position .Cambiare questi nella finestra Proprietà è ancora possibile non produrrà alcun effetto.

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

Le celle continueranno a rispettare UISizeConstraint oggetti all'interno di loro.In altre parole, la regolazione di all'interno delle celle di intestazione può determinare la dimensione del resto delle celle.Se UISizeConstraint.MaxSize limita la dimensione di una cella dal riempimento dello spazio assegnato (cioèun'altra riga/colonna è più ampia di essa), si allineerà in alto a sinistra.

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:boolean
    Lettura Parallela

    Determina se le celle sono ridimensionate in modo da occupare lo spazio orizzontale dell'elemento UI padre.

  • FillEmptySpaceRows:boolean
    Lettura Parallela

    Determina se le celle sono ridimensionate in modo da occupare lo spazio verticale dell'elemento UI padre.

  • MajorAxis:Enum.TableMajorAxis
    Lettura Parallela

    Determina se gli elementi dell'interfaccia utente fratelli sono trattati come righe o colonne.

  • Padding:UDim2
    Lettura Parallela

    Determina lo spazio vuoto tra le celle.

Proprietà provenienti da UIGridStyleLayout
Visualizza tutti gli elementi ereditati da Instance
Visualizza tutti gli elementi ereditati da Object

Proprietà

FillEmptySpaceColumns

boolean
Lettura Parallela

FillEmptySpaceColumns determina se la dimensione X delle celle è impostata in modo che l'intero spazio orizzontale dell'elemento padre UI sia utilizzato.Abilitare questo è utile per assicurarsi che la tua tabella occupi una quantità più facilmente prevedibile di spazio orizzontale (la dimensione dell'asse X dell'elemento UI padre).È ancora possibile che un UISizeConstraint applicato alle celle causerà sottodimensionamento/sovradimensionamento.

Quando si abilita questa Proprietà, le larghezze delle colonne saranno approssimativamente uguali alla componente GuiBase2d.AbsoluteSize del parentdivisa per il numero di colonne (senza tenere conto del padding 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

boolean
Lettura Parallela

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

Quando si abilita questa Proprietà, le altezze delle righe saranno approssimativamente uguali alla componente GuiBase2d.AbsoluteSize del parentdivisa per il numero di righe (senza tenere conto del padding 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

MajorAxis

Enum.TableMajorAxis
Lettura Parallela

MajorAxis determina se gli elementi UI fratelli 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

La spaziatura posizionerà gli elementi con spazio extra tra di loro.Questo può essere fatto utilizzando componenti di Scala o Offset di UDim2.I valori negativi possono portare gli elementi più vicini insieme.Quando non è zero, gli elementi UI fratelli possono essere visibili tra le celle contenute in essi.

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
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