UI 레이아웃에서 형제 UI 요소를 테이블의 행으로 구성합니다. 이 행의 자식 UI 요소 (테이블 셀)는 다음에 정렬됩니다. 각 셀 내의 자식 요소는 동일한 높이를 가지고 있으며, 각 셀 내의 자식 요소는 동일한 너비를 가집니다.
Class.UIGridStyleLayout.FillDirection를 변경하면 형제 UI 요소가 대신 열로 작동합니다.
적용되면 UITableLayout 는 형제 및 셀 요소의 ' GuiObject.Size 및 GuiObject.Position 을 제어합니다. 이 변경 사항을 속성 창에서 변경하면 여전히 효과가 없습니다.
결과 테이블의 셀 크기는 부모 UI 요소의 셀 크기에 의해 제어됩니다. UITableLayout.FillEmptySpaceColumns 또는 UITableLayout.FillEmptySpaceRows 가 활성화되지 않은 경우 셀 크기는 부모 UI 요소의 셀 크기입니다. 따라서 셀 크기가 부모 UI
세포는 여전히 UISizeConstraint 개체 내의 UISizeConstraint.MinSize 개체를 존중합니다. 즉, 헤더 세포 내의 Class.UISizeConstraint|UISizeSeconds</
코드 샘플
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 개체가 배치되는 축을 결정합니다.
부모 요소 내에서 UI 요소의 가로 정렬을 결정합니다.
레이아웃에 자식 UI 개체가 배치되는 순서를 결정합니다.
부모 요소 내에서 UI 요소의 가로 정렬을 결정합니다.
속성
FillEmptySpaceColumns
FillEmptySpaceColumns 는 세포의 X 크기가 부모 UI 요소의 전체 가로 공간을 사용하도록 설정되어 있는지 여부를 결정합니다. 이 기능은 테이블이 더 쉽게 예측할 수 있는 가로 공간(부모 UI 요소의 X 축 크기)을 더 쉽게 확보하는 데 유용합니다. 이 기능이
이 속성을 활성화하면 열 너비가 부모의 GuiBase2d.AbsoluteSize 에 약 일치합니다.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 요소의 전체 垂直 공간을 사용하도록 설정되어 있는지 여부를 결정합니다. 이 기능은 테이블이 더 쉽게 예측할 수 있는 垂直 공간(부모 UI 요소의 Y 축 크기)을 차지하는 데 유용합니다. 이 기능이 적용된 세포
이 속성을 활성화하면 행 높이가 부모의 GuiBase2d.AbsoluteSize 요소와 행 수를 나눈 값과 동일합니다(쿼드 수 없음).
코드 샘플
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
패딩은 요소 사이에 추가 공간을 두 요소를 위치시킵니다. 이는 UDim2의 크기 조정 또는 오프셋 구성 요소를 사용하여 수행할 수 있습니다. 부정수는 요소를 더 가까이 가져올 수 있습니다. 0이 아닌 경우 형제 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