UITableLayout

Pokaż przestarzałe

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

UITableLayout rozmieszcza elementy UI brata jako wiersze w tabeli.Dziecięce elementy interfejsu użytkownika (komórki tabel) tych wierszy są następnie układane w kolumnach (w obrębie wierszy).Każda komórka wiersza ma tę samą wysokość, a każda komórka w kolumnie ma tę samą szerokość.

Zmieniając UIGridStyleLayout.FillDirection, elementy interfejsu użytkownika brata mogą działać jako kolumny zamiast.

Po zastosowaniu UITableLayout przejmie kontrolę nad elementami siostry i komórkami GuiObject.Size i GuiObject.Position.Zmiana tych w oknie Właściwości nadal jest możliwa i nie wywoła żadnego efektu.

Wymiary komórek w wynikowej tabeli są kontrolowane przez wymiary elementu UI rodzica.Chyba że UITableLayout.FillEmptySpaceColumns lub UITableLayout.FillEmptySpaceRows jest włączone, wymiary komórki będą takie jak w przypadku elementu UI rodzica (a więc tabele z więcej niż jedną komórką rozciągają się poza swojego rodzica).

Komórki będą nadal szanować UISizeConstraint obiekty wewnątrz nich.Innymi słowy, ustawienie UISizeConstraint.MinSize w UISizeConstraints w komórkach nagłówka może określić rozmiar reszty komórek.Jeśli UISizeConstraint.MaxSize ogranicza rozmiar komórki do wypełnienia przewidzianej przestrzeni (tj.inna wiersz/kolumna jest szersza niż ona), dostosuje się do górnej lewej.

Przykłady kodu

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

Podsumowanie

Właściwości

  • Odczyt równoległy

    Określa, czy komórki są rozmiarowe w taki sposób, że zajmują poziomą przestrzeń elementu UI rodzica.

  • Odczyt równoległy

    Określa, czy komórki są rozmiarowe w taki sposób, że zajmują pionową przestrzeń elementu UI rodzica.

  • Odczyt równoległy

    Określa, czy elementy UI brata są traktowane jako rzędy czy kolumny.

  • Odczyt równoległy

    Określa pustą przestrzeń między komórkami.

Właściwości odziedziczeni z: UIGridStyleLayout

Właściwości

FillEmptySpaceColumns

Odczyt równoległy

Wypełnij puste kolumny określa, czy rozmiar komórek X jest tak ustawiony, że całą poziomą przestrzeń elementu UI rodzica jest wykorzystywana.Włączenie tego jest przydatne, aby upewnić się, że twój stół zajmuje większą łatwo przewidywalną ilość przestrzeni poziomej (rozmiar osi X elementu UI rodzica).Nadal możliwe jest, że UISizeConstraint zastosowane do komórek spowoduje przepięcie/przepięcie.

Podczas włączania tej właściwości szerokości kolumn będą przybliżone równe szerokości kolumn rodzica GuiBase2d.AbsoluteSize .X podzielone przez liczbę kolumn (nie uwzględniając marginesu lub innych czynników).

Przykłady kodu

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

Odczyt równoległy

Wypełnij pustą linię określa, czy rozmiar komórek Y jest tak ustawiony, że całą pionową przestrzeń elementu UI rodzica jest wykorzystywana.Włączenie tego jest przydatne, aby upewnić się, że twój stół zajmuje większą łatwo przewidywalną ilość pionowej przestrzeni (rozmiar osi Y elementu UI rodzica).Nadal możliwe jest, że UISizeConstraint zastosowane do komórek spowoduje przepięcie/przepięcie.

Podczas włączania tej właściwości wysokości rzędów będą przybliżone równe wysokościom komponentu rodzica GuiBase2d.AbsoluteSize .Y podzielonym przez liczbę rzędów (nie uwzględniając marginesu lub innych czynników).

Przykłady kodu

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
Odczyt równoległy

MajorAxis określa, czy elementy UI brata są traktowane jako rzędy czy kolumny.

Przykłady kodu

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

Odczyt równoległy

Przestrzeń będzie umieszczać elementy z dodatkową przestrzenią pomiędzy nimi.Można to zrobić za pomocą składników Skali lub Odległości UDim2.Wartości ujemne mogą zbliżyć elementy razem.Gdy nie wynosi zero, elementy interfejsu użytkownika brata widoczne mogą być między komórkami zawartymi w nich.

Przykłady kodu

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

Metody

Zdarzenia