Make scene2d.ui table with alternate row colours? - java

I have created a scene2d.ui Table and would like to alternate the background colours of each row.
I've had a look through the various table and cell methods but there doesn't seem to be an obvious way of doing it.
Is it even possible? And if so, what's the easiest way of going about it?

I’ve used drawable backgrounds with one colored pixel. I haven’t found easier way even though it is far from elegant.
//Pixmap with one pixel
Pixmap pm1 = new Pixmap(1, 1, Format.RGB565);
pm1.setColor(Color.GREEN);
pm1.fill();
Pixmap pm2 = new Pixmap(1, 1, Format.RGB565);
pm2.setColor(Color.RED);
pm2.fill();
dialogueWindow = getWindow();
dialogueWindow.setTitle("New Game");
// The table that will have the green color
Table row1 = new Table(mySkin);
row1.add(nameStation);
row1.add(nameStationField);
row1.setBackground(new TextureRegionDrawable(new TextureRegion(new Texture(pm1))));
dialogueWindow.add(row1);
dialogueWindow.row();
// The table that will have the green color
Table row2 = new Table(mySkin);
row2.setBackground(new TextureRegionDrawable(new TextureRegion(new Texture(pm2))));
row2.add(cancel).size(120, 60);
row2.add(ok).size(100, 60);
dialogueWindow.add(row2).fillX();
dialogueWindow.row();

Related

LibGDX not able to use NinePatchDrawable as a background to table, when I created it from textureRegion that was flipped

so here is something I wanted to do
`TextureRegion region = new TextureRegion(new Texture("path to the file"));
region.flip(false, true);
NinePatch patch = new NinePatch(region, left, right, up, down);
NinePatchDrawable drawable = new NinePatchDrawable(patch);
Table table = new Table();
table.setBackground(drawable);
table.add(someLabel);
`
when I add table to the stage I can see the label,but there is no background, same works if textureRegion is not flipped, can someone explain to me why?
That happens because TextureRegion.flip() alters the u/v and u2/v2 coordinates. Creating a NinePatch from a TextureRegion the way you did it only used the texture and the x/y coodinates from that TextureRegion. The u/v/u2/v2 information is lost at this point.
It looks like the NinePatch(TextureRegion... patches) constructor probably preserves that information but I didn't try it.

Image added in table's row takes up more row space that intended

I was adding some images into the table with labels on the side, but the images are pushing the labels quite far away and hence distorting the overall layout.
The images are 640x640 in resolution.
The layout:
I tried playing around with cell functions and tried padding the different rows and columns (kind of worked however this is not what I'm going for as it displaces the whole of the table's components) and I have read the table documentation in GitHub here, however I'm still stuck with the same issue.
Here is the table layout code (table initialised in class constructor)
int[] values;
ArrayList<Label> labels = new ArrayList<>();
//just setting up labels with according values, not really important
if (label.getText().toString().contains("Conjurer")) values = new int[]{200, 9, 10, 15, 15};
else if (label.getText().toString().contains("Monk")) values = new int[]{300, 14, 15, 11, 8};
else values = new int[]{320, 14, 17, 9, 13};
//creating new labels and adding to list
for (int i = 0; i <= 4; i++) {
Label l = new Label(String.valueOf(values[i]), UI.createNewLabelStyle(font, Color.WHITE)); //temp label to add
labels.add(l);
}
Image healthIcon = new Image(stat_atlas.findRegion("healthIcon"));
Image defenseIcon = new Image(stat_atlas.findRegion("defenseIcon"));
Image attackIcon = new Image(stat_atlas.findRegion("attackIcon"));
Image magicAttackIcon = new Image(stat_atlas.findRegion("magicAttackIcon"));
Image magicDefenseIcon = new Image(stat_atlas.findRegion("magicDefenseIcon"));
table.setDebug(true);
table.row();
table.add(healthIcon).height(60f).width(60f);
table.add(labels.get(0));
table.row();
table.add(attackIcon).height(60f).width(60f).right();
table.add(labels.get(1));
table.row();
table.add(defenseIcon).height(60f).width(60f).right();
table.add(labels.get(2));
table.row();
table.add(magicAttackIcon).height(60f).width(60f).right();
table.add(labels.get(3));
table.row();
table.add(magicDefenseIcon).height(60f).width(60f).right();
table.add(labels.get(4));
table.row();
What I would like is to find a way for the images not to span such a wide area (the red line should just encapsulate the image only and not go beyond it)
Thank you so much!
What happened is your back button only takes up one column, so all the labels in the second column have to appear to the right of it. When you add the back button, call colSpan(2) on the returned Cell. Also, when you add the labels, you may need to call left() on their returned Cells so they push against the images.
This will not necessarily center everything, because of the way Table distributes the extra space of the columns. If you need it all centered, you will actually need an inner table for everything besides your Back button.

Setting margin AND background color in a TableRow

I have a strange issue when setting programmatically both margin and background color on a TableRow.
I already read this thread about margin, and this one about background color, but apparently, I do things correctly. The problem seems to be somewhere else.
I create dynamically TableRows, which odds must be a specific color (to improve readability). I simply wrote this :
if(myCursor != null && myCursor.moveToFirst()){
do{
TableRow tableRow = new TableRow(getActivity());
TableLayout.LayoutParams tlp = new TableLayout.LayoutParams(TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT);
tlp.setMargins(0, 10, 0, 10);
tableRow.setLayoutParams(tlp);
for(int j=0 ; j < TopTagsDetailsCursor.getColumnCount();j++){
TextView tv = new TextView(getActivity());
tv.setText(TopTagsDetailsCursor.getString(j));
if (j>0) tv.setGravity(Gravity.CENTER);
tableRow.addView(tv);
}
if ((i % 2) != 0){
tableRow.setBackgroundColor(getResources().getColor(R.color.table_row));
}
dataTable.addView(tableRow);
i++;
});
}while(myCursor.moveToNext());
What I don't understand, is that on each odd row, with my custom background color, my custom margins (10 for top and bottom) aren't "applied" to the row, but they do are on even row.
Still stranger: if I remove the part of the code about custom background color, margins are OK everywhere !!
So, why my custom margins aren't ok when I put custom background color ??
PS: I even tried to move some lines of code (especially the addView(tableRow) and those about the color), but no effect.
Thanks in advance ! :)
It doesn't explain why it didn't work before, but at least I finally found a "fix".
I remove these lines :
TableLayout.LayoutParams tlp = new TableLayout.LayoutParams(TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT);
tlp.setMargins(0, 10, 0, 10);
tableRow.setLayoutParams(tlp);
And I replaced :
tableRow.addView(tv);
by :
tableRow.addView(tv, new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 80)); //or any other value
and it works fine finally... even if I don't understand why my first solution didn't work :) (feel free to explain me why !)

How to change the color of the background in libgdx labels?

I can change the color of the font like this
LabelStyle style1 = new LabelStyle(..some font...,
Color.valueOf("FF4500")
);
label.setStyle(style1);
but how do I change the background?
right now the background is the same as the background of whole screen which is set in
render method lke this
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
Gdx.gl.glClearColor(
1.000f, 0.980f, 0.941f
,1);
Label label = new Label(labelText, skin);
Pixmap labelColor = new Pixmap(labelWidth, labelHeight, Pixmap.Format.RGB888);
labelColor.setColor(<your-color-goes-here>);
labelColor.fill();
label.getStyle().background = new Image(new Texture(labelColor)).getDrawable();
Basically, use the getDrawable() function of the Image class to assign the color of your Label's LabelStyles' background Drawable.
This is the simplest workaround I've been able to come up with and, frankly, it's just silly that there is no setBackground() in the Label class.
Actually, maybe the easiest fix is to hack the Label class and add a setBackground() method to it.
[Edit] Be sure to dispose of Pixmaps when you are done with them; i.e. labelColor.dispose();
[Update] #Mitrakov Artem made a good point: The above solution will affect all instances of this LabelStyle. If that's not what you want you can create a new LabelStyle, use the above method on it, then save it to the Label. Quoting Artem: "So I would recommend to create a new style (LabelStyle style = new LabelStyle(label.getStyle());), change its background and then apply it to the label (label.setStyle(style);)"
Actually you do not change the background of the Lable like that. You did just change the clearcolour. Guess you know that.
To change the background you need to change the background at the style of the label. To do so i'd recommend to use a simple NinePatch as background, (can be a square! if its white you can change the colour of the ninepatch and the background colour changes!)
NinePatch temp = new NinePatch(new Texture(....), 10, 10, 10, 10); //edges
For more information about ninepatch take a look here libgdx wiki ninepatch
You need to add that ninepatch to an Skin objekt. For example like this
Skin skin = new Skin();
skin.add("background",temp)
After that you can get a drawable from the skin that you can set as background of the LabelStyle.
style1.background = skin.getDrawable("background");
see libgdx API LabelStyle
You can also use a simple bitmap but that does get scaled to the label size which causes in most of the cases deformation. A Ninepatch can be scaled without having deformation.
If you need a quick and easy solution, you can use the snippet below. It doesn't work well with multiline text because it doesn't take the text width per line into account.
Anyway, the background is automatically adjusted to the width and height of the label widget (i.e. if your text changes).
private Label label = new Label("text", createLabelStyleWithBackground());
private LabelStyle createLabelStyleWithBackground() {
LabelStyle labelStyle = new LabelStyle();
labelStyle.font = new BitmapFont();
labelStyle.fontColor = Color.WHITE;
labelStyle.background = createBackground();
return labelStyle;
}
private Drawable createBackground() {
Pixmap labelColor = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
Color color = new Color(Color.GRAY);
color.a = 0.75f;
labelColor.setColor(color);
labelColor.fill();
Texture texture = new Texture(labelColor);
return new BaseDrawable() {
#Override
public void draw(Batch batch, float x, float y, float width, float height) {
GlyphLayout layout = label.getGlyphLayout();
x = label.getX();
y = label.getY() - (layout.height + 15) / 2; // +15 is some space
batch.draw(texture, x, y, layout.width, layout.height + 15);
}
};
}
here is an example with a multiline label

How to set a background color of a Table Cell using iText?

While it is of course possible to use BaseColor, by default, it offers very limited choices.
I wonder how can i add my own custom color to the document?
...
PdfPTable table = new PdfPTable(3);
PdfPCell cell = new PdfPCell(new Phrase("some clever text"));
cell.setBackgroundColor(BaseColor.GREEN);
table.addCell(cell);
...
Posting, in hopes someone else will find this response useful.
It seems one can create a new BaseColor from WebColor as:
BaseColor myColor = WebColors.GetRGBColor("#A00000");
Which then can be added as a background as:
cell.setBackgroundColor(myColor);
Lots of options.
BaseColor color = new BaseColor(red, green, blue); // or red, green, blue, alpha
CYMKColor cmyk = new CMYKColor(cyan, yellow, magenta, black); // no alpha
GrayColor gray = new GrayColor(someFloatBetweenZeroAndOneInclusive); // no alpha
There's also pattern colors and shading colors, but those are Much Less Simple.
Try this:
cell.setBackgroundColor(new BaseColor(226, 226, 226));
or:
cell.setBackgroundColor(WebColors.getRGBColor("#E2E2E2")); deprecated
One more solution is:
public static String mColor = "#aa8cc5";
int aa = Integer.parseInt(mColor,16); // base 16
int colorArr = Color.rgb(Color.red(aa),Color.green(aa),Color.blue(aa));
cell1.setBackgroundColor(new BaseColor(colorArr));

Categories