Hi! The built-in GridLayoutGroup component in Unity’s UI is limited to identical cell sizes specified in the inspector. I’ve made a custom script that allows you to create a grid whose columns and rows are variable sizes, dynamically resizing to fit the largest content in that row or column. This is something I’ve seen requested a lot, but I couldn’t find any existing examples of it.
And I’ve made an explainer video for it: (EDIT - please note, the explainer video was for version 1 of this. The github repository has a new branch with improvements.)
thanks for saring your code
This looks really useful. I have to test it a little bit but I guess I will find usages for it.
Under which license do you provide the script?
I think about adding it to my Asset Better UI and add resolution independent scaling for padding and spacing to it (with the resizing system of my asset).
I would also suggest that you make a repository from it somewhere (e.g. GitHub) so that other people can fork your code and improve it for their needs.
PS: Your video is very well done. It feels like you make tutorial videos all day long
Glad it might be useful to you! It would be nice if you would mention that that particular bit is derived from my code, especially if you incorporate it into an asset that you’re selling.
I’ll look into putting it on GitHub. I’m also going to add more features soon - primarily column and row spanning to start with.
And thanks also for the compliment about the video! That’s a big part of my day job, so yes I have experience
Yes, of course. I would place a comment in that file with a link to this thread (or github) and mention that you are the creator.
I would suggest to release it under the MIT license. This would reflect what you said
And there’s also the “UI Extensions” project going on, maybe tell them as well.
They already have a similar thing, but it didn’t work out well enough for my needs, while yours does. I’m pretty sure that many other people have the same problem.
Total rewrite of the core code which caches the cell structure, allowing public access to get which cell at grid ref, column/row sizes etc.
Now cells expanding to the size of the largest in the column/row is optional globally for the grid by checking Child Force Expand, and locally for each cell by adding a second component VariableGridCell to the child cell to override the globals.
If cells are not expanded into the available space, you can now choose their Cell Alignment to specify where they sit within the available space. Again, the VariableGridCell component added to a cell can override the global setting.
No explainer video for this one yet - I’ll make one when I’ve finished tinkering. I still want to add column and row spanning, and at that point I might rename it TableLayoutGroup. Hopefully it’s pretty straightforward to understand.
Would it be possible to add support for “LayoutElement” on cells?
For example if you had a VariableGridLayoutGroup with one row and two columns.
Then you’d add a LayoutElement component to each cell and set their FlexibleWidth to 0.5 (or prefered width to 0.5), so they always split the space 50:50…
Or would that be a whole different kind of layouting then?
Your example would be amply served by the current built in GridLayoutGroup!
LayoutElement on a cell will already work for absolute pixel sizes (not for percentages). Percentages would be a bit difficult as you’d have to manually ensure not totalling over 100%. I could go for a proportion integer but even that would get tricky if not all cells were specified. I think I would need to create a whole different layout group class with column and row sizes set in the inspector. (Maybe at some point I’ll do that )
What you’re suggesting would be a cool idea, but would need a new class rather than tweaks to this one. The reason (as far as I see it) is that in my class the cells and therefore grid derive their sizes from their content; whereas in your suggestion the grid decides the sizes of the cells. Two quite different scenarios. All doable, but as I don’t need that for my project right now I’ll have to disappoint you I’m afraid! One day when I’ve got time…
I highly recommend it! It’s a bit of a puzzle to get your head round at first but didn’t take too long in the end, and it opens up a whole new world of possibilities!
Bumping this, as I’ve just merged the code branch into the main branch in Github - some people were finding code errors in the main branch. Should be just the main branch now and should be working! https://github.com/quoxel/VariableGridLayoutGroup
I’ve been using this and it’s worked wonderfully (much appreciate) on a test scene but for some reason when I add it to another scene from a prefab I can’t get the readings for rect.height on any children below the object the script is on (basically expanding TextMeshPro cells). They all come out as 0.
It’s quite a similar case to this one
.however none of those solutions have worked in my situation.
Have you come across any similar issues? Thanks!
Or, is there any alternative such as getting the height of a cell via property in VariableGridLayoutGroup?
Hi, and I’m happy you’re enjoying the class! I haven’t come across this scenario - it didn’t cross my mind to test adding it to a prefab. I haven’t looked at it for a while, but if memory serves, it might be possible to add a property to store the widths and heights once they’re calculated. Outside of this scenario it would duplicate some data, but for your problem it should help. If I get any time soon, I’ll have another look at it and update the code.
)