3
\$\begingroup\$

I'm hoping the fix is quite simple, but this has become increasingly frustrating. I've built a minimally reproducable example. This is how the table is rendered:

enter image description here

And this is the corresponding code:

    private Table testTable() {
        Table table = new Table();
        Skin skin = new Skin(Gdx.files.internal("skin/uiskin.json"));
        Label label1 = new Label("String", skin);
        Label label2 = new Label("Hello", skin);
        Label label3 = new Label("World", skin);

        table.add(label1);

        table.row();

        table.add(label2).width(100).height(100);
        table.add(label3).width(200).height(200);

        table.setFillParent(true);
        table.debugAll();

        return table;
    }

As you can see, the "Hello" and "World" labels are not centered within their logical tables. Further, even if I try .width(100).height(100).center(), or even .bottom().right(), for example, the two labels' positions are always fixed to the left, center of their logical table.

The only way I could 'fix' the problem is by excluding the .width().height(), but I need them for my UI.

Any thoughts?

\$\endgroup\$
2
\$\begingroup\$

To understand why left() right() center() etc. doesn't work try doing label1.left() or label2.top(). See how they move to be top / left aligned? Well why is this?

This is because those methods align the Actor inside of the Cell, not the content inside of the Actor. To understand take a look at my (super professional) drawing:

drawing

See how label1 and label2 does not occupy the entire cell, but label3 does? This is why we can change the alignment of label1 and label2 but not label3. From this picture we can also see that if we align label1.top() or label2.left() this wouldn't have any effect since they cannot be moved in that direction.

Solution

If you want to align the text inside of a Label use Label#setAlignment() with one or more constants from the Align class (docs). In your case you need setAlignment(Align.center) to center the text inside of the label.

Code:

private Table testTable() {
    Table table = new Table();
    Skin skin = new Skin(Gdx.files.internal("skin/uiskin.json"));
    Label label1 = new Label("String", skin);
    Label label2 = new Label("Hello", skin);
    label2.setAlignment(Align.center); // Align
    Label label3 = new Label("World", skin);
    label3.setAlignment(Align.center); // Align

    table.add(label1);

    table.row();

    table.add(label2).width(100).height(100);
    table.add(label3).width(200).height(200);

    table.setFillParent(true);
    table.debugAll();

    return table;
}

This will produce this result:

result

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

In your current code you are expanding the actors (in this case labels) themselves by setting .width(xxx) and .height(xxx). You can see this by the green rectangles which indicate your actor. Since the labels are by default aligned to the left your text will show aligned to the left. If you do .right() there will be no change since it's already on the right since it's stretches the whole cell.

One easy fix would be to set the alignment of your labels.

label2.setAlignment(Align.center);
label3.setAlignment(Align.center);

You can add additional alignments by using "|" like label3.setAlignment(Align.center | Align.top);.

I guess you want to be the world as large as possible and the main table to fill the whole screen. This can be done with the expand() and fill() method. This will adjust the size to fill the whole table, you already told the table to fit the stage by setting it to fill it's parent.

private Table testTable() {
    Table table = new Table();

    Label label1 = new Label("String", skin);
    Label label2 = new Label("Hello", skin);
    Label label3 = new Label("World", skin);

    table.columnDefaults(1).width(300);

    table.add(label1).row();

    table.add(label2);
    table.add(label3).expand().fillX(); //<-- only change

    table.setFillParent(true);
    table.debugAll();

    return table;
}

Since by default widgets/actors are aligned to center within the table cell both label1 and label2 will be centered. If you want to have some extra room in your left column you can also use padding and leave the alignment of text with

table.add(label1).pad(20).row();
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.