Problems with simulation of horizontal alignment of UI

[RenKaDi (RenKa)]

Hi, I am trying to simulate the horizontal alignment of a UIListLayout out of boredom. The problem I have is that the horizontal alignment of the frames does not work correctly. I provide code and capture

local function simulateHorizontalListLayout()
	local spacing = 10 -- Spacing between cells
	local containerWidth = HotbarFrame.AbsoluteSize.X -- Width of the container frame
	local containerHeight = HotbarFrame.AbsoluteSize.Y -- Height of the container frame
	local totalCellsWidth = 0 -- Accumulated width of all cells
	local maxCellHeight = 0 -- Maximum height among all cells

	-- Calculate the total width and maximum height of the cells
	for _, cell in ipairs(HotbarFrame:GetChildren()) do
		local cellWidth = cell.AbsoluteSize.X -- Width of the current cell
		local cellHeight = cell.AbsoluteSize.Y -- Height of the current cell
		totalCellsWidth = totalCellsWidth + cellWidth -- Add current cell's width to the total width
		maxCellHeight = math.max(maxCellHeight, cellHeight) -- Update maximum cell height if current cell is taller
	end

	local totalSpacing = (#HotbarFrame:GetChildren() - 1) * spacing -- Total spacing between cells
	local offsetX = (containerWidth - totalCellsWidth - totalSpacing) / 2 -- Calculate the X offset to center the cells

	local currentX = offsetX -- Current X position to place the cells
	local centerYOffset = (containerHeight - maxCellHeight) / 2 -- Calculate the Y offset to center the cells vertically
	for _, cell in ipairs(HotbarFrame:GetChildren()) do
		local cellWidth = cell.AbsoluteSize.X -- Width of the current cell
		local cellHeight = cell.AbsoluteSize.Y -- Height of the current cell
		cell.Position = UDim2.new(0, currentX, .5, 0)
		currentX = currentX + cellWidth + spacing
	end
end

Some examples (the white square is the AnchorPoint of the container):

With 1 cell:

With 2 cells:

With 3 cells:

With 4 cells:

My goal is to have the boxes centered, but it doesn’t seem to work.

Why are you doing this instead of just using UIListLayout?
I’m just bored and also want to learn how to work better with UI

If you need more information about this, please let me know so i can provide more details.

[RenKaDi (RenKa)]

I left comments in the code to explain a little bit what each line does, I forgot to comment the last lines, if you need some explanation about the last lines I will provide it

[BilonGamer (Emmie)]

It seems that the frames’ center that they align on is half the width of one frame to the left relative to the actual center, couldn’t you add half a frame’s width to the x position of each frame?

[RenKaDi (RenKa)]

of course! I’m going to do it right now

[RenKaDi (RenKa)]

OHHH, IT WORKED!!

here’s the code:

local function simulateHorizontalListLayout()
	local spacing = 10 -- Spacing between cells
	local containerWidth = HotbarFrame.AbsoluteSize.X -- Width of the container frame
	local containerHeight = HotbarFrame.AbsoluteSize.Y -- Height of the container frame
	local totalCellsWidth = 0 -- Accumulated width of all cells
	local maxCellHeight = 0 -- Maximum height among all cells

	-- Calculate the total width and maximum height of the cells
	for _, cell in ipairs(HotbarFrame:GetChildren()) do
		local cellWidth = cell.AbsoluteSize.X -- Width of the current cell
		local cellHeight = cell.AbsoluteSize.Y -- Height of the current cell
		totalCellsWidth = totalCellsWidth + cellWidth -- Add current cell's width to the total width
		maxCellHeight = math.max(maxCellHeight, cellHeight) -- Update maximum cell height if current cell is taller
	end

	local totalSpacing = (#HotbarFrame:GetChildren() - 1) * spacing -- Total spacing between cells
	local offsetX = (containerWidth - totalCellsWidth - totalSpacing) / 2 -- Calculate the X offset to center the cells

	local currentX = offsetX -- Current X position to place the cells
	local centerYOffset = (containerHeight - maxCellHeight) / 2 -- Calculate the Y offset to center the cells vertically
	local halfCellWidth = 0.5 * totalCellsWidth / #HotbarFrame:GetChildren() -- Half the width of a cell

	for _, cell in ipairs(HotbarFrame:GetChildren()) do
		local cellWidth = cell.AbsoluteSize.X -- Width of the current cell
		local cellHeight = cell.AbsoluteSize.Y -- Height of the current cell
		cell.Position = UDim2.new(0, currentX + halfCellWidth, 0.5, 0) -- Set the position of the cell, aligning it to the center vertically
		currentX = currentX + cellWidth + spacing -- Move the X position to the next cell position with spacing
	end
end