javafx
Layouts

StackPane

StackPane legt seine StackPane in einem Stapel von vorne nach hinten ab.

Die z-Reihenfolge der getChildren wird durch die Reihenfolge der getChildren Liste definiert ( getChildren durch Aufruf von getChildren ): Das getChildren ist das unterste und letzte getChildren des Stapels.

Das Stack-Fenster versucht, die Größe jedes untergeordneten Objekts so zu ändern, dass es seinen eigenen Inhaltsbereich ausfüllt. Wenn die Größe eines Kindes nicht StackPane kann, um den Bereich der StackPane zu füllen (entweder weil die Größe nicht geändert wurde oder weil die maximale Größe nicht möglich war), wird es innerhalb des Bereichs mit der alignmentProperty Eigenschaft der Stackpane ausgerichtet Pos.CENTER.

Beispiel

// Create a StackPane
StackPane pane = new StackPane();

// Create three squares
Rectangle rectBottom = new Rectangle(250, 250);
rectBottom.setFill(Color.AQUA);
Rectangle rectMiddle = new Rectangle(200, 200);
rectMiddle.setFill(Color.CADETBLUE);
Rectangle rectUpper = new Rectangle(150, 150);
rectUpper.setFill(Color.CORAL);

// Place them on top of each other
pane.getChildren().addAll(rectBottom, rectMiddle, rectUpper);

HBox und VBox

Die Layouts von HBox und VBox sind sehr ähnlich, beide legen ihre Kinder in einer einzigen Zeile an.

Gemeinsamkeiten

Wenn für eine HBox oder eine VBox ein Rand und / oder ein VBox festgelegt ist, werden die Inhalte innerhalb dieser Insets angeordnet.

Sie legen jedes verwaltete Kind unabhängig vom sichtbaren Eigenschaftswert des Kindes fest. Nicht verwaltete Kinder werden ignoriert.

Die Ausrichtung des Inhalts wird durch die Ausrichtungseigenschaft gesteuert, die standardmäßig auf Pos.TOP_LEFT .

HBox

HBox legt ihre Kinder in einer einzigen horizontalen Reihe von links nach rechts an.

HBox die Größe der untergeordneten HBox (wenn HBox in der Größe verändert wird) auf die bevorzugte Breite s und verwendet die Eigenschaft fillHeight, um zu bestimmen, ob die Größe der Höhe geändert werden soll, um ihre eigene Höhe zu füllen oder ihre Höhe auf die bevorzugte Höhe zu setzen (Standardeinstellung für fillHeight auf true).

Erstellen einer HBox

// HBox example
HBox row = new HBox();
Label first = new Label("First");
Label second = new Label("Second");
row.getChildren().addAll(first, second);

VBox

VBox die VBox in einer einzigen vertikalen Spalte von oben nach unten an.

VBox die Größe von untergeordneten VBox (falls VBox in der Größe geändert werden kann) auf ihre bevorzugten Höhen und verwendet die Eigenschaft fillWidth, um zu bestimmen, ob die Breite geändert werden soll, um ihre eigene Breite auszufüllen, oder ob sie ihre bevorzugte Breite hat (fillWidth ist standardmäßig auf true gesetzt).

Erstellen einer VBox

// VBox example
VBox column = new VBox();
Label upper = new Label("Upper");
Label lower = new Label("Lower");
column.getChildren().addAll(upper, lower);

BorderPane

Das BorderPane ist in fünf verschiedene Bereiche unterteilt.

Die Randbereiche ( Top , Right , Bottom , Left ) haben eine bevorzugte Größe basierend auf ihrem Inhalt. Standardmäßig nehmen sie nur das, was sie benötigen, während der Center Bereich den verbleibenden Speicherplatz beansprucht. Wenn die Randbereiche leer sind, nehmen sie keinen Platz ein.

Jeder Bereich kann nur ein Element enthalten. Es kann mit den Methoden setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Sie können andere Layouts verwenden, um mehrere Elemente in einem einzigen Bereich zu platzieren.

//BorderPane example
BorderPane pane = new BorderPane();

Label top = new Label("Top");

Label right = new Label("Right");

HBox bottom = new HBox();
bottom.getChildren().addAll(new Label("First"), new Label("Second"));

VBox left = new VBox();
left.getChildren().addAll(new Label("Upper"), new Label("Lower"));

StackPane center = new StackPane();
center.getChildren().addAll(new Label("Lorem"), new Label("ipsum"));

pane.setTop(top);        //The text "Top"
pane.setRight(right);    //The text "Right"
pane.setBottom(bottom);  //Row of two texts
pane.setLeft(left);      //Column of two texts
pane.setCenter(center);  //Two texts on each other

FlowPane

FlowPane Knoten in Zeilen oder Spalten basierend auf dem verfügbaren horizontalen oder vertikalen Platz ein. Knoten werden in die nächste Zeile umgebrochen, wenn der horizontale Abstand geringer als die Gesamtbreite aller Knoten ist. Knoten werden in die nächste Spalte eingebettet, wenn der vertikale Abstand geringer als die Summe der Knoten aller Knoten ist. Dieses Beispiel veranschaulicht das horizontale Standardlayout:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        FlowPane root = new FlowPane();
        for (int i=1; i<=15; i++) {
            Button b1=new Button("Button "+String.valueOf(i));
            root.getChildren().add(b1); //for adding button to root
        }
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("FlowPane Layout");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Standard- FlowPane Konstruktor:

FlowPane root = new FlowPane();

Zusätzliche FlowPane Konstruktoren:

FlowPane() //Creates a horizontal FlowPane layout with hgap/vgap = 0 by default.
FlowPane(double hgap, double gap) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(double hgap, double vgap, Node... children) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(Node... children) //Creates a horizontal FlowPane layout with hgap/vgap = 0.
FlowPane(Orientation orientation) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.
FlowPane(Orientation orientation, double hgap, double gap) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, double hgap, double vgap, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.

Beim Hinzufügen von Knoten zum Layout werden die Methoden add() oder addAll() des übergeordneten Pane :

Button btn = new Button("Demo Button");    
root.getChildren().add(btn); 
root.getChildren().addAll(…); 

Ein FlowPane Knoten standardmäßig von links nach rechts an. Um die setAlignment() zu ändern, rufen Sie die setAlignment() Methode auf, indem Sie einen Aufzählungswert vom Typ Pos .

Einige häufig verwendete Flussanpassungen:

root.setAlignment(Pos.TOP_RIGHT);     //for top right
root.setAlignment(Pos.TOP_CENTER);    //for top Center
root.setAlignment(Pos.CENTER);        //for Center
root.setAlignment(Pos.BOTTOM_RIGHT);  //for bottom right

GridPane

GridPane die GridPane in einem flexiblen Raster aus Zeilen und Spalten an.

Kinder der GridPane

Ein GridPane kann an einer beliebigen Stelle innerhalb der GridPane platziert werden und kann sich über mehrere Zeilen / Spalten erstrecken (die Standardspanne ist 1). Die Platzierung innerhalb des Gitters wird durch die Layouteinschränkungen definiert:

Die Gesamtzahl der Zeilen / Spalten muss nicht vorab angegeben werden, da der Raster automatisch das Raster erweitert / verkleinert, um den Inhalt aufzunehmen.

Hinzufügen von Kindern zum GridPane

Um neue Node s zu einem GridPane hinzuzufügen, GridPane die Layouteinschränkungen für die GridPane mithilfe der statischen Methode der GridPane Klasse GridPane werden. GridPane können dann einer GridPane Instanz GridPane werden.

GridPane gridPane = new GridPane();

// Set the constraints: first row and first column
Label label = new Label("Example");
GridPane.setRowIndex(label, 0);
GridPane.setColumnIndex(label, 0);
// Add the child to the grid
gridpane.getChildren().add(label);

GridPane bietet praktische Methoden zum Kombinieren dieser Schritte:

gridPane.add(new Button("Press me!"), 1, 0); // column=1 row=0

Die GridPane Klasse bietet auch statische Setter-Methoden zum Festlegen des Zeilen- und Spaltenbereichs von untergeordneten Elementen:

Label labelLong = new Label("Its a long text that should span several rows");
GridPane.setColumnSpan(labelLong, 2);
gridPane.add(labelLong, 0, 1);  // column=0 row=1

Größe der Spalten und Zeilen

Standardmäßig werden Zeilen und Spalten entsprechend ihrem Inhalt angepasst. Im Falle der Notwendigkeit der expliziten Kontrolle der Zeilen- und Spaltengrößen, RowConstraints und ColumnConstraints können Instanzen auf die hinzugefügt werden GridPane . Durch das Hinzufügen dieser beiden Bedingungen wird die Größe des obigen Beispiels so geändert, dass die erste Spalte 100 Pixel und die zweite Spalte 200 Pixel lang ist.

gridPane.getColumnConstraints().add(new ColumnConstraints(100));
gridPane.getColumnConstraints().add(new ColumnConstraints(200));

Standardmäßig GridPane das GridPane die Zeilen / Spalten auf ihre bevorzugten Größen, auch wenn die Größe des Gridpane größer ist als seine bevorzugte. Um dynamische Spalten- / Zeilengrößen zu unterstützen, bietet die Klasse contstaints drei Eigenschaften: Mindestgröße, Höchstgröße und bevorzugte Größe.

Zusätzlich ColumnConstraints bietet setHGrow und RowConstraints bietet setVGrow Methoden , um die Priorität der wachsenden und schrumpf zu beeinflussen. Die drei vordefinierten Prioritäten sind:

• Priority.ALWAYS : Versuchen Sie immer, zu wachsen (oder zu schrumpfen), und teilen Sie die Vergrößerung (oder Abnahme) des Speicherbereichs mit anderen Layoutbereichen, die einen Anstieg (oder ein Verkleinern) von IMMER aufweisen
• Priority.SOMETIMES : Wenn es keine anderen Layoutbereiche gibt, in denen der Wert für Wachsen (oder Verkleinern) auf ALWAYS gesetzt ist oder diese Layoutbereiche nicht den gesamten vergrößerten (oder verringerten) Speicherplatz absorbiert haben, teilen sich die Speicherplatzerhöhungen (oder -abnahmen) mit andere Layoutbereiche von SOMETIMES.
• Priority.NEVER : Der Layoutbereich wird niemals vergrößert (oder verkleinert), wenn der verfügbare Platz in der Region zunimmt (oder abnimmt).

ColumnConstraints column1 = new ColumnConstraints(100, 100, 300);
column1.setHgrow(Priority.ALWAYS);

Die oben definierte Spalte hat eine minimale Größe von 100 Pixeln und versucht immer zu wachsen, bis sie die maximale Breite von 300 Pixeln erreicht.

Es ist auch möglich, die prozentuale Größenänderung für Zeilen und Spalten festzulegen. Im folgenden Beispiel wird ein GridPane definiert, GridPane dem die erste Spalte 40% der Breite des Rasters ausfüllt, die zweite Spalte die 60%.

GridPane gridpane = new GridPane();
ColumnConstraints column1 = new ColumnConstraints();
column1.setPercentWidth(40);
ColumnConstraints column2 = new ColumnConstraints();
column2.setPercentWidth(60);
gridpane.getColumnConstraints().addAll(column1, column2);

Ausrichtung von Elementen innerhalb der Gitterzellen

Die Ausrichtung von Node s kann mithilfe der setHalignment (horizontal) -Methode der ColumnConstraints Klasse und der setValignment (Vertical) -Methode der RowConstraints Klasse definiert werden.

ColumnConstraints column1 = new ColumnConstraints();
column1.setHalignment(HPos.RIGHT);

RowConstraints row1 = new RowConstraints();
row1.setValignment(VPos.CENTER);

TilePane

Das Layout der Kachelfläche ist dem FlowPane-Layout ähnlich. TilePane platziert alle Knoten in einem Raster, in dem jede Zelle oder Kachel dieselbe Größe hat. Es ordnet Knoten in sauberen Zeilen und Spalten an, entweder horizontal oder vertikal.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.TilePane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage primaryStage) {
            primaryStage.setTitle("TilePane Demo");
            double width = 400;
            double height = 300;
            TilePane root = new TilePane();
            root.setStyle("-fx-background-color:blue");
            // to set horizontal and vertical gap
            root.setHgap(20);
            root.setVgap(50);
            Button bl = new Button("Buttons");
            root.getChildren().add(bl);
            Button btn = new Button("Button");
            root.getChildren().add(btn);
            Button btn1 = new Button("Button 1");
            root.getChildren().add(btn1);
            Button btn2 = new Button("Button 2");
            root.getChildren().add(btn2);
            Button btn3 = new Button("Button 3");
            root.getChildren().add(btn3);
            Button btn4 = new Button("Button 4");
            root.getChildren().add(btn4);
    
            Scene scene = new Scene(root, width, height);
            primaryStage.setScene(scene);
            primaryStage.show();
        }
    
    
        public static void main(String[] args) {
            launch(args);
        }
    }

Ausgabe

Tilepane erstellen

TilePane root = new TilePane();

setHgap () Die Methode setVgap () wird verwendet, um eine Lücke zwischen Spalte und Spalte herzustellen. Wir können auch die Spalten für das Layout festlegen, indem Sie verwenden

int columnCount = 2;
root.setPrefColumns(columnCount);

AnchorPane

AnchorPane a ist ein Layout, mit dem der Inhalt in einem bestimmten Abstand von den Seiten platziert werden kann.

Es gibt 4 Methoden zum Einstellen und 4 Methoden zum AnchorPane der Abstände in AnchorPane . Der erste Parameter dieser Methoden ist der untergeordnete Node . Der zweite Parameter der Setter ist der zu verwendende Double Wert. Dieser Wert kann null , um keine Einschränkung für die angegebene Seite anzuzeigen.

Im folgenden Beispiel werden Knoten in bestimmten Abständen von den Seiten platziert.

Der center Bereich wird ebenfalls angepasst, um die angegebenen Abstände von den Seiten einzuhalten. Beobachten Sie das Verhalten, wenn die Größe des Fensters geändert wird.

public static void setBackgroundColor(Region region, Color color) {
    // change to 50% opacity
    color = color.deriveColor(0, 1, 1, 0.5);
    region.setBackground(new Background(new BackgroundFill(color, CornerRadii.EMPTY, Insets.EMPTY)));
}

@Override
public void start(Stage primaryStage) {
    Region right = new Region();
    Region top = new Region();
    Region left = new Region();
    Region bottom = new Region();
    Region center = new Region();
    
    right.setPrefSize(50, 150);
    top.setPrefSize(150, 50);
    left.setPrefSize(50, 150);
    bottom.setPrefSize(150, 50);
    
    // fill with different half-transparent colors
    setBackgroundColor(right, Color.RED);
    setBackgroundColor(left, Color.LIME);
    setBackgroundColor(top, Color.BLUE);
    setBackgroundColor(bottom, Color.YELLOW);
    setBackgroundColor(center, Color.BLACK);
    
    // set distances to sides
    AnchorPane.setBottomAnchor(bottom, 50d);
    AnchorPane.setTopAnchor(top, 50d);
    AnchorPane.setLeftAnchor(left, 50d);
    AnchorPane.setRightAnchor(right, 50d);
    
    AnchorPane.setBottomAnchor(center, 50d);
    AnchorPane.setTopAnchor(center, 50d);
    AnchorPane.setLeftAnchor(center, 50d);
    AnchorPane.setRightAnchor(center, 50d);
    
    // create AnchorPane with specified children
    AnchorPane anchorPane = new AnchorPane(left, top, right, bottom, center);

    Scene scene = new Scene(anchorPane, 200, 200);
    
    primaryStage.setScene(scene);
    primaryStage.show();
}