I have a HorizontalGroup in which I have two TextButtons. Now I want to scale these buttons to half their size, because their too big, but I haven't found a good way to do that, I have tried something but its not what I want.
Heres the code for setting it up
weaponsButton = new TextButton("Weapons", buttonStyle);
weaponsButton.getLabel().setColor(Color.BLACK);
weaponsButton.pad(10f);
statsButton = new TextButton("Stats", buttonStyle);
statsButton.getLabel().setColor(Color.BLACK);
statsButton.pad(10f);
hGroup = new HorizontalGroup();
hGroup.addActor(weaponsButton);
hGroup.addActor(statsButton);
table = new Table();
table.add(hGroup);
table.setFillParent(true);
table.debug();
stage = new Stage();
stage.addActor(table);
buttonStyle is simply a TextButtonStyle with a NinePatchDrawable and a BitmapFont. When you draw the table it looks like this:
adding hGroup.setScale(0.5f); it looks like this:
Now hGroup is not aligned in the center and .aling(Align.center) doesn't do anything when adding the hGroup.
Calling .width(float) after adding hGroup to shrink the cell doesn't seem useful either, as I dont know the exact width of the scaled hGroup, it only gives the unscaled width and I find it kind of clunky to get the width and then multiply it with the scaling factor.
Even when I do that it doesn't look like I wanted it to.
table.add(hGroup).width(hGroup.getPrefWidth()*0.5f).height(hGroup.getPrefHeight()*0.5f);
looks like this:
Any advice is appreciated
According to the documentation, the width of the HorizontalGroup is the sum of the preferred width of all its children (your buttons). Given that, you have a few options:
Call setWidth on your button actors and give them a width.
Skip the HorizontalGroup and just add your buttons directly to a table uniformly:
Table table = new Table();
table.defaults().uniformX();
table.add(weaponsButton);
table.add(statsButton);
Related
I want to create buttons in the corners of the screen for the controls of my game.
It used to work with just creating a skin, adding that skin to a new ImageButton(skin) and setting the size and position of that button to what is desired. I now use box2d and if i now set the size of the button to (1, 1) the height is correct but the width is always about 2/3 of the screen, no matter what i change it to.
I tried using a table and doing this:
table = new Table();
table.setFillParent(true);
stage.addActor(table);
table.setDebug(true);
table.add(boostButtonn).width(1).height(1).bottom().right();
But I have no clue how to draw it in the corner of the screen, also the button is drawn in the middle of the screen with the correct size using this table, but the skin is stretched out of the button. Viewport width and height are 40,24 respectively
My skin and button code:
Skin skin = new Skin(Gdx.files.internal("skin/flath-earth-ui.json"));
Button bootsButton = new ImageButton(skin);
And then i add it to the table
Problem is not in how you align or arrange your widget. Problem is why button/widget or even text is stretched and looks blurry.
Why stretched ?
Problem is in your resources. Your resources should be compatible with your viewport. If you're using small viewport then we need your resources(images and fonts) in small size.
You're using skin, that used to create Widget.
Skin depends on .json file that contains information about your Widget object and .atlas files having information of your image file.
You're using 40 as width of viewport then button image that used as drawable should be in range of approx. 10.
So what is solution now :
If you already have all resources ready then use some higher viewport dimension according to your resources else create create resources according to viewport.
I have an explorer in my RCP application to which I added an inner composite with a RowLayout to show various category items. When the width of the explorer is resized I want the category items to wrap to new rows and expand the size of their parent composite.
If I initialize my inner composite with defaults, nothing happens, not even wrapping. If I set it to grab vertical space, it takes half the space, leaving the other half for the tree, which is ugly and not what is wanted. If I set hints, I does wrap but the size of its composite never changes, thus hiding the next rows. I tried adding a resize event listener and resizing my inner composite. That allows me to resize it and show all the rows, but it then covers up and hide part of the tree. I tried to do a setLocation and setSize for the tree itself to move/resize it accordingly but to no avail, it doesn't change.
How can this be made to work. What am I missing. Isn't there a simple way to ask for a layout that will use the minimum required height and no more but adjust if needed?
Thanks for your help.
Here the code:
innerComposite = new Composite(parent, SWT.NONE);
innerComposite.addListener(SWT.Resize, listenerComp);
GridDataFactory.fillDefaults().hint(10, 30).applyTo(innerComposite);
GridLayoutFactory.fillDefaults().applyTo(innerComposite);
Listener listenerComp = new Listener() {
public void handleEvent(Event event) {
Widget widget = event.widget;
Composite comp = (Composite)widget;
Composite parent = comp.getParent();
Point parentSize = parent.getSize();
Point size = comp.computeSize(parentSize.x, SWT.DEFAULT);
comp.setSize(size);
}
}
And here's an image:
And after resize (noticing that the 1st row of the tree is covered up):
When you are using Layouts calling setSize (or setBounds) will mess up the layout that has been setup.
Instead you should call layout(true) (or even layout(true, true) on the Composite which owns both the Tree and your innerComposite.
I'm really new to this. I'm still trying different examples.
Please correct me if I'm wrong. If I have the image below.
with
Button 1:
gridx = 0; grid y = 0;
Button 2:
gridx = 1; grid y = 0;
Button 3:
gridx = 2; gridy = 1;
and I want to hava a blank area or cell between button2 and button3. I thought maybe I do it with insets or is there any correct way of doing this?
I'm still learning so I'm following this guide. http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html
I see components as objects in cells, how about the blank cells, what are they in gridbag layout perspective? how do I tell java that this is a blank cell? Should I always use the fill = GridbagConstraint.HOR.. ? I understand that widths are like spans or merged cells.
I hope you can better explain this. The things I haven't understood fully yet are weights and when I can extend a component further using gridx and gridy. Though I understand weights as spaces. I'm just looking for a practical explanation or comparison to html / excel
My questions are:
If i have 3 components on x's 0,1,2 will it not allow me to put the third component on like say, gridx=3 or gridx=5?
Given the 2 subpanels in the screenshot I included, how do i position the left panel to the upper left corner of top panel enclosing the 2 subpanels? Do i have to go straight to anchors??
Does the weighty always push other components up and weightx push left?
What is the most effective way of using fill()?
In the level selection screen I'm currently working on I can't seem to make the Scene2D UI table fill the whole screen.
I've omitted a few bits from the code to reduce the length, but here is the relevant code:
Stage stage = new Stage(new ScreenViewport());
table = new Table();
table.setFillParent(true);
innerTable = new Table();
//Omitted: Add a button to innerTable for each level
ScrollPaneStyle scrollPanelStyle = new ScrollPaneStyle();
scrollPanelStyle.vScrollKnob = new BaseDrawable();
scrollPane = new ScrollPane(innerTable);
scrollPane.setScrollingDisabled(true, false);
scrollPane.setupOverscroll(30f, 30f, 150f);
//Temporarily a restart icon
Image backButton = new Image(backButtonTexture);
backButton.setScaling(Scaling.fit);
table.add(backButton).height(75f).width(75f).pad(20, 0, 20, 0).left();
table.row();
table.add(scrollPane);
It currently looks like this. The icon isn't as far to the left as I would think it would be with the current code. As far as I'm concerned it should be at 0 on the X axis.
The same thing is true for the innerTable with the ScrollPane containing all the levels, it doesn't fill the entire screen on the X axis, but it looks like I want it, so it's not really a problem there.
Answer:
Adding expandX() to my ScrollPane ended up doing the trick, resulting in this line: table.add(scrollPane).expandX();. A big thanks to flogy.
I guess the table is stretched properly to your viewport but there is some other misconfiguration. I recommend using the debug mode to get more details (see https://github.com/libgdx/libgdx/wiki/Table#debugging - also use on the back button etc). If you can't find a solution using this method by yourself, please update the screenshot, so we can investigate further. Thanks.
Final solution (see comments):
table.add(scrollPane).expandX();
The table was already filling the whole screen but the contained scroll panel was not. The table cells adapt to their content by default. By using expandX, we could finally expand the width of the cell that contains the scroll panel to the full table width.
This piece of code that I wrote creates 2 panels. The aim is to have one of them directly on top of the other with no space in between, but the problem is that there is a huge gap between them.
Cann anyone help me out with this?
Code:
Panel panel = new Panel();
Panel Logo = new Panel();
VerticalLayout layout1 = new VerticalLayout();
VerticalLayout layout2 = new VerticalLayout();
panel.setWidth("500px");
panel.setHeight("300px");
Logo.setWidth("500px");
Logo.setHeight("100px");
Logo.addStyleName(Runo.PANEL_LIGHT);
Label label = new Label("test");
label.setWidth(null);
Button test = new Button("test");
first.setStyleName("test");;
first.setClickShortcut(KeyCode.ENTER, null);
layout1.addComponent(test);
layout2.addComponent(label);
layout.addComponent(Logo);
layout.addComponent(panel);
layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
layout1.setComponentAlignment(test, Alignment.MIDDLE_CENTER);
layout2.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
layout.setSizeFull();
layout1.setSizeFull();
layout2.setSizeFull();
setContent(layout);
panel.setContent(layout1);
Logo.setContent(layout2);
It depends on the type of layout, which you have set to full size. Your layout will expand as much as the browser itself. What happens is that if your layout is a VerticalLayout, its height is 100% but it only has two panels with heights of 300 and 100, respectively. Since you did not specify any expand ratio, Vaadin assigns 50% of the screen to the panel and the other 50% to the Logo, hence you get a big gap in between.
To fix it, you can do two things:
Don't use layout.setSizeFull(); Instead, use layout.setSizeUndefined();
Play with expand ratio, so that the top panel gets less space and Logo gets more space: layout.setExpandRatio(panel, 0.2f); and layout.setExpandRatio(Logo, 0.8f);. The problem with this approach is that in case your browser height is less than 400 pixels, your layout will be cut off.
It took me a while and many trial/errors to learn this concept. Make sure you carefully read this page before going forward.
There are two ways to do this :
as #Abbas said use
layout.setExpandRatio(panel, float);
or you can add a property in the css file:
layout.setStyleName("my-layout");
in css you add :
.v-verticallayout-my-layout .v-slot{
height: auto !important;
}
This will do the job. I've tried both methods and they worked.