UITableLayout

Artık kullanılmayanları göster

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

Bir UITableLayout, kardeş UI elemanlarını bir tablodaki sıralar olarak yazılır. Bu sıraların çocuk UI elemanları (tabloda hücreler) sonra sütunlar (içindeki hücreler) şeklinde düzenlenir. Bu sıraların her birinde aynı yüksekliğe ve her birinde aynı genişliğe sahip her bir hücre vardır.

Class.UIGridStyleLayout.FillDirectionı değiştirerek, kardeş UI elemanları yerine sütun olarak davranabilir.

Uygulandığında, bir UITableLayout kardeş ve hücre elemanlarının GuiObject.Size ve GuiObject.Position ile kontrolüne geçecektir. Bu öğeleri Propetler penceresinde değiştirmenin etkisi hala olmaz.

Sonuçta oluşturulan masanın öğelerinin boyutları, ebeveyn UI öğesi tarafından kontrol edilir. UITableLayout.FillEmptySpaceColumns veya UITableLayout.FillEmptySpaceRows aktif değilse, öğelerin boyutları ebeveyn UI öğesi (ve dolayısıyla tüm katılımcıların katılımcıların

Hücrelerin içindeki UISizeConstraint nesneleri hala saygı gösterir. Diğer bir deyişle, UISizeConstraint.MinSize nesneleri yanındaki şerit hücreleri

Kod Örnekleri

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

Özet

Özellikler

FillEmptySpaceColumns:bool
Paralel oku
Hücrelerin ebeveyn UI öğesi horuz alanını kapladığını belirler.
FillEmptySpaceRows:bool
Paralel oku
Hücrelerin ebeveyn UI öğesi için yatay alanı kapladığını belirler.
MajorAxis:Enum.TableMajorAxis
Paralel oku
Kardeş UI elemanlarının birer satır veya sütun olarak ele alınacağını belirler.
Padding:UDim2
Paralel oku
Hücreler arasındaki boş alanı belirler.

Şuradan alınan Özellikler: UIGridStyleLayout

AbsoluteContentSize:Vector2
Salt Okunur
Çoğaltılmamış
Küme şeması tarafından alınan alanın kesin boyutu.
FillDirection:Enum.FillDirection
Paralel oku
Arayüz nesnelerinin yerleştirildiği eksenleri belirler.
HorizontalAlignment:Enum.HorizontalAlignment
Paralel oku
Ebeveyn elemanın içindeki UI öğelerinin yatay alanını belirler.
SortOrder:Enum.SortOrder
Paralel oku
Çocuk UI nesnelerinin bir tasarımda yerleştirildiği sırayı belirler.
VerticalAlignment:Enum.VerticalAlignment
Paralel oku
Ana öğenin içindeki UI elemanlarının yatay alanını belirler.

Şuradan alınanların tümünü görüntüle: Instance

Şuradan alınanların tümünü görüntüle: Object

Yöntemler

Şuradan alınanların tümünü görüntüle: Instance

Şuradan alınanların tümünü görüntüle: Object

Etkinlikler

Şuradan alınanların tümünü görüntüle: Instance

Şuradan alınanların tümünü görüntüle: Object

Özellikler

FillEmptySpaceColumns

bool

Paralel oku

FillEmptySpaceColumns, hücrelerin X büyüklüğünün ebeveyn UI öğesi için tüm yatay alanı kullanılabilir olup olmadığını belirler. Bu, etkinleştirmenin işlevsel olacağından emin olmak için çok kolay bir yatay alanı tahmin etmeyi sağlar (ebeveyn UI öğesi için X eksenindeki boyutlandırma). Aynı

Bu özelliği etkinleştirirken, sütun genişlikleri GuiBase2d.AbsoluteSize ile ebeveyninin Class.GuiBase2d.AbsoluteSize katına eşit olacaktır (yazının boyutu hariç).

Kod Örnekleri

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

Paralel oku

FillEmptySpaceRows, hücrelerin Y boyutunun ebeveyn UI öğesi için tüm yatay alanı kullanılabilir olup olmadığını belirler. Bu, hücrelerin Y eksenindeki boyutunun ebeveyn UI öğesi için daha kolay tahmin edilebilir bir miktar olduğunu garanti etmek için kullanılır. Bu, bir UISizeConstraint uyg

Bu özelliği etkinleştirirken, sıra yükseklikleri, ebeveyninin GuiBase2d.AbsoluteSize kısmına yanlışlık olarak eşit olacaktır (yazış boşluklarının veya diğer faktörlerin hesabına dahil değildir).

Kod Örnekleri

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

Paralel oku

Ana Sayfa, kardeş UI elemanlarının birer satır veya sütun olarak ele alınacağını belirler.

Kod Örnekleri

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

Paralel oku

Pad, elemanların arasında ekstra boşluklu pozisyonlandırır. Bu, UDim2'nin Scale veya Offset komponentlerini kullanarak yapılabilir. Olumsuz değerler, elemanları birbirlerine yaklaştırabilir. Zero değilken, kardeş UI elemanları yanındaki hücreler arasında görünür olabilir.

Kod Örnekleri

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

Özellikler şuradan alındı: UIGridStyleLayout

Şuradan alınanların tümünü görüntüle: Instance

Şuradan alınanların tümünü görüntüle: Object

Yöntemler

Şuradan alınanların tümünü görüntüle: Instance

Şuradan alınanların tümünü görüntüle: Object

Etkinlikler

Şuradan alınanların tümünü görüntüle: Instance

Şuradan alınanların tümünü görüntüle: Object