Floating layout group in new GUI

How to create a kind of layout group where the parent layout size would be driven by the floating content?

Or a grid layout with not fixed, but flexible cell sizes?

Just for a replacement of Legacy GUILayout, where you could place variously sized elements inside GUILayout area and the area expanded to accomodate them.

Code (CSharp):

1. GUILayout.BeginVertical();
2. ....
3. GUILayout.EndVertical();

 

Not exactly sure what you would like to do, but what comes to mind is:

a) Could simply LayoutElement with IgnoreLayout for the contained elements work for you? -- You could manually adjust the surrounding area to visually contain the elements. If the containing area is layouted, you can control its size with LayoutElement's preferred width and height. -- To repeat or clarify: You have a containing rect transform, and you have the floating children, and the children would have LayoutElement.IgnoreLayout = true.

b) You can certainly stretch a rect transform in script to visually contain any other rect transforms. You can inquire the floating ones' world corners, and then by using SetSizeWithCurrentAncors you can set the visually containing rect transform's size as needed.

c) I am not sure if you would like to use the grid layout that is provided, but it seems that what you want is not possible with that, I am afraid. However, perhaps a combination of horizontal layouts for column entries, with vertical layouts for rows could work. Here, you could control the sizes of the contained elements with LayoutElement's preferred width and height. You could also add empty elements here and there, representing "flexible space", as was in the old GUI system -- these would have in their LayoutElements the settings Flexible width and / or height set to true.

 

Thanks for your response, @Archie888.
I would just like to instantiate GUI elements into the vertical layout group at runtime.
But I would like it to selfexpand like grid layout does, or like the size of content between BeginVertical() and EndVertical() could grow into infinity.
The inconvenience with vertical layout group is that I have to controll its height with each element added/removed or setting active/inactive .

Then I would like to put the whole vertical layout group into ScrollRect, so the scrollbar would appear after extending a given threshold height.

 

What you are looking for @tomekkie2 is the ContentSizeFitter component.
It's job is to resize a parents RectTransform based on the size of its children.

If you also want to replicate the BeginVertical old gui conrol, then also apply a Vertical Layout Group, which will list child gameobjects vertically.

Finally, if you want to control a childs size under a layout group, then apply a LayoutElement to set its size


Hope this helps

 

Say when I have a number of elements inside the Vertical Layout Group - then I set the middle one in the column inactive - and I would like all the ones below it to go up by its height.
The parent size to increase by the element height, no downscaling of the child elements.

When I reenable or duplicate one in the middle - all below to go down by its height.
The parent size to decrease by the element height, no upscaling of the child elements.

This seem to happen in Grid Layout, and I am just trying to work out how to make it happen in Vertical Layout Group.

 

Sadly this isn't possible in the current UI version because the Vertical and Horizontal layout groups don't recalculate on reactivate on children (at least the last time I checked)
I believe it's already logged and known at the moment, the work around at the moment is to create your own version of the lauoutgroups and use the Grid based way of updating the layout.

 

I think that according to how I interpret you tomekkie2, this is possible. In fact, I am actually making similar stuff in my project. Let me show you by screenshots how I do it.

1. the scroll rect object



2) the content object -- here you have vertical layout, and a content size fitter, with the vertical dimension supporting the preferred sizes of contained elements



3) Here you see the use of the layout element and the preferred vertical size.

Some panels are also disabled here, so you can see how the content rect transform gets smaller dynamically accordingly.



4) More panels added -- content expands!

 

Thanks. This is just exactly what I was looking for. I have testet it and it works very well.
I didn't know the new system that good so I have decided (before I have seen your solution) not to use any layout elements, but just to recalculate all the positions inside the content panel and set the height of the content panel.
It also works well.

I am also using the height of content panel to contol the scrollbar visibility.
I don't want the scrollbar to appear when the content height is below the height of the scroll rectangle.

In your solution I could also do that by just reading the the content rectangle height.

Generally I think all that doesn't seem to be less complicated or easier than in old OnGUI.

 

The new UI is more powerful. There is a learning curve of some days of fiddling around with the layout elements and anchoring. It can be difficult to understand and you may not agree with the principles. I know I didn't. Watch the tutorial videos. When you finally understand the layouting, it is easy stuff to develop, and no clumsy typing of rect this rect that as in the old gui.

Also. a key to understanding how the layouting flows across the object tree is to keep an eye on the Layout Properties window for each UI object:




As you can see, different things will affect these things here, and you need to follow that closely and see what effects what. Start with simple examples for yourself in an example project.

One more tip: When you add elements to the scene as children of some object in script, you must use:

Code (CSharp):

1.  
2. childTransform.SetParent(parentTransform, false)
3.  

The second parameter as false will make things appear correctly. Without that set, stuff will go wrong and you will wonder why. At least in my case. Also, definitely read the UI how-tos:

http://docs.unity3d.com/Manual/UIHowTos.html

 

YAY!!! Thank you, I've been trying to solve this for about 3 days!