Problems using AspectRatioFitter with VerticalLayoutGroup

Archived Forums Questions & Answers
1

I’m trying to create a simple Scrolling User interface, where the height is dynamic based on the device width for instance:

ViewPort (ScrollRect)
- Content (Vertical Layout Group) 
   - Square Image  (Aspect Ratio Fitter 100% width)
   - Square Image  (Aspect Ratio Fitter 100% width)
   - Square Image  (Aspect Ratio Fitter 100% width)

It seems this should be simple enough, however, I get the follow error message when I try to attach AspectRatioFitter to any child of the Vertical Layout Group - “Parent has a type of layout group component. A child of layout group should not have an AspectRatioFitter component …”

What is the best way to implement a user interface like this?

2

Before changing height

After changing height

seems like a group layout doesn’t know what is the actual size of the item when crossing the one certain aspect ratio. And I can only guess that’s the aspect that’s not even possible in any device.

I do see an error warning messages, and not sure how they should be used in this scenario. Having a scrollrect, content(panel) and the list of items that should be scaled based on height within the height of the content(panel), and also keep all the parent’s layout group spacing and offset values to be same for every children that has a layout element component attached, even though the items size changes based on height that’s defined in aspect ratio fitters. I’m pretty sure I don’t have much time for testing every single behavior when using this new UI system, this should be one of the core features, it shouldn’t be this hard to implement quickly.

Maybe it’s because of that my native language isn’t English, I was reading How To desciptions and video tutorials but there is so many of them, and it’s hard to find something you’re looking for exactly.
file:///C:/Program%20Files%20(x86)/Unity/Editor/Data/Documentation/html/en/Manual/script-AspectRatioFitter.html

Questions:

A) The Aspect Ratio Fitter does not take layout information into account such as minimum size and preferred size.

So what does it means in this scenario? I want layout group/content size fitter use the actual size of the item (including the aspect ratio fitter scaling).

B) It’s worth keeping in mind that when a Rect Transform is resized - whether by a Aspect Ratio Fitter or something else - the resizing is around the pivot.

So it means only just by changing the items own pivot point you can specify which direction(s) it’s scaling them. It doesn’t matter as long as the layout group knows how big they’re actually, so I can simple rely on those layout group offset values.

3

To whomever it might matter (I found the thread while googeling my problem):

If you want to set one anchor position of a rect to the anchor position of another I made a script for that: GitHub - JohannesDeml/RectTransformAnchorConstraint: This is a quick and dirty proof of concept to hook rect transform to one another

You can use it with one aspect ratio fitter and the other elements adapting to that one :slight_smile: