(More) Complex AutoLayout Examples / Tutorials

The Unity UI autolayout system seems generally badly documented, full of bugs (like objects collapsing to zero size), and in general I have just spent two days failing to build a reasonably complex UI

I'm the author of lots of Unity apps with complex UI (including some 3rdparty publisher ones that are very well known), so it's not like this is my first UI in Unity (the previous two used NGUI and manual positioning of elements in UGUI), but the documentation and examples are near non-existent (the closest thing is the shoplist tutorial, which builds a single non-nested vertical layout group.)

Even the most trivial of changes seems to result in collapsing of object sizes to zero and unexpected behaviour. As an example, take the LayoutGroups example from the Unity UI Examples. Suppose, hypothetically, that I want to replace the letter grid with a VerticalLayoutGroup (nested) of 4 letter buttons.

The following sequence of clicks:

- Delete all but letters A thru D sub-objects of Grid.
- Remove GridLayoutGroup component from "Grid" GameObject.
- Add a VerticalLayoutGroup component in its place.

Note, for example, that if I copy the vertical Layout Group from above, and paste it onto "Grid" as a new component, all sizes of the buttons are collapsed to zero (even though they were perfectly sensible before.)

- Why does "Grid" have a LayoutElement with Flexible Height of 1, whilst HorizontalGroup has no LayoutElement?

Similarly, suppose I want to duplicate the "Grid" group, so that we have Grid, Horizontal Group, Grid. Starting from a fresh copy of the Layout Groups scene, right-click "Grid" and duplicate. Result: second grid element overlaps the "Horizontal Group" of buttons at the bottom. This continues to be true even if you select "Fixed Row Count" of 3 rows for the grid (at which point autolayout and grid should compute the same height extent beause it's fixed?)

By the time you get to interactions of LayoutGroups, LayoutElements and ContentSizeFitters the interactions are so numerous there's no way to intuitively understand what's going on. I could step through the source code for the UI, but is there any more complex examples available, along with some practical guidance on how they were built (this thing needs a VerticalLayoutGroup set like this, and this needs...)

Are there any examples of complex (app-style) UI built with LayoutGroups, as at the moment it feels like a poorly documented feature that seems incredibly powerful but is impossible to use in practice.

 

I guess once you get to complex systems the ui won't perform that well anymore due to recalculations. Good talk about performance breakdown and problems:

 

There was never a game written that didn't end up with some programmer profiling it, desperately looking for cycles in the rendering or AI, and going "we spend HOW much of the frame on our frontend?!?!?!"...

That's really a tier 2 problem though when I can't find much evidence of the UI system being used to build complex UIs...

 

Solution: If you are building a complex app-like UI go back to NGUI.