I've been working on a software using JavaFX and I have a stupid but worrying problem.
In certain part of the code I have a HBox
, and, inside of it three items: an image
, a label
and a VBox
.
The issue is that I would like to have the image
aligned to the left, that is, next to the left margin of the window
, and the VBox
aligned to the right, that is, next to the right border of the window
and I don't know how to do it.
I've tried to use VBox.setAlignment(Pos.RIGHT_CENTER)
, but it didn't work.
The JavaFX HBox component is a layout component which positions all its child nodes (components) in a horizontal row. The Java HBox component is represented by the class javafx. scene.
HBox. The HBox layout arranges all the nodes in our application in a single horizontal row. The class named HBox of the package javafx. scene. layout represents the text horizontal box layout.
The HBox layout pane provides an easy way for arranging a series of nodes in a single row.
You can set the margin for child nodes of a JavaFX VBox using the static setMargin() method. Here is an example of setting the margin around a JavaFX Button using the setMargin() method: Button button = new Button("Button 1"); VBox vbox = new VBox(button); VBox. setMargin(button, new Insets(10, 10, 10, 10));
This is a most common alignment issue when you want to place an item towards the two corners of the Layout.
Let us say you want to have :
HBox
|
ImageView (Left)
Label (Center)
VBox (Right)
I very simple solution is to use two extra Regions
. One in between ImageView & Label. The other in between Label and VBox.
HBox
|
ImageView (Left)
Region
Label (Center)
Region
VBox (Right)
These Regions must have HGrow
set as Priority.Always
, so that if you resize the HBox, these two will grow, keeping the other elements intact in their location.
FXML example :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="94.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ImageView fitHeight="150.0" fitWidth="140.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="http://www.imaginaformacion.com/wp-content/uploads/2010/06/JavaFx.png" />
</image>
</ImageView>
<Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
<Label prefHeight="17.0" prefWidth="205.0" text="Label On the Center" />
<Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
<VBox alignment="CENTER_RIGHT" prefHeight="94.0" prefWidth="200.0">
<children>
<Label prefHeight="17.0" prefWidth="200.0" text="Label Inside the VBox" />
</children>
</VBox>
</children>
</HBox>
Please note the HBox.hgrow="ALWAYS"
in both the Regions.
Output
I think that the best option could be switching from HBox
to BorderPane
. It let You make items sticked to any edge of Your window.
Another option is GridPane
. You can select column and change its 'Halignment' property to 'RIGHT'.
And, by the way, I recommend using JavaFX Scene Builder while having fun with JavaFX.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With