UITableLayout

Afficher les obsolètes

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

Un UITableLayout distribue les éléments d'interface utilisateur en fils dans un tableau. Les éléments d'interface utilisateur enfants (les cellules de table) de ces fils sont alors rangés en colonnes (dans les colonnes). Chaque cellule dans une colonne a la même hauteur, et chaque cellule dans une colonne a la même largeur.

En changeant le UIGridStyleLayout.FillDirection, les éléments de l'interface utilisateur sœur peuvent agir comme des colonnes à la place.

Lorsqu'il est appliqué, un UITableLayout prendra le contrôle des éléments frère et sœur' GuiObject.Size et GuiObject.Position . Changer ces éléments dans la fenêtre propriétés est toujours possible, mais cela ne produira aucun effet.

Les dimensions des cellules dans la table résultante sont contrôlées par les dimensions de l'élément de l'interface utilisateur parent. À moins que UITableLayout.FillEmptySpaceColumns ou UITableLayout.FillEmptySpaceRows ne soit activé, les dimensions des cellules seront celles de l'élément de l'interface utilisateur parent (et donc les tables avec plus d'un cellule s'étendant en dehors de leur parent).

Les cellules continueront à respecter les objets UISizeConstraint à l'intérieur. En d'autres termes, le paramètre UISizeConstraint.MinSize sur UISizeConstraints dans les cellules de en-

Échantillons de code

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

Résumé

Propriétés

FillEmptySpaceColumns:bool
Lecture parallèle
Détermine si les cellules sont de telles sortes qu'elles occupent l'espace horizontal de l'élément d'interface parent.
FillEmptySpaceRows:bool
Lecture parallèle
Détermine si les cellules sont de telles sortes qu'elles occupent l'espace vertical de l'élément d'interface parent.
MajorAxis:Enum.TableMajorAxis
Lecture parallèle
Détermine si les éléments d'interface utilisateur frère sont traités comme des colonnes ou des lignes.
Padding:UDim2
Lecture parallèle
Détermine l'espace vide entre les cellules.

Propriétés hérités de UIGridStyleLayout

AbsoluteContentSize:Vector2
Lecture uniquement
Non répliqué
La taille absolue de l'espace prise par le réseau de grille.
FillDirection:Enum.FillDirection
Lecture parallèle
Détermine l'axe dans lequel les objets de l'interface utilisateur sont placés.
HorizontalAlignment:Enum.HorizontalAlignment
Lecture parallèle
Détermine l'alignement horizontal des éléments de l'interface utilisateur dans l'élément parent.
SortOrder:Enum.SortOrder
Lecture parallèle
Détermine l'ordre dans lequel les objets de l'interface utilisateur enfant sont placés dans un layout.
VerticalAlignment:Enum.VerticalAlignment
Lecture parallèle
Détermine l'alignement vertical des éléments de l'interface utilisateur dans l'élément parent.

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Méthodes

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Évènements

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Propriétés

FillEmptySpaceColumns

bool

Lecture parallèle

FillEmptySpaceColumns détermine si la taille X des cellules est réglée afin que l'espace horizontal de l'élément de l'interface utilisateur parent soit utilisé. L'activation de ceci est utile pour vous assurer que votre table prend une quantité plus facilement prévisible d'espace horizontal (la taille X de l'axe X de l'élément de l'interface utilisateur parent). Il est toujours possible que l' UISizeConstraint appliqué aux cellules provoque un débordement/une surcharge.

Lors de l'activation de cette propriété, les largeurs de colonne seront environ égales à la valeur parentale de Class.GuiBase2d.AbsoluteSize .X composant divisé par le nombre de colonnes (non réduit pour l'écart ou d'autres facteurs).

Échantillons de code

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

Lecture parallèle

FillEmptySpaceRows détermine si la taille Y des cellules est réglée afin que l'espace vertical de l'élément parent de l'interface utilisateur soit utilisé. L'activation de ceci est utile pour vous assurer que votre table prend une quantité plus facilement prévisible de l'espace vertical (la taille Y de l'axe Y de l'élément parent). Il est toujours possible que UISizeConstraint appliqué aux cellules provoque un débordement/une surcharge.

Lors de l'activation de cette propriété, les hauteurs de rangée seront environ égales à la valeur parentale de Class.GuiBase2d.AbsoluteSize .Y composant divisé par le nombre de rangées (non réduit par le facteur de paquetage ou d'autres facteurs).

Échantillons de code

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

Lecture parallèle

MajorAxis détermine si les éléments d'interface utilisateur sont traités comme des colonnes ou des lignes.

Échantillons de code

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

Lecture parallèle

Le remplissage mettra les éléments avec de l'espace supplémentaire entre eux. Cela peut être fait en utilisant des composants de mise à l'échelle ou d'Offset de UDim2. Les valeurs négatives peuvent rapprocher les éléments. Lorsque ce n'est pas zéro, les éléments d'interface utilisateur frère peuvent être visibles entre les cellules contenues dans elles.

Échantillons de code

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

Propriétés hérité de UIGridStyleLayout

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Méthodes

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Évènements

Afficher tous les hérités de Instance

Afficher tous les hérités de Object