Preserving aspect ratio for layout group elements

Question

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:

alt text

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 1

Best Answer

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

Add comment · Show 1 · Share

VoidVenom · Mar 15, 2020 at 10:45 PM 0

Share

Thank you, this solved my issue! This solution still works in 2019.3.3f1.

Answer 2

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. alt text

Pixel perfect off: When the scene is loaded all the cards (with the aspect ratio components) are on top of eachother! alt text

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.

untitled22.png (65.1 kB)

untitled23.png (55.7 kB)

Add comment · Show 1 · Share

gillemp · Jul 14, 2021 at 01:52 PM 0

Share

I ran into the same issue! I posted it here: https://forum.unity.com/threads/bug-aspect-ratio-filter-not-being-applied.1140694/

Answer 3

Answer by gillemp · Jul 22, 2021 at 02:38 PM

An Issue has been created in the Unity Issue Tracker. You can vote for it here

Add comment · Show 1 · Share

gillemp · Sep 01, 2021 at 10:43 AM 0

Share

As said in the resolution, the recommended workaround is using "LayoutRebuilder.MarkLayoutForRebuild(HorizontalLayoutGroup)". More info in the issue itself

Preserving aspect ratio for layout group elements

3 Replies

Your answer

Follow this Question

Related Questions