CODEWITHSUNDEEP
javajavafxalignmentvboxhbox
Josemafuen
Josemafuen

Reputation: 642

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.

Upvotes: 27

Views: 64645

Answers (2)

kcpr
kcpr

Reputation: 1105

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.

Upvotes: 10

ItachiUchiha
ItachiUchiha

Reputation: 36722

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

Upvotes: 60

Related Questions