devstory

Le Tutoriel de JavaFX AnchorPane Layout

  1. AnchorPane Layout
  2. Exemple avec AnchorPane
  3. 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:

3. Le design AnchorPanel avec Scene Builder

  • File/New/Other...
Ajoutez les sous- composants à AnchorPane:
Anchor:
Ancrez les sous-composants sur les côtés d'AnchorPane:

Tutoriels de JavaFX

Show More