UITableLayout
*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่
A UITableLayout จัดเรียงรูปแบบ UI เอกสารพี่น้องเป็นแถวในตาราง รายการ UI เด็ก (เซลล์ตาราง) ของแถวเหล่านี้จะถูกจัดเรียงในคอลัม (ภายในแถว) แต่ละเซลล์ภายในแถวจะมีความสูงเท่ากัน และแต่ละเซลล์ภ
โดยการเปลี่ยนแปลง UIGridStyleLayout.FillDirection นี้ สามารถให้พี่น้อง UI เอาชีวิตรอดได้แทน
เมื่อใช้, a UITableLayout จะควบคุมส่วนประกอบพี่น้องและเซลล์เอเลเมนต์' GuiObject.Size และ GuiObject.Position ในหน้าต่างโปรพีโดะยังสามารถเปลี่ยนแปลงเหล่านี้ในหน้าต่างโปรพีโดะยังไม่สร้
ขนาดของเซลล์ในตารางผลลัพธ์จะควบคุมโดยขนาดของรูปปั้นผู้ปกครอง UI หลัก ยกเว้น UITableLayout.FillEmptySpaceColumns หรือ UITableLayout.FillEmptySpaceRows จะเปิดใช้งาน เซลล์ขนาดจ
เซลล์จะยังคงเคารพ UISizeConstraint วัตถุภายในพวกเขา ในคำอื่น การตั้ง UISizeConstraint.MinSize ใ
ตัวอย่างโค้ด
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
สรุป
คุณสมบัติ
กำหนดว่าเซลล์มีขนาดเพียงพอที่จะครอบครองพื้นที่แนวตั้งของรายการผู้ปกครอง
กำหนดว่าเซลล์มีขนาดเพียงพอที่จะครอบครองพื้นที่แนวตั้งของรายการผู้ปกครอง
กำหนดว่ารายการ UI ต้องรักษาเป็นแถวหรือคอลัม
กำหนดพื้นที่ว่างระหว่างเซลล์
ขนาดพื้นที่ที่แท้จริงที่ได้รับการเก็บไว้โดยแมชชีนเลย์
กำหนดแกนที่ UI ตัวนำวัตถุจะวางอยู่
กำหนดการจัดตำแหน่งแนวตั้งของรูปแบบในพื้นที่ลูกขององค์ประกอบ
กำหนดลำดับที่เด็ก UI วัตถุจะวางในแผนผัง
กำหนดตำแหน่งแนวตั้งของรายการ UI ในองค์ประกอบพ่อ
คุณสมบัติ
FillEmptySpaceColumns
FillEmptySpaceColumns กำหนดว่าขนาด X ของเซลล์จะตั้งให้ใหญ่เพื่อให้พื้นที่แนวตั้งของพื้นที่ปกติของรุ่นพ่อได้รับการใช้งาน การเปิดใช้งานสิ่งนี้จะมีประโยชน์สำหรับ
เมื่อเปิดใช้งานคุณสมบัตินี้, ความกว้างของคอลัมจะอยู่ที่ประมาณเท่ากับค่าของคอลัมของพ่อ (ไม่นับรวมพื้นที่แห่งการเก็บข้อมูล) โดยจำนวนคอลัม
ตัวอย่างโค้ด
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
FillEmptySpaceSeconds กำหนดว่าขนาด Y ของเซลล์จะตั้งให้ใช้พื้นที่แนวตั้งทั้งหมดของรายการ UI ของพ่อแม่ได้หรือไม่ การเปิดใช้งานสิ่งนี้จะมีประโยชน์สำหรับการให้แน่ใจ
เมื่อเปิดใช้งานสมบัติข้อมูลนี้จะทำให้ความสูงของแถวเป็นประมาณเท่ากับความสูงของแถวพ่อของมัน GuiBase2d.AbsoluteSize ส่วน Y แบ่งโดยจำนวนแถว (ไม่นับพื้นที่ว่างหรือปัจจัยอื่น ๆ )
ตัวอย่างโค้ด
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
MajorAxis กำหนดว่ารายการ UI ต่างๆ จะได้รับการรักษาเป็นแถวหรือคอลัม
ตัวอย่างโค้ด
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
การตรึงจะตำแหน่งตัวองค์ประกอบด้วยพื้นที่เพิ่มเติมระหว่างพวกเขา สิ่งนี้สามารถทำได้โดยใช้ Scale หรือ Offset ส่วนประกอบของ UDim2 สิ่งที่เป็นบวกของมูลค่าสามารถนำสิ่งอื่นใกล้กันได้
ตัวอย่างโค้ด
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