Le Tutoriel de JavaFX AnchorPane Layout

AnchorPane Layout
Exemple avec AnchorPane
Le design AnchorPanel avec Scene Builder

1. AnchorPane Layout

AnchorPane est un conteneur (container), qui est similaire à BorderPane. BorderPane est divisé en 5 zones distinctes afin de placer le sous-composant pendant que AnchorPane est divisé en 5 zones afin d'ancrer (anchor). Notez que 5 zones d'AnchorPane sont 5 zones logiques mais pas 5 zones réelles.

Une sous-composante située dans AnchorPane peut être ancrée (anchor) dans une ou plusieurs zones logiques d'AnchorPane.

L'image ci-dessous illustre un sous-composant qui se trouve dans AnchorPane et est ancré sur les côtés gauche et droit d'AnchorPane. Lorsque AnchorPane change de longueur (width), la longueur des sous-composants sera également modifiée.

Les sous-composants peuvent être ancrés (anchor) sur 4 côtés d'AnchorPane:

2. Exemple avec AnchorPane

BorderPaneDemo.java

package org.o7planning.javafx.anchorpane;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class AnchorPaneDemo extends Application {

   @Override
   public void start(Stage primaryStage) throws Exception {
       AnchorPane root = new AnchorPane();
       Button button1 = new Button("(B1) Top + Left + Right");

       Button button2 = new Button("(B2) Top + Left + Right");
       Button button3 = new Button("(B3) Top + Left + Right");

       Button button4 = new Button("(B4) Top + Left + Right + Bottom");

       // (B1) Anchor to the Top + Left + Right
       AnchorPane.setTopAnchor(button1, 40.0);
       AnchorPane.setLeftAnchor(button1, 50.0);
       AnchorPane.setRightAnchor(button1, 70.0);

       // (B2) Anchor to the Top + Left + Right
       AnchorPane.setTopAnchor(button2, 90.0);
       AnchorPane.setLeftAnchor(button2, 10.0);
       AnchorPane.setRightAnchor(button2, 320.0);

       // (B3) Anchor to the Top + Left + Right
       AnchorPane.setTopAnchor(button3, 100.0);
       AnchorPane.setLeftAnchor(button3, 250.0);
       AnchorPane.setRightAnchor(button3, 20.0);

       // (B4) Anchor to the four sides of AnchorPane
       AnchorPane.setTopAnchor(button4, 150.0);
       AnchorPane.setLeftAnchor(button4, 40.0);
       AnchorPane.setRightAnchor(button4, 50.0);
       AnchorPane.setBottomAnchor(button4, 45.0);

       // Add buttons to AnchorPane
       root.getChildren().addAll(button1, button3, button2, button4);

       Scene scene = new Scene(root, 550, 250);

       primaryStage.setTitle("AnchorPane Layout Demo (o7planning.org)");
       primaryStage.setScene(scene);
       primaryStage.show();
   }

   public static void main(String[] args) {
       launch(args);
   }

}

L'exécution de l'exemple: