Hello everyone, so im making a shop for my game and I want the scroll bar to extend per row of items added. However I have no idea how to do that. Becuase of the UIGridLayout.
local rows = math.ceil(#script.Parent:GetChildren()-3 / 4)
script.Parent.CanvasSize = UDim2.new(0,0,0.1,rows)
Im using scale to size the items.
How are you using scale to size the items? Doesn’t the size of the items change as you change the CanvasSize?
yes, and I was wondering how I would be able to keep the items size the same.
other games can do it… How though?
use Offset
but then I can not know how meny are in a row.
It seems to me you’ve got two options: stay with scale and use a UIAspectRatioConstraint on the Grid, or use pixels.
Pixels is probably the easiest (I’m not sure how you would get a formula for size with scale). The CanvasSize would be found by:
local items = {} -- fill this with your items in the grid
function adjustScrollingFrameSize()
local frameSizeY = frame.AbsoluteSize.Y
local ySize = layout.CellSize.Y.Offset
local yPadding = layout.CellPadding.Y.Offset
local rows = math.ceil(#items/layout.FillDirectionMaxCells)
local pixels = rows*ySize + (rows-1)*yPadding
frame.CanvasSize = UDim2.new(0, 0, 0, pixels)
end
i use this for my own game,it is as well scaled for mobile and xbox
local Length = script.Parent.Inventory.Holder.ScrollingFrame.AbsoluteSize.X - 22
local Col = math.floor(Length/110)
local ex = Length - Col * 110
local Cell = 100 + math.floor(ex/Col)
script.Parent.Inventory.Holder.ScrollingFrame.UIGridLayout.CellSize = UDim2.new(0, Cell, 0, Cell)
script.Parent.Shop.Holder.ScrollingFrame.UIGridLayout.CellSize = UDim2.new(0, Cell, 0, Cell)
local InventoryCount = #script.Parent.Inventory.Holder.ScrollingFrame:GetChildren() -2
local ShopCount = #script.Parent.Shop.Holder.ScrollingFrame:GetChildren() -2
script.Parent.Inventory.Holder.ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, 10 + (Cell + 10) * math.ceil(InventoryCount / Col))
Offset is significantly easier, but this is definitely possible to do with Scale.
The main issue with Offset is that something that looks great on PC may look horrible on Mobile, if you don’t dynamically change the size. An update I released this morning uses Scale to dynamically set the size of a list of items in a scrolling frame. The idea is that the scrolling frame can only show a certain amount of items at a time.
In the below example, the y-scale for the “AbilityList” is 0.78. The CanvasSize is 0.26*#Items, meaning that 3 items can be displayed at a time. The y-size of each item is 1/ScaleNum. Because we know that the CanvasSize is always 0.26*#Items, the y-size of each item will always be 1/3 of the y-scale of the scrolling frame. Thus, we can create a scrolling list that has scaling.
newTab.Size = UDim2.new(1,0,1/ScaleNum,0)
newTab.Position = UDim2.new(0,0,(i-1)/ScaleNum,0)
AbilityList.CanvasSize = UDim2.new(1,0,ScaleNum*0.26,0)
This will require a lot of tinkering around with to make it work with your specific use case, but it demonstrates that using scale is possible. If you don’t want to go through the hassle, use offset for the tab y-size and scale the canvas size based on the offset*#Items.
Wouldn’t I need to change the FillDirectionMaxCells based on the screen? How could I do that?
Have you tried playing around with the SizeConstraint property? If your scrolling frame canvas always has the same width, but the height varies, and you still want to use scale for sizing the items, I’d try using RelativeXX
im gunna go with offset, Im just confused on how I would find out FillDirectionMaxCells based on the screen…
Ok so I figured it out. I added in this line of code and changed the FillDirectionMaxCells to 5.
script.Parent.UIGridLayout.CellSize = UDim2.new(0,math.floor(script.Parent.AbsoluteSize.X/5)-1,0,math.floor(script.Parent.AbsoluteSize.X/5)-1)
This code will make sure that there are always 5 item frames per row, no matter the screen size!
For future reference, the UIGridStyleLayout classes (list, grid, table, etc.) all have an AbsoluteContentSize property which you can take and use:
For example:
local ScrollBarY = UDim.new(0, UIGridLayout.AbsoluteContentSize.Y)
Additionally, since it’s a property, you can use UIGridLayout:GetPropertyChangedSignal("AbsoluteContentSize") to make it update every time the grid’s content changes.