ScrollingFrame Help Needed

[sarp_edon]

So ScrollingFrames have 2 fill directions, fill from the top down or fill from the left to the right (which can be changed a bit)

But I want my scrollingframe to fill from the middle to the left and right similar to roblox’s hotbar system where if there is one gear, there is one frame at the center, and if there are two, that one frame gets moved to the left a bit and the other is placed to the right of it.

Does anyone know how to make this happen?

[Jeremylin080114 (Jeremy)]

Fill from the left to right. Move the entire scrolling frame (or a frame in the scrolling frame) by checking how many children (#getChildren()) and moving it to the right by children size x over 2

[sarp_edon]

Is this the only way to do it?

[Jeremylin080114 (Jeremy)]

I would think so, correct me if I am wrong.
This would be how I would go about this since it isn’t too complicated. The frame need only be updated in the child added or removed events.

[Korate168 (yournotfunny)]

You can use UIListLayout inside the ScrollingFrame, and set its properties to:

Then for the ScrollingFrame’s properties:

Results:

Edit:
Added a fix when ScrollingFrame overflows, add a LocalScript inside the ScrollingFrame and paste this code:

local scrollingFrame = script.Parent
local uiListLayout = scrollingFrame.UIListLayout

scrollingFrame:GetPropertyChangedSignal("AbsoluteCanvasSize"):Connect(function()
	if scrollingFrame.AbsoluteCanvasSize.X > scrollingFrame.AbsoluteSize.X then
		uiListLayout.HorizontalFlex = Enum.UIFlexAlignment.SpaceBetween
	else
		uiListLayout.HorizontalFlex = Enum.UIFlexAlignment.None
	end
end)

[sarp_edon]

I do not know why I did not put this as solution so here you go lol