Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX HBox Alignment

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.

like image 987
JOSEMAFUEN Avatar asked Apr 17 '15 19:04

JOSEMAFUEN


People also ask

What is HBox in JavaFX?

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.

What is HBox layout pane?

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.

Is HBox a pane?

The HBox layout pane provides an easy way for arranging a series of nodes in a single row.

How do you set margins in JavaFX?

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));


2 Answers

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

enter image description here

like image 52
ItachiUchiha Avatar answered Oct 26 '22 20:10

ItachiUchiha


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.

like image 44
kcpr Avatar answered Oct 26 '22 18:10

kcpr