Unity UI — Content Size Fitters and Layout Groups
The Content Size Fitter is part of the Unity Auto Layout. Actually, let me digress for a bit.
Like many developers, I started out with text interfaces. I wrote programs in one of the many flavors of BASIC, and for several years, that’s all the interface I really knew. In my defense, mice were kind of an exotic peripheral back then, with most interaction being via the keyboard. When I transitioned into making GUIs in a mixture of Visual Basic and FoxPro (it was a different time), my UI items were placed absolutely and had a fixed resolution. Discovering VB.Net’s options for creating a panel that would automatically handle the placement of objects as it scaled was a revelation. Then, Java Swing UI made me realize just how terrible an automated UI could be, and… right, too much digression, but basically, the Unity Auto Layout brings me back to those early days of learning how to have a UI that didn’t need to be micromanaged.
Content Size Fitter
The Content Size Fitter is a component that essentially tells a component to size itself to fit its content within the limits of its layout group. You can choose to make it unconstrained (basically, not fitting it), or drive the size via the minimum or preferred value for the dimension. And you can choose different settings for the height and the width. The minimum and preferred size are based off a combination of some inherent aspects of the UI elements involved, and their Layout Groups.
Layout Groups
The Horizontal Layout Group lets you space out a set of items horizontally. The Vertical Layout Group lets you space them out vertically. The Grid Layout Group lets you space them horizontally and vertically. You may remember me using the first two in my UI for my AR Application to place objects in the scene. It is a handy way to place the objects in a flexible manner even when you don’t know for certain how much real estate you will have, or how many items there will be.
Aspect Ratio Fitter
Lastly, there’s the Aspect Ratio Fitter, which essentially works a bit like the Content Size Fitter, but adjusts size to maintain a certain aspect ratio.
Example
To make a slightly contrived example, we’re going to set up a situation where we have a set of buttons at the top of the screen, a text area big enough to hold a given text (we won’t worry about scrollbars at the moment) and then a slider underneath them that spans the screen. We’ll start out with a Vertical Layout Group that spans across the canvas. Under that, we’ll put a Horizontal Layout Group that has the buttons as children. Under that, we’ll put a TextMeshPro object that spans the screen with an initial height of 200, and add to it some text and a Content Size Fitter with the Vertical Fit set to Preferred Size. Lastly, under that, we add our slider with the width of the screen.
It’s not terribly impressive, but watch what happens as we add and remove items.
Note that the layout system is a bit buggy, especially when running dynamically. Still, it’s a nice way to start things.