Unity UI Arrange UI elements with auto-centering (Grid layout group?)

Hello guys,

I'd like to know what I can do to have some UI elements arrange automatically when they're added under a transform in the way shown in the picture below.

I tried using the Grid Layout Group, but it does not arrange in the way that I want despite playing with all the options available. What can I do to arrange my elements like in the picture below?

 

Hi there. Did you find a solution to this?

 

I needed this functionality recently too, and solved it by copying the Grid Layout Group component from the UGUI library and adding in a hot-fix to give it the desired functionality. I've uploaded the fixed component to github, which you can download here: https://github.com/mrbeardy/BeardyGridLayout.

This issue happens because as it wraps around, it uses the width or height of the main axis to determine how much space is required for the overflowing cells, causing the offset to be based on a width/height of more cells than there are in that row/column.

This fix checks to see if we're on the last row/column, and use the width/height of the number of remaining cells when choosing the starting offset.

Before:



After:



It also supports a Vertical starting axis, although you'll need to change the Child Alignment to Middle Left/Center/Right.

Since the Grid Layout Group component has so many options, it made it difficult to come up with a solution that would work for every scenario, so it comes with a few issues when you're trying to use certain settings, but for the traditional horizontal/vertical middle-center aligned requirements it should work. Pull requests are welcome!

 

Much appreciated! It looks much nicer than before, for sure.

Now I'm going to be an asshole and ask... do you think it would be possible to distribute columns and rows equally as well?

For example, in exhibit 4, that there are two rows of two elements? As if it's "growing" from the middle center, I mean.

In any case, thanks for chiming in and share, man.

 

Hey! Hmm, do you just mean using a fixed column/row count? Currently I have it set to flexible, but using a fixed column count gives something like this, is this what you meant?



There's also some stuff you can do with vertical alignment, maybe that's what you're after.

Feel free to draw a mock-up and maybe we can figure it out.

 

Hello,
Thanks for providing this component that solves a long standing issue that we had.

I'm using Unity UI Extensions ( https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/wiki/Home ) that provides Reorderable List component to allow reordering of Grid Layout Group children.

I tried replacing the original Grid Layout Group with your component but that seems to break the behavior of Reorderable List.

With original Grid Layout Group


With Beardy Grid Layout Group


I'm trying to figure out why that's happening but maybe you have some clue as you surely know how those layouts work more than I do.

 

Hey @Ultraspider! That's interesting... I've replicated this on my machine, I'll have a look into it and get back to you if I figure it out.

 

@Ultraspider Managed to fix the issue. The issue seemed to be happening because UIExtensions was trying to deal with a GridLayoutGroup from UGUI somewhere, and since I was just inheriting from the class above that, it wasn't working properly.

I've updated the code to now inherit directly from UGUI's GridLayoutGroup, so now my version should work in any place that UGUI's did previously. It also means that I don't need to add in as much stuff and I was just able to override the parts I needed, so the code has been cut down a lot shorter now, which is cool. The changed code is still pretty chunky, but that's just because Unity's SetCellsAlongAxis method is doing so much.

Here's a link to the 1.0.1 release which contains the fix: https://github.com/mrbeardy/BeardyGridLayout/releases/tag/1.0.1

---

Just a general comment on this package, I don't really like this being its own package, as it's such a small change to be in a package by itself. I might spend some time and see if I can get it added into UIExtensions, as I think that'll be a better place for it.

 

That's great. It's working very well. Thanks for your quick answer @Mrbeardy

 

@Mrbeardy Awesome stuff. Works great! Thanks for sharing this.

 

I ran into the exact same problem and @Mrbeardy saved my day! Thanks for the share!

 

@Mrbeardy Thanks, mate!

 

for such a task, I use FlowLayoutGroup from Unity UI Extensions https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/wiki/Controls/FlowLayoutGroup

 

@Mrbeardy I did find a bug in the package. Whenever I use Child Alignment Middle Center and Start Corner Upper Left, the bottom row that isnt full will be displayed outside the content view.

 

Thanks a lot @Mrbeardy! This is really helpful!