Good day. I am not new at Unity, and worked with UI a while, but still cant understand, how to make menu, when container UI proportionally control element inside it.
Here what I mean:
blue rect - is main container; red rect - is content element which contains Icon button + text;
Blue rect can be resized according to anchor points.
Red rect must fit to the Blue rect width, but also be flexible about it own height, because sometimes text field cant take 2 lines.
Blue rect got Vertical Layout Group with child expand
Red rect got Vertical Layout Group with child expand
Red rect icon got LayoutElement with preferred width and height (55)
Red rect text field got Content Size Fitter with height on preferred size
I make tests for a long time with it. Here is illustration
Add layout element to those red icons, set it minz as u desire,
Then on parent of those red icons, add vertical layout and deselect “Forced” height and width .
Set pivot of that object to Top middle
Add content size fitter in it
Set its Vertical fit to Min size.
Done
thanks for reply. I tried, but instead of min height I set preferred height. Result looks a bit prettier, but the main thing didn’t change - if to put many Red rect objects in Blue rect, they dont scale their height and width proportionally… It start to cover each other that way
I am working on exact same type of Scene today, and it is working for me properly…Make sure your anchors are proper…and only pivot of parent is top middle rest of pivot are center…If that did not work, post some screenshot of your settings etc to understand your porblem
Mask is not a solution for rescaling the objects.
Will explain in that way - If we put in container with height 100 some 4 objects with height 20, objects must keep their height. Now I got that result, that is fine, BUT
if we put in the same container 10 objects with height 20 (totally 200) they must be rescaled to height 10, and also proportionally rescale the width.
not looks like… I think that screenshot will explain the idea
image
Actually I have tried to do it by scripts, but that is not so good way to do it, because the real size of UI elements (form RectTransform component) will be known only after Render order. So you can get some changes only to the next frame after some changes happens. There is a way to make coroutines, but it is so dirty…
And also I remember 1 project, where I had accordion menu (so height changes in every menu click) and that shall to fit the menu container height , not more or less. To make it need to make complicated system, to calculating the height, which will be on the next frame (count all spaces, items which will be shown etc)
The thing is, I think I know how to do that with a script, but the issue will be the text. At one point, the text container will be to small for the text himself (because of the size). So, if your item is too small, the text will disappear. However, you can avoid this by putting a min height. But… if you have too many items, it will be ugly.
I’m trying to do something.
Edit: ok, f*ck it !
You should try to make your own “Layout Element” and try to override CalculateLayoutInputHorizontal and CalculateLayoutInputVertical.
yea, you are right about the text… I didnt think about it. The only way - to change local scale of them… or may be in overwriting that Layout Element to scale content in it.
I will try it.
Actually there is one more simple thing, which I cant understand, why it is not working - standart button. I cant understand, why the parent container with component Button not fitting the size of the text inside it.
For example I need flexible width buttons, because Text inside can be different (use on text content size fitter). If I put content size fitter on the main object with Button component, that doesn’t fit that size…
nope, they are stretched. I still didn’t find a result of overriding layout component, to get result I need. I will share the result, when I get it.
not what I want. Sometimes need to fit container to text field, but not a text field to container. But in that case is possible to fit it manual by script on Text.text edit
