UITableLayout

แสดงที่เลิกใช้งานแล้ว

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

A UITableLayout จัดเรียงรูปแบบ UI เอกสารพี่น้องเป็นแถวในตาราง รายการ UI เด็ก (เซลล์ตาราง) ของแถวเหล่านี้จะถูกจัดเรียงในคอลัม (ภายในแถว) แต่ละเซลล์ภายในแถวจะมีความสูงเท่ากัน และแต่ละเซลล์ภ

โดยการเปลี่ยนแปลง UIGridStyleLayout.FillDirection นี้ สามารถให้พี่น้อง UI เอาชีวิตรอดได้แทน

เมื่อใช้, a UITableLayout จะควบคุมส่วนประกอบพี่น้องและเซลล์เอเลเมนต์' GuiObject.Size และ GuiObject.Position ในหน้าต่างโปรพีโดะยังสามารถเปลี่ยนแปลงเหล่านี้ในหน้าต่างโปรพีโดะยังไม่สร้

ขนาดของเซลล์ในตารางผลลัพธ์จะควบคุมโดยขนาดของรูปปั้นผู้ปกครอง UI หลัก ยกเว้น UITableLayout.FillEmptySpaceColumns หรือ UITableLayout.FillEmptySpaceRows จะเปิดใช้งาน เซลล์ขนาดจ

เซลล์จะยังคงเคารพ UISizeConstraint วัตถุภายในพวกเขา ในคำอื่น การตั้ง UISizeConstraint.MinSize

ตัวอย่างโค้ด

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

สรุป

คุณสมบัติ

  • อ่านพร้อมๆ กัน

    กำหนดว่าเซลล์มีขนาดเพียงพอที่จะครอบครองพื้นที่แนวตั้งของรายการผู้ปกครอง

  • อ่านพร้อมๆ กัน

    กำหนดว่าเซลล์มีขนาดเพียงพอที่จะครอบครองพื้นที่แนวตั้งของรายการผู้ปกครอง

  • อ่านพร้อมๆ กัน

    กำหนดว่ารายการ UI ต้องรักษาเป็นแถวหรือคอลัม

  • อ่านพร้อมๆ กัน

    กำหนดพื้นที่ว่างระหว่างเซลล์

คุณสมบัติรับทอดมาจากUIGridStyleLayout
  • อ่านอย่างเดียว
    ไม่ซ้ำ

    ขนาดพื้นที่ที่แท้จริงที่ได้รับการเก็บไว้โดยแมชชีนเลย์

  • อ่านพร้อมๆ กัน

    กำหนดแกนที่ UI ตัวนำวัตถุจะวางอยู่

  • อ่านพร้อมๆ กัน

    กำหนดการจัดตำแหน่งแนวตั้งของรูปแบบในพื้นที่ลูกขององค์ประกอบ

  • อ่านพร้อมๆ กัน

    กำหนดลำดับที่เด็ก UI วัตถุจะวางในแผนผัง

  • อ่านพร้อมๆ กัน

    กำหนดตำแหน่งแนวตั้งของรายการ UI ในองค์ประกอบพ่อ

คุณสมบัติ

FillEmptySpaceColumns

อ่านพร้อมๆ กัน

FillEmptySpaceColumns กำหนดว่าขนาด X ของเซลล์จะตั้งให้ใหญ่เพื่อให้พื้นที่แนวตั้งของพื้นที่ปกติของรุ่นพ่อได้รับการใช้งาน การเปิดใช้งานสิ่งนี้จะมีประโยชน์สำหรับ

เมื่อเปิดใช้งานคุณสมบัตินี้, ความกว้างของคอลัมจะอยู่ที่ประมาณเท่ากับค่าของคอลัมของพ่อ (ไม่นับรวมพื้นที่แห่งการเก็บข้อมูล) โดยจำนวนคอลัม

ตัวอย่างโค้ด

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

อ่านพร้อมๆ กัน

FillEmptySpaceSeconds กำหนดว่าขนาด Y ของเซลล์จะตั้งให้ใช้พื้นที่แนวตั้งทั้งหมดของรายการ UI ของพ่อแม่ได้หรือไม่ การเปิดใช้งานสิ่งนี้จะมีประโยชน์สำหรับการให้แน่ใจ

เมื่อเปิดใช้งานสมบัติข้อมูลนี้จะทำให้ความสูงของแถวเป็นประมาณเท่ากับความสูงของแถวพ่อของมัน GuiBase2d.AbsoluteSize ส่วน Y แบ่งโดยจำนวนแถว (ไม่นับพื้นที่ว่างหรือปัจจัยอื่น ๆ )

ตัวอย่างโค้ด

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 กำหนดว่ารายการ UI ต่างๆ จะได้รับการรักษาเป็นแถวหรือคอลัม

ตัวอย่างโค้ด

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

อ่านพร้อมๆ กัน

การตรึงจะตำแหน่งตัวองค์ประกอบด้วยพื้นที่เพิ่มเติมระหว่างพวกเขา สิ่งนี้สามารถทำได้โดยใช้ Scale หรือ Offset ส่วนประกอบของ UDim2 สิ่งที่เป็นบวกของมูลค่าสามารถนำสิ่งอื่นใกล้กันได้

ตัวอย่างโค้ด

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

วิธีการ

อีเวนต์