UITableLayout

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

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

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

โดยการเปลี่ยน UIGridStyleLayout.FillDirection ส่วนประกอบ UI ของพี่น้องสามารถกระทำเป็นคอลัมน์แทนได้

เมื่อใช้แล้ว รูปแบบ UITableLayout จะควบคุมส่วนหนึ่งของพี่น้องและองค์ประกอบเซลล์ GuiObject.Size และ GuiObject.Positionการเปลี่ยนแปลงเหล่านี้ในหน้าต่างคุณสมบัติยังคงเป็นไปได้และจะไม่สร้างผลใดๆ

มิติของเซลล์ในตารางที่ได้รับจะถูกควบคุมโดยมิติขององค์ประกอบ UI รากยกเว้น UITableLayout.FillEmptySpaceColumns หรือ UITableLayout.FillEmptySpaceRows ถูกเปิดใช้งานแล้ว ขนาดเซลล์จะเป็นขนาดขององค์ประกอบ UI ราก (และดังนั้นตารางที่มีเซลล์มากกว่าหนึ่งเซลล์จะขยายออกนอกพื้นที่ของพ่อ)

เซลล์จะยังคงเคารพ UISizeConstraint วัตถุภายในพวกเขาคือการตั้งค่า UISizeConstraint.MinSize ใน UISizeConstraints ภายในเซลล์หัวข้อสามารถกำหนดขนาดของส่วนที่เหลือของเซลล์ได้หาก UISizeConstraint.MaxSize จำกัดขนาดเซลล์จากการเติมพื้นที่ที่กำหนด (เช่นอีกแถว/คอลัมน์กว้างกว่าที่มัน) มันจะสอดคล้องกับด้านบนซ้าย

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

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

สรุป

คุณสมบัติ

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

    กำหนดว่าเซลล์มีขนาดเท่าใดจึงจะสามารถใช้พื้นที่แนวนอนขององค์ประกอบ UI รากได้

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

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

  • MajorAxis:Enum.TableMajorAxis
    อ่านพร้อมๆ กัน

    กำหนดว่าองค์ประกอบ UI ของพี่น้องจะถูกจัดการเป็นแถวหรือคอลัมน์

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

    กำหนดช่องว่างระหว่างเซลล์

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

    ขนาดสัมบูรณ์ของพื้นที่ที่ถูกใช้โดยการจัดเรียงกริด

  • FillDirection:Enum.FillDirection
    อ่านพร้อมๆ กัน

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

  • HorizontalAlignment:Enum.HorizontalAlignment
    อ่านพร้อมๆ กัน

    กำหนดการจัดเรียงแนวนอนขององค์ประกอบ UI ภายในองค์ประกอบพ่วง

  • SortOrder:Enum.SortOrder
    อ่านพร้อมๆ กัน

    กำหนดลำดับที่วัตถุ UI เด็กจะถูกวางในเลย์เอาต์

  • VerticalAlignment:Enum.VerticalAlignment
    อ่านพร้อมๆ กัน

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

ดูทั้งหมดที่รับทอดมาจาก Instance
ดูทั้งหมดที่รับทอดมาจาก Object

คุณสมบัติ

FillEmptySpaceColumns

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

การกรอกช่องว่างว่างเปล่าตัดสินว่าขนาด X ของเซลล์ถูกตั้งค่าให้ใช้พื้นที่แนวนอนทั้งหมดขององค์ประกอบ UI พ่วงไปด้วยหรือไม่การเปิดใช้งานนี้มีประโยชน์ในการตรวจสอบว่าโต๊ะของคุณใช้พื้นที่แนวนอนที่คาดการณ์ได้ง่ายขึ้น (ขนาดแกน X ขององค์ประกอบ UI ราก)ยังคงเป็นไปได้ที่การใช้ UISizeConstraint กับเซลล์จะทําให้เกิดการไหลซ้ํา/เกินขอบเขต

เมื่อเปิดใช้งานคุณสมบัตินี้ ความกว้างของคอลัมน์จะเท่ากับประมาณคอลัมน์ของผู้ปกครอง GuiBase2d.AbsoluteSize .X หารด้วยจํานวนคอลัมน์ (ไม่รวมการจัดเตรียมหรือปัจจัยอื่น ๆ )

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

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
อ่านพร้อมๆ กัน

การกรอกช่องว่างว่างเปล่าจะกำหนดว่าขนาด Y ของเซลล์ถูกตั้งค่าให้ใช้พื้นที่แนวตั้งทั้งหมดขององค์ประกอบ UI พ่วงไปด้วยหรือไม่การเปิดใช้งานนี้มีประโยชน์ในการตรวจสอบว่าโต๊ะของคุณใช้พื้นที่แนวตั้งที่คาดการณ์ได้ง่ายขึ้น (ขนาดแกน Y ขององค์ประกอบ UI ราก)ยังคงเป็นไปได้ที่การใช้ UISizeConstraint กับเซลล์จะทําให้เกิดการไหลซ้ํา/เกินขอบเขต

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

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

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
อ่านพร้อมๆ กัน

MajorAxis กำหนดว่าองค์ประกอบ UI พี่น้องจะถูกจัดการเป็นแถวหรือคอลัมน์

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

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
อ่านพร้อมๆ กัน

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

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

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
ดูทั้งหมดที่รับทอดมาจาก Instance
ดูทั้งหมดที่รับทอดมาจาก Object

วิธีการ

ดูทั้งหมดที่รับทอดมาจาก Instance
ดูทั้งหมดที่รับทอดมาจาก Object

อีเวนต์

ดูทั้งหมดที่รับทอดมาจาก Instance
ดูทั้งหมดที่รับทอดมาจาก Object