Hello, any advice how to make 'obj#2' move down or adjust when for example obj#1 has a childs?
for the mean time some child or the 1st child of Object#1 is overlapping with Obj#2.
goal is:
obj#1
child0
child1
child2
obj#2 <-----
my hierarchy setup is:
scroll_view <---scrollrect,mask
content <---vertical layout group, content size fitter
[[obj#1]]
sub_content<--- vertical layout group, content size fitter
[[obj#1 child0]]
[[obj#1 child1]]
[[obj#2]]
so on...
I've played around with the settings/options and searched for a video tutorial but most of the one I get are single elements list in scroll view only.
Thank you for reading. Regards.
You can use Content Size Fitter on obj#1 with Vertical fitting, but you should add Layout Element to you child’s(child0, child1, child2) and setup preferred height. But you setup must be identical, if you setup Min Height in Layout Element, use Vertical Fit - Minimum, or Preferred, when use Preferred Width
EDIT: oh, I see you use Content Size Fitter, but if you haven’t Layout Element component on childs, Content Size Fitter can works unpredictably. And, try to add Vertical Layout group on Scroll View, this may help to control vertical position of the elements according to the size
Related
I feel like I am not understanding the Vertical Layout Group component in Unity 2020.3.21 and I am hoping that someone can explain what I am missing.
I have a series of runtime-controlled UI components that I want displayed vertically top-to-bottom. I need to be able to toggle these components on and off at run-time, and have the parent Vertical Layout Group size automatically update to the height of all of the active children. This is exactly the sort of thing the Vertical Layout Group is supposed to handle, right?
When I build out a simple example, I am seeing that the Vertical Layout Group correctly positions the children in a vertical list. However, it competely ignores the sizes of the children when measuring it's own height. This is a problem because I want to be able to throw this container in a Scroll View -- if the height is not accurate, then the Scroll View doesn't work properly.
Here's my demo. I have a series of children in a VLG that all have explicit set heights in their RectTransform. All of them are direct children of the VLG. None of them use a LayoutElement; all heights are explicitly defined in a RectTransform. Here's the scene hierarchy, with the compile-time RectTransform heights of each component in parenthesis.
Canvas (325x812)
GameObject (812)
Vertical Layout Group (100)
Text (45)
Spacer (100)
Text Input (48)
Spacer (20)
Button (48)
Here are my VLG settings:
When I run the game, I can see the outline of each UI object in the Scene tab. The children clearly have their heights set. Yet the VLG still has it's static compile-time height of 100 instead of the sum of the child heights.
Am I missing something about how the Vertical Layout Group works? How can I get this VLG to have it's Height property set to the actual total height of it's active children at runtime?
ContentSizeFitter with Vertical Fit set to preferred size should do the trick. I did a quick test using simplified structure based on your example and got height calculated correctly (height of children objects is 100+50+75):
I have a Panel containing a TextMeshPro (TMP) object and a few other (buttons for example) aligned vertically. I want the following behavior:
Panel size expands vertically as more text is added to the TMP or more elements are added (e.g. buttons and sub-images).
As more text is added to the TMP, we stop expanding the size of the Panel and instead use overflow (ellipses or whatever).
So it should look like this when the text is long, and this when the text is short.
My current setup has Vertical Layout Group and Content Size Fitter components in the Panel object.
The Vertical Layout Group has "Control Child Size" ticked but not "Use Child Scale" or "Force Child Expand".
The Content Size Fitter has "Preferred Size" for vertical fit.
The TMP object has a Layout Element component. If I set this component to a specific preferred size it gets fixed at that size and so handles overflow well but when the text content is short there is tons of extra space.
If I uncheck preferred size from the TMP, the TMP object shrinks to fit small amounts of text snugly (as I want). However, when I add lots of text it keeps growing without a cap, eventually taking over the entire screen and more.
Is there any way to achieve my desired behavior by tweaking the settings of the Layout Element/Content Size Fitter/Vertical Layout Group? Or do I have to write a new component that turns on preferred size to cap the height when text reaches a certain length?
Thanks!
The best solution I found is to add a new component to the parent object with the Content Size Fitter that enforces the maximum.
The new component needs to implement the interface ILayoutSelfController and implement the methods SetLayoutHorizontal and SetLayoutVertical. In these methods, check if the current X and Y dimensions are larger than Serialized maxes you set in the inspector.
The full solution, from a Unity user called Democide (aka Democritus) is available here https://forum.unity.com/threads/purpose-of-uibehaviour.289666/
I am trying to maintain the aspect ratio of child elements within a Horizontal Layout Group when the total width of children would exceed the Layout Group's width.
Given the Horizontal Layout Group below, the child squares' total width fits within the parent so they do not need to scale:
If we add more children and their total width exceeds the Layout Group's width, but by default they do not scale accordingly:
The desired outcome would be that they scale proportionally to fit the Layout Group's width:
I have tried various configurations of settings on the Layout Group's properties and just cannot produce the desired outcome.
The closest I can get the below by checking Control Child Size: Width and setting a Layout Element component on the child and setting the preferred width and height.
Control Child Size: Whether the Layout Group controls the width and height of its child layout elements.
Use Child Scale: Whether the Layout Group considers the scale of its child layout elements when sizing and laying out elements. Width and Height correspond to the Scale > X and Scale > Y values in each child layout element’s Rect Transform component.
Child Force Expand: Whether to force the child layout elements to expand to fill additional available space.
My brain is just not getting to the correct config.
Hopefully, I am overlooking something simple.
It's possible:
Create a Horizontal Layer Group
Tick Control Child Size : Width
Tick Child Force Expand : Width & Height
Add an empty GameObject inside this Horizontal Layer Group
Add another empty GameObject inside the GameObject you made in step 4
Add an Aspect Ratio Fitter component to the GameObject you made in step 5
Set Aspect Mode : Fit In Parent
Alternative Solution that worked in my case:
Create a Horizontal Layer Group
Tick Control Child Size : Width
Tick Child Force Expand : Width & Height
Each child that you add inside the layout group must have an Aspect ratio fitter with:
Aspect mode: Width Controls height
Aspect Ratio: 1
I have a vertical Scroll List. I have developed this app for resolution 768*1024. In this resolution my List is working fine. But when I run my app in higher resolution(1440*2960) it leave some space around all 4 direction.
I have also tried with changing Layout element min height dynamically, but Spacing issue is still exist.
Vertical and horizontal layout set element position in (screen width/height divided by a number of elements) * element number, in other words, they space out all elements evenly across canvas space. To achieve what you want you either have to enable child control size -> height option or write a script that aligns your elements in the center of the screen and one after another taking in consideration their height.
When we use Layout Groups components in Unity editor . it divide our Layouts in same sections.
But i want have different size for my UI's in vertical or horizontal Groups .
In this image i have 3 UI (red , white and green color) . as you see they have same height size .
Red section that its name is header must have smaller height and also footer
It must like following image :
If this is something you want:
Setup vertical layout group like this:
You can see there are 3 child objects of VerticalLayoutGroup object in hierarchy. Header, Content and Footer. Now on Content object, add LayoutElement component and set Preferred Height as desired:
Note: you don't need to add LayoutElement on other children if you don't want to give them extra space. They will use rest of space equally.
From Docs:
First minimum sizes are allocated.
If there is sufficient available space, preferred sizes are allocated.
If there is additional available space, flexible size is allocated.