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 öğelerini bir tabloda sütunlar olarak düzenler.Bu satırların çocuk UI öğeleri (tablo hücreleri) daha sonra sütunlara düzenlenir (sütunlar arasında).Bir satır içindeki her hücre aynı yüksekliğe sahiptir ve bir sütun içindeki her hücre aynı genişliğe sahiptir.

UIGridStyleLayout.FillDirection 'yi değiştirerek, kardeş UI öğeleri yerine sütun olarak hareket edebilir.

Uygulandığında, bir UITableLayout kardeş ve hücre elemanlarının GuiObject.Size ve GuiObject.Position kontrolünü ele alacaktır.Bunları Özellikler penceresinde değiştirmek hala mümkündür, herhangi bir etki üretmeyecektir.

Son tablodaki hücrelerin boyutları, ebeveyn UI öğesinin boyutları tarafından kontrol edilir. veya etkinleştirilmediği sürece, hücre boyutları ebeveyn UI öğesinin boyutları olacaktır (ve dolayısıyla birden fazla hücreye sahip tablolar ebeveynlerinin dışına genişler).

Hücreler içerideki UISizeConstraint nesnelerine saygı göstermeyi sürdürecek.Diğer bir deyişle, başlık hücreleri içinde içinde koyulan ayar, hücrelerin geri kalanının boyutunu belirleyebilir.Eğer UISizeConstraint.MaxSize bir hücrenin boyutunu tahsis edilen alanı doldurmaktan sınırlandırırsa (yanibaşka bir sütun/kolon daha geniştir, üst soluna yerleşecektir.

Kod Örnekleri

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

Özet

Özellikler

  • FillEmptySpaceColumns:boolean
    Paralel oku

    Hücrelerin ebeveyn UI öğesinin yatay alanını kapladığı şekilde boyutlandırılıp yok edilip edilmediğini belirler.

  • FillEmptySpaceRows:boolean
    Paralel oku

    Hücrelerin ebeveyn UI öğesinin yatay alanını kapladığı şekilde boyutlandırılıp yok edilip edilmediğini belirler.

  • MajorAxis:Enum.TableMajorAxis
    Paralel oku

    Kardeş UI öğelerinin sütun veya kol olarak ele alınıp alınmadığını belirler.

  • Padding:UDim2
    Paralel oku

    Hücreler arasındaki boş alanı belirler.

Şuradan alınan Özellikler: 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

Özellikler

FillEmptySpaceColumns

boolean
Paralel oku

Boş Alan Kolonları doldurma, hücrelerin X boyutunun ebeveyn UI öğesinin tüm yatay alanı kullanılacak şekilde ayarlanıp ayarlanmadığını belirler.Bunu etkinleştirmek, masanızın daha kolay tahmin edilebilir bir miktar yatay alanı kapladığından emin olmak için yararlıdır (ebeveyn UI öğesinin X eksen boyutu).Hücrelere UISizeConstraint uygulanan bir şeyin aşırı akış/aşırı akışa neden olması hala mümkündür.

Bu özelliği etkinleştirirken, sütun genişlikleri yaklaşık olarak ebeveynin GuiBase2d.AbsoluteSize .X bileşenine bölünmüş kol sayısına eşit olacaktır (yastıklama veya diğer faktörler göz önüne alınmaz).

Kod Örnekleri

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
Paralel oku

Boş Alan Sıraları doldurma, hücrelerin Y boyutunun ebeveyn UI öğesinin tüm dikey alanı kullanılacak şekilde ayarlanıp ayarlanmadığını belirler.Bunu etkinleştirmek, masanızın daha kolay tahmin edilebilir bir yatık alanı (ebeveyn UI öğesinin Y eksen boyutu) aldığından emin olmak için yararlıdır.Hücrelere UISizeConstraint uygulanan bir şeyin aşırı akış/aşırı akışa neden olması hala mümkündür.

Bu özelliği etkinleştirirken, satır yükseklikleri yaklaşık olarak ebeveynin GuiBase2d.AbsoluteSize .Y bileşenine eşit olacaktır, yastıklama veya diğer faktörler göz önüne alınmadan sayıya bölünmüş.

Kod Örnekleri

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
Paralel oku

MajorAxis, kardeş UI öğelerinin sütun veya kol olarak ele alınıp alınmadığını belirler.

Kod Örnekleri

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
Paralel oku

Yastırma, aralarında fazladan alan bırakarak elemanları konumlandırır.Bunun yapılması, UDim2'nin ölçek veya ofset bileşenlerini kullanarak mümkündür.Negatif değerler, elemanları birbirine daha yakın hale getirebilir.Sıfır olmadığında, kardeş UI öğeleri onların içinde bulunan hücreler arasında görünebilir.

Kod Örnekleri

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
Ş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