LayoutUtil is a Luau library for dynamically sized ScrollingFrames with dynamically sized elements, without stretching.
Resizing the window is to simulate different screen resolutions.
[dependencies]
LayoutUtil = "ok-nick/[email protected]"$ npm install @rbxts/layoututilLayoutUtil.list(layout)
LayoutUtil.watch(layout)list will immediately insert UIAspectRatioConstraints for each child, while watch will ensure any subsequent children also get the same procedure.
LayoutUtil.grid(layout)UIGridLayouts work differently than UIListLayouts. Instead of each child needing a UIAspectRatioConstraint, only the UIGridLayout needs one.
LayoutUtil.resize(scrollingFrame)You may prefer using the AutomaticCanvasSize property, but it is known to have bugs, read here.
LayoutUtil.constrain(object: GuiObject, absoluteSize: Vector2?)Calculates and inserts a UIAspectRatioConstraint into the specified object. This function will reuse UIAspectRatioConstraints if one exists as a child.
If the object (or its ancestor) hasn't been parented, by default Roblox assigns the AbsoluteSize property to (0, 0). If this is the case, be sure to specify the absoluteSize parameter explicitly.
LayoutUtil.grid(layout: UIGridLayout, parentSize: Vector2?)Calculates and inserts a UIAspectRatioConstraint into the specified UIGridLayout. This function will reuse UIAspectRatioConstraints if one exists as a child.\
If the object (or its ancestor) hasn't been parented, by default Roblox assigns the AbsoluteSize property to (0, 0). If this is the case, be sure to specify the absoluteSize parameter explicitly.
LayoutUtil.list(layout: UIListLayout, parentSize: Vector2?)Calculates and inserts a UIAspectRatioConstraint into each child neighboring the UIListLayout so that they maintain their aspect ratio.
If the object (or its ancestor) hasn't been parented, by default Roblox assigns the AbsoluteSize property to (0, 0). If this is the case, be sure to specify the absoluteSize parameter explicitly.
LayoutUtil.watch(layout: UIListLayout) -> RBXScriptConnectionWatches for new children in the parenting ScrollingFrame, then calculates and inserts a UIAspectRatioConstraint.
This function is only applicable to UIListLayouts. UIGridLayouts only need one UIAspectRatioConstraint as its child.
LayoutUtil.resize(scrollingFrame: ScrollingFrame, layout: UIListLayout | UIGridLayout, axis: Enum.AutomaticSize) -> RBXScriptConnectionAutomatically resizes the CanvasSize property of a ScrollingFrame.
resize uses the AbsoluteContentSize of the UILayout to calculate the CanvasSize for the ScrollingFrame. You may choose to use the AutomaticCanvasSize of a ScrollingFrame, but it is known to have bugs.
Using offset for each element of the ScrollingFrame works, but it doesn't adapt to the user's resolution. On a small screen, the UI may look fine; however, on a large screen it may be too small.
Scale will adapt each element's size to the user's resolution, but it will not prevent them from stretching.
LayoutUtil uses UIAspectRatioConstraints internally! For a UIGridLayout, it will calculate and insert one as its child, and for a UIListLayout, it will calculate and insert one for each element, as necessary.
The LayoutUtil plugin calculates and inserts UIAspectRatioConstraints into nearby UILayouts. While it doesn't substitute the library, it does cover cases where you either have a UIGridLayout or a static UIListLayout (meaning no children are added at runtime).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent