I added a progress bar to my stage, and it gets a default width as expected. However, I do want to change the width a bit, but for some reason LibGDX don't. I've tried setSize, setWidth, setMinWidth at the background of the progress bar and changing the texture. Nothing works. The only thing I can get to change size of, is the knob.
Here's the code:
background = new Texture("progress_bar_texture");
knob = new Texture("knob_texture");
ProgressBar.ProgressBarStyle pbs = new ProgressBar.ProgressBarStyle();
pbs.background = new TextureRegionDrawable(new TextureRegion(background));
pbs.knob = new TextureRegionDrawable(new TextureRegion(knob));
pbs.knobAfter = pbs.knob;
progressBar = new ProgressBar(0f, 80f, 1f, false, pbs);
progressBar.setWidth(400); // This doesn't change anything at all...
table.add(progressBar).right().colspan(1).expandX().padRight(40);
Anton, you can increase the width of the ProgressBar within the table using 1. .colspan(2) or 2.Table.setWidth(). If you want precise (pixel-perfect) control of the position and size of the ProgressBar, add it to a Group instead of Table - then the things you tried ( setSize, setWidth, setMinWidth at the background of the progress bar) will work.
Related
i want to make my JCheckboxes in a JTable bigger (for Touchscreen), but it doesn't change the size.
I tried it with
setPrefferedSize
setSize
What should I do?..
I assume you mean you want a bigger check box. If so then you need to create images to represent the unselected and selected icons of the check box. Then you can create a renderer and editor using these icons. Finally you would need to increase the height of each row in the table. The code might look something like:
Icon normal = new ImageIcon(...);
Icon selected = new ImageIcon(...);
JTable table = new JTable(...);
table.setRowHeight(...);
TableCellRenderer renderer = table.getDefaultRenderer(Boolean.class);
JCheckBox checkBoxRenderer = (JCheckBox)renderer;
checkBoxRenderer.setIcon( normal );
checkBoxRenderer.setSelectedIcon( selected );
DefaultCellEditor editor = (DefaultCellEditor)table.getDefaultEditor(Boolean.class);
JCheckBox checkBoxEditor = (JCheckBox)editor.getComponent();
checkBoxEditor.setIcon( normal );
checkBoxEditor.setSelectedIcon( selected );
IMPORTANT NOTE: This was only tested with the default 'Metal' look and feel. I do not guarantee that this will work for any other look and feel. Also I am not entirely sure how it works because it is admittedly a bit of a hack.
I was able to solve this in a slightly different way.
I wanted to use the existing images and just apply a scale to it. I am already scaling the font of my application using the UI defaults and so I have a rather large font. I wondered if I could leverage that and scale the check boxes accordingly.
After scouring the internet and trying a bunch of things I came up with this method:
public static void scaleCheckBoxIcon(JCheckBox checkbox){
boolean previousState = checkbox.isSelected();
checkbox.setSelected(false);
FontMetrics boxFontMetrics = checkbox.getFontMetrics(checkbox.getFont());
Icon boxIcon = UIManager.getIcon("CheckBox.icon");
BufferedImage boxImage = new BufferedImage(
boxIcon.getIconWidth(), boxIcon.getIconHeight(), BufferedImage.TYPE_INT_ARGB
);
Graphics graphics = boxImage.createGraphics();
try{
boxIcon.paintIcon(checkbox, graphics, 0, 0);
}finally{
graphics.dispose();
}
ImageIcon newBoxImage = new ImageIcon(boxImage);
Image finalBoxImage = newBoxImage.getImage().getScaledInstance(
boxFontMetrics.getHeight(), boxFontMetrics.getHeight(), Image.SCALE_SMOOTH
);
checkbox.setIcon(new ImageIcon(finalBoxImage));
checkbox.setSelected(true);
Icon checkedBoxIcon = UIManager.getIcon("CheckBox.icon");
BufferedImage checkedBoxImage = new BufferedImage(
checkedBoxIcon.getIconWidth(), checkedBoxIcon.getIconHeight(), BufferedImage.TYPE_INT_ARGB
);
Graphics checkedGraphics = checkedBoxImage.createGraphics();
try{
checkedBoxIcon.paintIcon(checkbox, checkedGraphics, 0, 0);
}finally{
checkedGraphics.dispose();
}
ImageIcon newCheckedBoxImage = new ImageIcon(checkedBoxImage);
Image finalCheckedBoxImage = newCheckedBoxImage.getImage().getScaledInstance(
boxFontMetrics.getHeight(), boxFontMetrics.getHeight(), Image.SCALE_SMOOTH
);
checkbox.setSelectedIcon(new ImageIcon(finalCheckedBoxImage));
checkbox.setSelected(false);
checkbox.setSelected(previousState);
}
What it does is get the size of the font from the checkbox's font metrics. Then using that it derives a new icon based on the icon found in the 'Look and Feel'.
One odd thing that I am not able to explain is how the icon for the checkbox in its 'un-selected' or default state, changes to the 'selected' icon, when I am accessing the same property to get each one.
I start by saving the state of the control so I can restore it at the end. This is done because in order for the icons to be set properly, the state needs to be unchecked when you first request the icon from the UIManager and then it will need to be checked when you request the icon the second time to get the 'selected' icon.
I am not entirely sure how the UIManager works or why the checkbox icon changes when we call the same property just by setting the 'selected' value of a single checkbox, but that is what is required in order to get both the necessary icons.
If you did not want to base the size on the font you could easily just pass in the height and width as parameters and use them instead of the font's height when setting the buffered image size.
I might mention that this same methodology works with radiobuttons
What I'm trying to do is add a label to follow a slider knob and display the knob's value. I currently have a vertical slider and a label stacked inside a table cell. I'm able to position the label to where the knob is and update it's text correctly but am having a problem while moving the knob.
When I move the knob I can make the label follow it as long as I don't update the text. But if I update the text then the label re-centers itself in the cell till the knob has stopped moving at which point it places itself on the knob.
How do I make it so that the label doesn't reposition while it's updating text?
Here's some sample code of what I have going on:
public class OptionsWindow implements Screen {
private Stage stage;
private Table table;
private Slider slider;
private Label label;
private Skin textSkin = new Skin(Gdx.files.internal("skins/skin.json"),
new TextureAtlas(Gdx.files.internal("skins/text.pack")));
private Skin sliderSkin = new Skin(Gdx.files.internal("skins/skin.json"),
new TextureAtlas(Gdx.files.internal("skins/text.pack")));
private min = 1, max = 2;
#Override
public void show() {
stage = new Stage();
table = new Table();
slider = new Slider(min, max, 0.001f, true, sliderSkin);
label = new Label(""), textSkin);
table.stack(label, slider).height(1000);
table.setFillParent(true);
stage.addActor(table);
Gdx.input.setInputProcessor(stage);
}
#Override
public void render() {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
label.setY(slider.getValue() - min);
label.setText(slider.getValue());
stage.act();
stage.draw();
}
}
I've done a lot of searching for an answer to this question but have yielded no results. I have also tried placing the label in a container and moving the container while changing the label text, but the same result happens. I'm sure somebody had done this before. It seems like something people would want. Please, any help is welcome.
Never done it before, I always show the amount in a label next to or above the slider to give feedback. But the result you are after gives a nice touch. Did you try adding a ChangeListener to your slider? Everytime the slider changes this would be called. So if you insert the new position and text in there it should be updating correctly.
//Slider has to be "final" for the listener.
final Slider slider = new Slider(0, 10, 1, true, skin);
slider.addListener(new ChangeListener() {
#Override
public void changed(ChangeEvent event, Actor actor) {
label.setY(slider.getValue() - min);
label.setText(slider.getValue());
}
});
This does not need to be in your render method. It's a listener so whenever something happens the listener listens for it will execute.
Ok, so I came up with a work around. It would seem that labels move back to their cell alignment position while updating text. to solve this I simply placed my label in a table with a row on either side like so:
Table subTable = new Table();
subTable.add().row();
subTable.add(label).row();
subTable.add();
Then in render I calculate new height values for the exterior cells and apply them:
float topH, botH;
// Calculate heights
topH = (1 - slider.getPercent()) * parentTable.getHeight();
botH = slider.getPercent() * parentTable.getHeight();
// Apply heights to exterior table cells
subTable.getCells().get(0).height(topH);
subTable.getCells().get(2).height(botH);
// Update label text
label.setText(slider.getValue());
This is just a simple form of what I have. You'll want to take into account the label height to get it to position correctly. Also if you want it to follow with the slider at the slider's set animateDuration, you'll want to use getVisualPercent() instead of getPercent(). However this causes issues when your finger flies out of the cell. For some reason the visual percent is linked to where the slider knob is when your finger leaves the cell, not where it ends up.
My work around for this was to just set the animateDuration to 0.0f and just use getPercent(). If I or someone comes up with a solution to the getVisualPercent() option, then that would be nice to have posted as well.
The red square is the button's boundary, while the image remains centered at 32x32px. I've tried using button.getImage() to set position and size to the button's values, but it doesn't seem to have any effect.
Just use a regular Button. It also contains a Drawable for its background, but that one is always stretched to fill the button. See the JavaDoc for ImageButton:
... If the image is the size of the button, a Button without any children can be used, where the Button.ButtonStyle.up, Button.ButtonStyle.down, and Button.ButtonStyle.checked nine patches define the image.
Note that these don't actually need to be nine patches; any Drawable will do.
Probably super late but have you tried:
yourButton.getImage().setFillParent(true);
Extending on the answer of #xitnesscomplex:
You can use yourButton.getImage().setFillParent(true); to set the size.
To set an offset is somewhat counter-intuitive
ImageButton.ImageButtonStyle style = new ImageButton.ImageButtonStyle();
style.imageUp = new TextureRegionDrawable(new Texture(Gdx.files.internal(btn.png")));
ImageButton yourButton = new ImageButton(style);
style.unpressedOffsetX = -new_brush.getWidth()/4.0f;
style.unpressedOffsetY = -new_brush.getHeight()/4.0f;
style.pressedOffsetX = -new_brush.getWidth()/4.0f;
style.pressedOffsetY = -new_brush.getHeight()/4.0f;
style.checkedOffsetX = -new_brush.getWidth()/4.0f;
style.checkedOffsetY = -new_brush.getHeight()/4.0f;
yourButton.getImage().setFillParent(true);
I just can't figure this, and I am pulling my hair out right now!!
I have a Stage with a Label added to it, I set everything up and the first time I call Stage.draw() everything works fine. However, as soon as I set the text of the Label nothing gets drawn. Funny thing is, when I don't change the text it draws perfectly as expected, but when I call label.setText("THE TEXT") it just doesn't draw.
I have stepped through my code and I have noted down the height, width, x and y values before and after setting text of the Label, and they are all the same (before and after).
Also, when I draw the Stage it's drawn above a Sprite, and positioning the Sprite is based on the Label's position.
The Sprite draws fine before I set text on the Label and after.
PS: I have also made sure that the Sprite is not drawn "over" the Label.
This is my setup:
I have a MainGame class that renders a Player class, when ever the back button is pressed the Sprite with the Stage gets drawn, or should get drawn.
spriteBatch.begin();
player.update(spriteBatch, delta);
spriteBatch.end();
// the pause menu is drawn with a separate sprite batch as it needs to be in middle relative to the screen and above everything else
if (player.isPaused()){
messageSpriteBatch.begin();
messageSprite.draw(messageSpriteBatch);
messageSpriteBatch.end();
messageStage.draw(); // the stage doesn't seem to be getting drawn
}
Player class - update method
if (!paused){
// removed for clarity
}else{
// on MainGame class we render a small box with one of the following messages
// READY
// PAUSE
// QUIT?
// GAME OVER
if (Gdx.input.justTouched()){
paused = false;
}
spriteBatch.setProjectionMatrix(camera.combined);
camera.update();
}
messageSpriteBatch = new SpriteBatch();
messageStage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
messageFont = new BitmapFont(Gdx.files.internal("fonts/fontfile.fnt"));
messageStyle = new LabelStyle();
messageStyle.font = messageFont;
messageLabel = new Label("READY", messageStyle);
This is how I initialise my Label, Sprite and Stage:
float fontScaleX = Gdx.graphics.getWidth()/SCALE_X_DIVIDER;
float fontScaleY = Gdx.graphics.getHeight()/SCALE_Y_DIVIDER;
messageLabel.setFontScale(fontScaleX*1.4f, fontScaleY*4.2f);
messageLabel.setPosition((messageStage.getWidth()/2)-((messageLabel.getWidth()/2)*messageLabel.getFontScaleX()), (messageStage.getHeight()/2)-((messageLabel.getHeight()/2)*messageLabel.getFontScaleY())+(player.getScoreboard().getSize().y/2));
messageStage.addActor(messageLabel);
messageStage.act();
messageTexture = new Texture(Gdx.files.internal("images/message_background.png"));
messageSprite = new Sprite(messageTexture);
messageSprite.setSize((messageLabel.getWidth()*messageLabel.getFontScaleX())*1.5f, (messageLabel.getHeight()*messageLabel.getFontScaleY())*3);
messageSprite.setPosition(messageLabel.getX()-(messageSprite.getWidth()/6), messageLabel.getY()-messageSprite.getHeight()/2);
Please help me, before I get bald xD
Well the width and height of the label is usually set once when creating the Label, matching the width and height of the initial text passed to the Constructor. You of course can make it bigger by setting the width and height later on. Then you could also use alignments by the way...
Are you using any special characters when changing the text, so the font has a problem with that?
Maybe posting some code could give more insights...
Haha, well, I found out what was up, it was my font file, you see when I was editing it, I used the text READY, so when I saved it, I didn't know that the text written is what is saved, so when I looked at the font.png file, I found that it only contained the letters ADERY.
Thanks for the help anyway =]
I created a slider inside of a table like shown in the following code example as I know that the minimum width of the background is used for the slider width:
public OptionScreen(MainClass game) {
super(game);
preference = new PreferencesHelper();
font = this.getDefaultFont(25);
this.table = new Table();
if (Config.DEBUG)
this.table.debug();
// add volumenlabel
LabelStyle style = new LabelStyle(font, Color.WHITE);
volumenLabel = new Label(Config.VOLUMEN_LABLE, style);
table.add(volumenLabel).colspan(2);
table.row();
// add slider
Skin skin = new Skin();
skin.add("sliderbackground",
this.game.manager.get("data/sliderbackground.png"));
skin.add("sliderknob", this.game.manager.get("data/sliderknob.png"));
SliderStyle sliderStyle = new SliderStyle();
sliderStyle.background = skin.getDrawable("sliderbackground");
sliderStyle.background.setMinWidth(600f);
sliderStyle.knob = skin.getDrawable("sliderknob");
volumenSlider = new Slider(0f, 1f, 0.1f, false, sliderStyle);
volumenSlider.setValue(preference.getVolumen()); // load current volumen
volumenSlider.addListener(new ChangeListener() {
#Override
public void changed(ChangeEvent event, Actor actor) {
volumeValue.setText(String.format("%.01f",
volumenSlider.getValue()));
// sett the preference
preference.setVolumen(volumenSlider.getValue());
}
});
// add volslider to stage
table.add(volumenSlider);
volumenLabel.invalidate();
// table
style = new LabelStyle(font, Color.WHITE);
// set current volumen
volumeValue = new Label(
String.format("%.01f", volumenSlider.getValue()), style);
volumenLabel.setAlignment(2);
table.add(volumeValue).width(50f);
table.row();
initBackButton();
// init table
table.setPosition(Config.VIRTUAL_VIEW_WIDTH / 2,
Config.VIRTUAL_VIEW_HEIGHT / 2 - Config.BLOCK_SIZE * 10);
// add a nice fadeIn to the whole table :)
table.setColor(0, 0, 0, 0f);
table.addAction(Actions.fadeIn(2f)); // alpha fade
table.addAction(Actions.moveTo(Config.VIRTUAL_VIEW_WIDTH / 2,
Config.VIRTUAL_VIEW_HEIGHT / 2, 2f)); // move to center of the
// screen
// add to stage
this.stage.addActor(table);
}
The slide is inside a table with no width set. I already took a look if the width is set and if the calculation for the prefWidth of the slider does uses the set 600f.
Math.max(style.knob == null ? 0 : style.knob.getMinWidth(), style.background.getMinWidth())
Is the calculation for the width of the slider inside the Sliderclass. If I calculate that and log it, it loggs the desired 600f.
Everything seems right to me but the slider is rendered way to small for the 600 I set.
The background and knobtextures are 24x24.
So I hope you guys can tell me what I am doing wrong.
The folution is, that it's inside an table so the width is defined by the table width attibut for the spec. col and row.
So the fix is pretty short:
table.add(volumenSlider).width(600).height(60);
And its 600width and 60 height.
The wiki got edited to be more clear about this:
UI widgets do not set their own size and position. Instead, the parent widget sets the size and position of each child. Widgets provide a minimum, preferred, and maximum size that the parent can use as hints. Some parent widgets, such as Table, can be given constraints on how to size and position the children. To give a widget a specific size in a layout, the widget's minimum, preferred, and maximum size are left alone and size constraints are set in the parent.
Layout at Wiki
speedSlider.getStyle().knob.setMinHeight(100)