How best to create grid layouts with varying size components?


#1

E.g.


Or
https://www.gtplanet.net/wp-content/uploads/2016/09/FH3-Expansion-Pass-860x484.jpg

Since UIGridLayout enforces constant size and I’d rather it be adaptable rather than hard coding it.


#2

UIGridLayout is actually specifically designed to support this use case. Simply increase the size of your elements so that they fill multiple cells, and their size will be rounded up to a multiple of the cell size (plus in-between padding).


#3

Nice, Thank you! Could this be added to the wiki entry for UIGridLayout?


#4

It looks like there’s a few bugs, I just gave this a shot myself.

It only worked when I used a UISizeConstraint with MinSize (as opposed to just setting the Size), and it also appeared to not work when you have a UIAspectRatioConstraint parented to the UIGridLayout (which is important if you’re using scale sizing of the CellSize). Additionally, having multi-cell elements causes HorizontalAlignment=center to explode. There were also bugs that caused it to not readjust itself when a cell switched from single-cell to multi-cell as I was editing it. I’ll make sure all of these are filed and that we fix them. I think they’ll be fixed by the new UI backend we’re looking to ship in the coming months.

Yeah, I’ll file a ticket for it.


#5

Thanks, thats probably saved me many hours of head scratching. Guess I’ll put in a hard coded version for now, with the intention to switch after the fixes are live.


#6

Ok, I can confirm. UIAspectRatioConstraint really doesn’t like UIGridLayout.