I'm trying to layout a fairly simple Table on a menu screen. Using LibGdx, Android only, with Scene2D.
I need the first three rows to fill the table width, and be centered in the row, but not stretch across the whole screen.
Then have each Checkbox evenly take up the whole row, followed by the two bottom buttons evenly kind of centered in the row.
The Table Wiki doesn't help at all for this kind of layout and I can't find any tutorials or examples on the web that would help.
I've tried using fillX(), expandX(), colspan(), but it keeps turning out the same.
X L a b e l X
X S l i d e r X
X L a b e l X
X Checkbox X Checkbox X Checkbox X
X Button X Button X
I'll worry about the padding later, at the moment I'll be happy just getting it looking something like the above.
It always ends up looking like this, with the first three rows only taking up half of the table width:
XXXXXX |
XXXXXX |
XXXXXX |
XXXXXX |XXXXXX | XXXXXXX
XXXXXX | XXXXXX
UPDATE:
I tried to look at some more examples and eventually figured out how to get the formatting looking fairly good, so I think I pretty much answered my own question.
I got it working before I saw the example posted below, but that's a really nice example, and I still might use some of it.
Thanks for your replies!
This was my Xth attempt that got it to initially look okay:
baseTable.add(label).colspan(3).center();
baseTable.row();
baseTable.add(slider).colspan(3).center();
baseTable.row();
baseTable.add(label2).colspan(3).center();
baseTable.row();
baseTable.add(Checkbox1).width(135f).center();
baseTable.add(Checkbox2).width(135f).center();
baseTable.add(Checkbox3).width(135f).center();
baseTable.row();
baseTable.add(imageButton1).colspan(2).width(202f).center();
baseTable.add(imageButton2).colspan(2).width(202f).center();