LayoutUtil: Automatically sizes a ScrollingFrame's UIGridLayout/UIListLayout

LayoutUtil icon-32

Actions Status Latest Release

GitHub Repository
GitHub Releases Download Page
Roblox Catalog Download

LayoutUtil-Plugin

Roblox Catalog Download

ABOUT

In many games I’ve played, I noticed that a majority of them seem to disregard the CanvasSize of a ScrollingFrame and leave tons of empty space. This library was designed to aid developers in maintaining the aspect ratio of each child element within a ScrollingFrame, while automatically sizing the canvas. LayoutUtil is designated specifically towards UIGridLayouts and UIListLayouts, hence the suffix, “Layout”. It’s simple to use and all boils down to a simple function call to get everything up and running.

Consider using LayoutUtil-Plugin, it allows you to automatically calculate UIAspectRatioConstraints in studio!

SETUP

With LayoutUtil v2.0.0, it’s never been easier to use. You simply need to call the function returned directly from the library.

LayoutUtil(myUIListLayout)

EXAMPLES

Without LayoutUtil

As you can see in the gif, this game doesn’t maintain the aspect ratio of each child. This progressively gets worse over different resolutions. You could also see all of the blank, empty, and extra space left at the bottom. In this example, they keep each child element in offset, if it were in scale, it would stretch. This is a big problem LayoutUtil aims to fix for developers, it enables you to use scale without stretching, all while automatically resizing the canvas.

With LayoutUtil

Contact

Roblox: iiNemo
Discord: nickk#9163 - Try to DM me directly rather than adding (for a quicker response).

View the latest news for version 2.0.0

148 Likes

Pretty useful for making GUIs. I would give this a try.

1 Like

We used it for Minion Simulator and Combo Clickers, works really well.

3 Likes

Does this module account for UI elements inside the frame that use Scale as the size (eg a button inside that frame that has its size set to {0.1,0}, {0.1,0}? I want my buttons to size down for mobile and size up for bigger screens, and all of the code I’ve used to try and do this unintentionally makes the UI elements bigger/smaller than intended.

If not, an alternative would be neat because I’ve been stuck on this for a bit now.

For that you should be using UIAspectRatioConstraints, they will automatically resize a GuiObject based off the aspect ratio of your screen. If using it alters the size of the GuiObject, then keep tweaking the AspectRatio property until it seems to align with how it was before.

1 Like

Added GitHub Repository as well as a Wiki.
New features, performance optimizations, and bug fixes described on the Latest Releases.

3 Likes

Thank you I used it for my games, it works :slight_smile:

1 Like

I’m confused on how to use your API for my Scrolling Frame.
When I run the script nothing is happening. Please let me know what I’m doing wrong!

Here is my Setup:
Screenshot_23

Here is my code:

--// Modules //
local LayoutUtil = require(game.StarterGui.Modules.LayoutUtil)

--// Variables //
local Player = game.Players.LocalPlayer
local UILAYOUT = Player.PlayerGui.ScreenGui.ScrollingFrame.UIGridLayout

Config = {
Bind = false, -- Removes instant binding.
ResizeCanvas = false, -- Removes canvas resizing.
ResizeContent = false, -- Removes content resizing.
OnResize = false, -- Updates when it's resized.
OnWindowResize = false, -- Updates when the content size changes.

-- UIGridLayout Exclusives
CellPadding = UDim2.new(1,1), -- Default CellPadding.
CellSize = UDim2.new(1,1), -- Default CellSize.

-- UIListLayout Exclusives
Padding = UDim.new(), -- Default Padding.
OnAxisChange = false, -- Updates when FillDirection changes.
OnAdd = false, -- Adds object to the resize cache.
OnRemove = false, -- Removes object from the resize cache.
}

--// Script //
LayoutUtil:ConvertToScale(UILAYOUT)

local Class = LayoutUtil.new(UILAYOUT,Config) -- define the path to the UILayout
Class:ResizeCanvas()
Class:ResizeContent()
Class:Bind()
1 Like

The config parameter is just for extra functionality, I should probably make that more clear. If you read up on the example page, all you have to do is require the module and then do .new(UILayout).

local LayoutUtil = require(PATH) -- define the path to the module

LayoutUtil.new(UILAYOUT) -- define the path to the UILayout

Above is all you need to do to get it to work automatically.

1 Like

This is a godsent, i was about to complain about how scrolling frame is a joke in developer discussion

Small bug relating to UIListLayouts was fixed, read more on the latest release.
If anyone has feature requests or problems with bugs, be sure to lmk.

1 Like

How can I use this in combination with UIPadding? The padding is messing up the calculations and making the sizes inaccurate. Any solution?

I believe you can hard-code custom padding using the module.

Not really necessary anymore, I ended up just changed the structure of my UI. Thanks for the suggestion though!

He was talking about an actual UIPadding object I believe, which really shouldn’t affect LayoutUtil. With your statement though, that brings up an idea where I shouldn’t restrict users from having to change the padding directly from my module.

This is simply a game-changer! This has become so essential in UI development. It’s simple to set up and had saved me so much time! Thank you for releasing LayoutUtil!

  • eiz_a

Am I doing something wrong here? I’m trying to use this with a UIListLayout, with all items using Scale for size and position. Testing it in the command bar first.

https://gyazo.com/7de64ee85e53bf1241b8aab0e7089fd4

  1. X scroll direction being created when I don’t want it to.

  2. Resizing the window too much seems to create an issue where the items dont fit the ScrollingFrame, and this change seems irreversible (as seen in the gif).

I can provide more information if you need.

Does this module convert offset values to scale, should i use scale or offset for my elements? I am currently making custom chat and im really stuck i mean literally scrolling frame is just a joke for me and its practically impossible to make responsive design with it

1 Like

I’ve gone out to test it myself and I noticed that a previous fix ended up causing the problems described in your gif. I just released a new version which should fix your issue here. Also don’t forget to use a UIAspectRatioConstraint on top of everything.

2 Likes

The ScrollingFrame should be set to a CanvasSize of (0, 0, 0, 0). With that you should be setting all the children to scale from inside studio, there should be no offset.

1 Like