I am trying to create level selection UI where each level is represented by a square button in scrollable horizontal layout group. Horizontal group height is relative to screen height and each button should be fill full layout group height.
My current solution seems to be working but Aspect Ratio Filter gives me a warning message. According to this thread, it shouldn’t be done this way, but somehow it does exactly what it should be. However UI doesn’t update until I hit the Play button. Currently it looks like this:
Scroll Rect is set to scroll Horizontal, Clamped, Viewport set to Mask
Mask convers the Scroll Rect
Horizontal Layout Group is set to Child Controls Size (Height) and Child Force Expand (Height) and has Content Size Fitter (Horizontal: Min Size, Vertical: Unconstrained)
Each Button has Layout Element (Min Width 100, Min Height 100, Flexible Height 1) and Aspect Ratio Fitter (Height Controls Width) - this element displays message that “A child of a layout group should not have a Aspect Ratio Fitter component”.
How can I achieve the same result without errors or warnings?
I think having Aspect Ratio Fitter in a Layout group is a viable solution. The warning is there to make you aware of the fact that you could possibly make two components control same dimension, which will lead to unexpected behavior as the two of them will try to adjust the dimension concurrently. So you need to make sure you understand what you are doing to make it work.
For example, if you need the horizontal layout group where the heights and alignment are controlled by the layout group, but the children of the layout group should keep the aspect ratio:
On the parent object with horizontal layout group check height in Child Controls Size and Child Force Expand, but make sure to uncheck the width in both.
On the child objects add aspect ratio fitter and set it to whatever ratio you like (it can be individual for each child) and set Aspect Ratio to ‘Height Controls Width’
You get a warning when you do this, but you have Horizontal Layout group controlling only height, and aspect ratio fitter controlling only width, so there’s actually to conflict here.
I’m just using the aspect ratio (height controls width) inside of an horizontal layout (contols only the height of children) and I have some wierd results when the canvas is not pixel perfect:
Pixel perfect:
When the scene is loaded (with the UI elements mentioned) the UI looks good and acts as it should.
Wierdly enough, when you disable and re-enable the horizontal layout group’s object, it looks good again! Conclusion: not using pixel perfect on this design (aspect ratio inside horizontal layout) will mess up the UI, and only disable and re-enable the layout will fix it.
Seems like a bug.
