Going crazy with creating UI tables

[BlindSpectator85]

Hi,

I would say I am an advanced beginner with Unity but creating tables for the UI is really driving me crazy. It is probably very easy, however, feel free to laugh at me

I have a very simple setup just to test everything. So basically I have a screen, that has a menubar with 6 buttons. Each button should simply switch through the screens that are shown below the menubar:

The buttons don’t have any function right now. What is more important, is the part under the buttons. There should be a table with columns. Right now, I am just spamming random data into the tables, just to play around. I want the table to spread over the whole width of the screen.

So I created a ScrollView (“TableView”)

I dont want a horizontal scroll bar, so I simply deleted it.

The object “Content” has a Vertical Layout Group that should force the rows to be expanded over the width of the screen.

The “RowTemplate” has a Horizontal Layout Group

There is a script filling the table with random data. The output is this:

I want the 3 columns in the table to have a width, that fills up the whole screen. It is probably very easy but I couldn’t figure it out.

[Kurt-Dekker]

For a pure grid you probably want to use the GridLayoutGroup stuff.

You would have one GridLayoutGroup for your header (those buttons) that isn’t within your scroll rect, then another identical GridLayoutGroup within the scrollrect and some kind of ContentSizeFitter to expand it as you add rows.

BTW, you’re very right to iterate on this stuff… what you contemplate is doable, but it does take some experimentation.

[BlindSpectator85]

OK, thanks a lot. Indeed, it turned out that working with a Grid is way easier than the way I did. That helped a lot, thank you.

[Kurt-Dekker]

The only downside is that GridLayoutGroup does kinda force you to… well, a grid.

If you need varying width columns you would need to go to a stack of HorizontalLayoutGroups within either a GridLayoutGroup (one long grid cell per line), or within a VerticalLayoutGroup.

With a HoriziontalLayoutgroup you can then more-finely control the column widths of each by putting a LayoutElement on each one. The easiest is to force the width of all but the final cell.

It is really powerful, just finicky. I still prefer it over UIElements just because it is Components on GameObjects right there in my scene. Others hate it for exactly that reason.

ALSO: be sure you set up your scaling correct first or when you change screen sizes you’ll be very sad.

For Unity UGUI, here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Unity - Manual: Designing UI for Multiple Resolutions

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Inconsistent game object placement/size between two people

It can be very fiddly but it is super-powerful once you reach comfort with the UI. Building upon Praetor’s great post above, let me suggest this approach: make a quick first draft of your UI. in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions) see what happens to your UI in this new shape window iterate and fix your anchors and scalings and whatnot Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) …

SOLVED: Game UI Button Size problem

That seems excessive… What is the text of the actual complaint from them? Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box: [7337383--891847--fixed_aspect_ratio_box.png] then anchor that fixed against the bottom center (red dot below). On the ipad it looks like: [7337383--891850--ipad.png] on the iPhone it looks like: [7337383--891853--iphonex.pn…

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

Here’s some more fit-inside-UI-content notes:

Making UI elements fit the size of their content | Unity UI | 1.0.0

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

[CodeSmile]

@BlindSpectator85

creating tables for the UI is really driving me crazy

It’s pretty darn simple with UI Toolkit / UI Builder.