Grid with different options - ILayoutGroup

I found a thread talking about something similar to this but there wasn't a solution for the asked problem, so I will try to make it clearer here.

Basically I want to create a grid that behaves similar to the current Horizontal/Vertical Layout group. I want to give a minimum size for the elements (and probably other options like padding, spacing, etc..) and then the layout system would calculate how many elements it could fit in a row and calculate the distance between each element and the borders.

Since the new UI system is highly extendable (which is an amazing thing) I already found that all I have to do is extend my class with ILayoutGroup. I read the Auto Layout page which is on the documentation of the 18 beta, but unfortunately I couldn't create the code I wanted.

Some questions:

1- On the Auto Layout page it says "A layout element is an Game Object with a Rect Transform...". I think I'm missing something here because Rect Transform inherits from Transform IIRC, how do I get the LayoutElement properties from the game object? Or do I need to add a LayoutElement to every object inside the grid? If this is the case, you should make it clearer on the documentation page.

2- I created my class and I implemented the ILayoutGroup interface, it created 2 functions SetLayoutHorizontal() and SetLayoutVertical(). I just have no idea what should I do there. On the documentation page on the topic "Layout Calculations" it describes the order of which the functions are called but it doesn't give an hint on how to do it. For instance:

Who calls the CalculateLayoutInputHorizontal() functions? is it the LayoutController?

So on the SetLayoutHorizontal() I have to go through all the children and set their width? And probably override what was done on step 1?

Step 3 and 4 is basically the same but for Vertical options, so to draw a group it iterates over all children 4 times?


Is it possible for you guys to show us a code example of how one of the layout groups were done? I think it would be way easier to understand the system.

 

You can use LayoutUtility methods to get the layout properties of a RectTransform.

No it's the LayoutRebuilder. Basically it's done automatically and you shouldn't need to worry about it.

You set the widths (sizeDelta.x) and x position (anchoredPosition.x) of all children, yes. It doesn't override anything from step one. The actual calculated width is not the same as the minimum, preferred, and flexible width information reported by the children themselves.

Yes. Automatic layout is a complicated thing. IMGUI works approximately the same way, as does css flex layouts.

All right, you can see the internal code here for the HorizontalOrVerticalLayoutGroup class, which is used for both horizontal and vertical layout groups:

https://gist.github.com/runevision/b766f4a050b3021955fa

 

Thank you runevision! That was a quick and clarifying answer!

 

Is there a way that the objects automatically set to a position by the vertical layout group could move smoothly to their position ?

As shown in picture, I use a vertical layout to get a list the player can sort with a dragHandler. It works like a charm. My problem is that I'd like items to move smoothly to their new position. Currently, it goes from pic1 to pic2 in one update, which is not very nice. I'd like to smooth this. My guess is that I'd need to tinker with SetChildrenAlongAxis but I'm not quite sure. Is there an easier way to do it ?

 

runevision, thank you so much for this forum post! It contained the last small bits of missing information that aren't currently in the Unity docs, and enabled me to fix Horizontal and Vertical LayoutGroup, and AspectRatioFitter perfectly!

I'm going to reply in more detail in a different thread about this (that's 2 years newer than this one), but ... this is a huge breakthrough. No more swearing at the Unity Editor each time layout goes wrong .