LayoutUtil: Automatically sizes a ScrollingFrame's UIGridLayout/UIListLayout

Resources Community Resources
, ,
#47

This is amazing, I’ve been struggling with this issue for a very long time.

1 Like
#48

how do i use this???

#49

I have been trying to use this for the past 30 minutes and still have no idea why it won’t work.

The grid layout is written in scale and the canvas size is {0,0} {0,0}

This is a local script I put inside of the grid layout:

local LayoutUtil = require(game:GetService('ReplicatedStorage').moduleScripts.LayoutUtil) 
LayoutUtil(script.Parent)

I also tried the “LayoutUtil.new(script.Parent)” that you told someone else to do, but that didn’t work either.

Any help is appreciated!

3 Likes
#50

It doesn’t let me scroll… When I use the AutomaticCanvasSize it lets me scroll, but moves all the frames in the scrolling frame down and cutting half of the last frame off (image below for reference).

(No it doesn’t let me scroll any further)
image

1 Like
#51

Hey I’m a little confused about how to use the LayoutUtil v2 module.

Using the old LayoutUtil module like this:

require(script:WaitForChild("LayoutUtil")).new(ShopScrollingFrame:WaitForChild("UIGridLayout"))

gets me the result that I’ve been wanting, here:

image
image1303×882 54.3 KB

I’ll probably end up just sticking with this. However if there’s some performance improvement or other optimization with the new one, I’d prefer to use that one. The problem is that it doesn’t do anything though.

Code: require(script:WaitForChild("LayoutUtil2"))(ShopScrollingFrame:WaitForChild("UIGridLayout"))

Result:

image
image1251×828 110 KB

#52

You must set the AutomaticCanvasSize property of the ScrollingFrame.

#53

This works yeah.
You want to set the CanvasSize to 0,0,0,0 and set an AutomaticCanvasSize – and works just like this module without using any scripts.

#54

If you use offset then the size of each element in the ScrollingFrame will not change, no matter the user’s resolution. So let’s say they play on a 16k monitor and the size in offset of each element is 10x10, it would be practically invisible for them.

Now let’s say you use scale. If you have AutomaticCanvasSize enabled then each element will stretch with the ScrollingFrame. This is where LayoutUtil comes in, it allows you to have dynamically sized elements (via scale) without the stretch (maintains aspect ratio).

2 Likes
#55

What if you just inserted UIAspectRatios into your UIObjects?

#56

That’s exactly what this module does. Using the plugin (or module), you could calculate and insert it automatically for UIGridLayouts. UIListLayouts, on the other hand, require a UIAspectRatioConstraint per element, so you will need some code at runtime (considering you are inserting elements at runtime).

#57

That’s interesting - but I’ve been playing around with just the AutomaticCanvasSize, and I don’t notice any sort of stretch on bigger or smaller screens, it actually scales quite nicely already

#58

This is an example using scale without LayoutUtil, note that AutomaticCanvasSize does not ensure elements maintain their aspect ratio.

scale

#59

This is amazing! thanks. it is great for handling things. and has helped me loads!

1 Like
#60

Im so confused how do i scale the ui inside of the scrolling frame (theres alot)

#61

The LayoutUtil v1 plugin is capable of converting offset->scale and scale->offset. It hasn’t been updated in years, so I can’t say if it still works properly. I’ve heard of other plugins like AutoScale that may be capable of doing this.

I’d recommend using scale when designing your UI so you don’t have to do this conversion later on.

#62

Give a link to the documentation with an example.

#63

I’m a bit unsure how to use the code here and what I need to do because
I used

layoutUtil(script.Parent.UiGridLayout)

and set the automatic canvas size to Y yet it’s not doing anything
anyone got an answer?

#64

I’m assuming this code needs to be run every time the Scrolling Frame Absolute Size changes. (I’m referring to the module)

#65

Not really sure what happened to this module. The previous versions were a lot more bloated - but it did the job and not to mention it was pretty simple. I never ran into any errors with it. Coming to V2, I’m constantly running into errors. For instance, my canvas size does NOT update when I add buttons and such even if I were to call LayoutUtil again (yes, canvas size is 0,0,0,0 and AutomaticCanvasSize is on X).

I’m hoping this gets a resurgance soon - this module really did justice previously and I hope it comes back with a full kick.

#66

Try using V3. It should be on the github releases