- Home /
Preserving aspect ratio for layout group elements
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:
And it scales to 4:3 resolution like this:
Canvas is set to Scale With Screen Size
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?
Answer by DarkestDay · Sep 27, 2018 at 07:52 AM
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: 1. 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. 2. 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.
This works for me in 2018.2.2f1
Thank you, this solved my issue! This solution still works in 2019.3.3f1.
Answer by talrumers · Oct 31, 2018 at 02:25 AM
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.
Pixel perfect off: When the scene is loaded all the cards (with the aspect ratio components) are on top of eachother!
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.
I ran into the same issue! I posted it here: https://forum.unity.com/threads/bug-aspect-ratio-filter-not-being-applied.1140694/