I have the following class which adds an image to a button and then adds the button to a panel
private PushButton button;
private AbsolutePanel panel = new AbsolutePanel();
private Image image = new Image("images/rectangle_blue.png");
public ExpandingRectangularButton(String text)
{
String width = "120px";
String height = "160px";
image.setWidth(width);
image.setHeight(height);
button = new PushButton(image);
panel.add(button, 0, 0);
panel.setWidth(width);
panel.setHeight(height);
initWidget( panel );
}
When I display an instance of ExpandingRectangularButton the button is truncated on the bottom. However if I take the panel out of the equation as follows
private PushButton button;
private Image image = new Image("images/rectangle_blue.png");
public ExpandingRectangularButton(String text)
{
String width = "120px";
String height = "160px";
image.setWidth(width);
image.setHeight(height);
button = new PushButton(image);
initWidget( button );
}
and just use the image and the button ( ie I call init() on the button ) then the image will display with no truncation. As I don't set the height of the button I assume it grows dynamically to accomodate it's child widget. Why does this not happen when I put the button onto the panel?
Quoting the Javadoc:
An absolute panel positions all of its children absolutely, allowing them to overlap.
Note that this panel will not automatically resize itself to allow enough room for its absolutely-positioned children. It must be explicitly sized in order to make room for them.
You can:
explicitly set the AbsolutePanel size;
remove the overflow: hidden property from it (workaround);
use panel.add(button, -1, -1) to position the button statically;
change the AbsolutePanel with one that naturally adapt its size (like almost any other Panel).
I'd prefer the last, but your use case is not clear.
Related
I'm doing a piano application thought to be played on mobile devices (Android). All the piano keys are UI buttons that have the "property" pressed color to a grey one in order to properly indicate when a piano key is emiting sound.
My current problem is that when I first click on a key and after that I drag the mouse over the following keys, only the first one that I clicked is getting the change of color (the idea is that the change of color duration finishes when other key starts sound and then the new key where I pass the mouse-finger gets the grey color).
I also tryied setting the higlighted color property to the same color as the pressed color with the Navigation parameter to none (if it's set to automatic it happens some kind of bug that the color is getting "stuck" until I make sound another key), but the result it's still the same.
EDIT:
I update the issue with some progress thath I made:
I'm trying to change the pressed color with a script thanks to the events Pointer enter and exit (both events are placed on a Event trigger in every button).
Code:
public class ChangeKeyColor : MonoBehaviour{
public Button button;
void Start()
{
}
void Update()
{
}
public void EnterKey () {
Debug.Log("Enter the key");
ColorBlock colors = button.colors;
colors.normalColor = new Color(179, 179, 179, 255);
//colors.highlightedColor = new Color32(179, 179, 179, 255);
button.colors = colors;
}
public void ExitKey()
{
Debug.Log("Exits the key");
ColorBlock colors = button.colors;
colors.normalColor = Color.white;
//colors.highlightedColor = new Color32(255, 255, 255, 255);
//colors.pressedColor = Color.white;
button.colors = colors;
}
}
The only improvement that I obtained is that now when I'm dragging the mouse (maintaning it) the first button returns to white color, but I think that this is happening because now I only setted to gray color the pressed color option...
Does anyone know why the pressed color change that I'm making in the script isn't happening? When I drag the mouse to another key isn't considered as a pressed button?
Regards!
I'm not sure if you are still looking for the answer, but I finally had some time to try it myself.
What I did is changing color and debug-logging transform's name instead of playing sound.
My code for Images/Buttons (attached to each Image, I didn't use Button components):
using UnityEngine;
using UnityEngine.UI;
public class ChangeColor : MonoBehaviour {
public Color activeColor, notActiveColor;
private Image thisImage;
void Awake () {
thisImage = GetComponent<Image>();
}
public void OnPointerClick()
{
Activate();
}
public void OnPointerEnterAndDown()
{
if (Input.GetKey(KeyCode.Mouse0))
{
Activate();
}
}
public void OnPointerExit()
{
thisImage.color = notActiveColor;
}
private void Activate()
{
Debug.Log(transform.name);
thisImage.color = activeColor;
}
}
EventTrigger settings:
And this is what it looks like in the end:
(This should be a comment, but it's a little long, so reply me and I'll update the answer)
I don't know why are you having this problem, I do the simple test creating 2 UI Buttons and setting the highlighted color to red, and the pressed to blue.
By default (there's no script attached to anything) the behaviour is the follow:
1.If I press (and mantain) the click on a button, that button is blue, when I release the "pression", the button keeps red.
2.While this first button is red, if I drag the mouse over the second button, this will be also red.
3.If now I press on the second button, the first behaviour applies to the second button, and the first one will be white again.
This is the following behaviour that you want, according to what I understood.
So, if this is not the desired behaviour, tell us more about what you want.
I'm trying to design a UI in FXML and by partly using Scene Builder. I use an Anchorpane to place all the content in the scene. However, when I resize the window to a greater size, the buttons move from the center to the left. I want to make sure they stay in the center of the page. How to do this?
Thanks.
The easy way is to make use of StackPane or BorderPane. In case of BorderPane, you can keep the button or container containing the button at center position using Pos.CENTER.
If AnchorPane is really needed, you can make use of width and height property change listeners to adjust button position during resizing.
private AnchorPane anchorPane;
private Button button;
anchorPane.widthProperty().addListener((ObservableValue<? extends Number> observable, Number oldValue, Number newValue) -> {
button.setLayoutX(newValue.doubleValue()/2 - (button.widthProperty().getValue() / 2));
});
anchorPane.heightProperty().addListener((ObservableValue<? extends Number> observable, Number oldValue, Number newValue) -> {
button.setLayoutY(newValue.doubleValue()/2 - (button.heightProperty().getValue() / 2));
});
I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.
I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!
I want to make a drop down menu with images. This means:
ImageListName
image.png
image1.png
......
imageN.png
There should be only images no text and I want to select on image like when you can choose an avatar.
I'm not sure which approach is the best.
MenuBar HomeMenu = new MenuBar();
final String image = "<img src='"+GWT.getModuleBaseURL() + "/images/down-arrow.png' height='25px' width='25px'/>";
SafeHtml addActivityImagePath = new SafeHtml() {
#Override
public String asString() {
return image;
}
};
HomeMenu.addItem(new MenuItem(addActivityImagePath,mainMenu));
Take a look at the Combobox or Suggestion box in Advanced GWT Components.
You won't be able to do this with a ListBox, because it just creates an HTML < select> element. You can use a MenuBar that has one menu with MenuItems in it to simulate a dropdown with complex widgets inside it. You will also be able to style the dropdown rather than rely on browser-styled form elements.use MenuBar instead of ListBox and place any widget you want inside the MenuItem to simulate a ListBox. Regular ListBoxes will only allow you to specify plain text.
I have a TabFolder which was resized initially. Under the TabFolder is a TabItem and under that TabItem is a Button. The Button inherited the size of the TabFolder so it's huge. What's the best way to resize the Button? Using button.setBounds(...) doesn't work.
Here is the code snippet:
public void createPartControl(Composite parent) {
Composite container = new Composite(parent, SWT.NONE);
TabFolder tabFolder = new TabFolder(container, SWT.NONE);
Dimension dim = java.awt.Toolkit.getDefaultToolkit().getScreenSize();
TabItem tbtmNewItem = new TabItem(tabFolder, SWT.NONE);
tbtmNewItem.setText("1");
TabItem tbtmBrowse = new TabItem(tabFolder, SWT.NONE);
tbtmBrowse.setText("3");
Button btnNewButton = new Button(tabFolder, SWT.BORDER | SWT.CENTER);
btnNewButton.setAlignment(SWT.CENTER);
tbtmBrowse.setControl(btnNewButton);
btnNewButton.setText("Push");
tabFolder.setBounds(0, 0,dim.width-10,dim.height-10);
createActions();
initializeToolBar();
initializeMenu();
this.setPartName("Home");
}
I found a solution. I just removed the button from the control of the tab.
Removed:
tbtmBrowse.setControl(btnNewButton);
The button can now be resized independently or using setBounds when using a null layout.
So the Control you set on TabItem was a Composite? Or a Button?
The was to control the size of the button is to create a Composite and set that on the TabItem. Then you can add your button(s) to the Composite. You then set a layout on the composite to control how your button(s) are laid out. See http://www.eclipse.org/articles/article.php?file=Article-Understanding-Layouts/index.html for more details on layouts.
EDIT:
To use it, you insert a composite between the tab folder and the button:
Composite page = new Composite(tabFolder, SWT.NONE);
page.setLayout(new GridLayout(1, false));
Button btnNewButton = new Button(page, SWT.BORDER | SWT.CENTER);
btnNewButton.setAlignment(SWT.CENTER);
btnNewButton.setText("Push");
tbtmBrowse.setControl(page);
You use layouts to control the sizes of child controls ... in this case, your button. See the Understanding Layouts article.