Hướng dẫn và ví dụ JavaFX AnchorPane Layout

Xem thêm các chuyên mục:

Các hướng dẫn lập trình JavaFX

AnchorPane Layout
Ví dụ với AnchorPane
Thiết kế AnchorPanel với Scene Builder

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- AnchorPane Layout

AnchorPane là một bộ chứa (container), nó khá giống với BorderPane. BorderPane chia bề mặt của nó thành 5 vùng riêng biệt để đặt các thành phần con vào đó, trong khi AnchorPane chia bề mặt của nó thành 5 vùng để neo (anchor) thành phần con, chú ý rằng 5 vùng của AnchorPane chỉ là 5 vùng logic, nó không phải là 5 vùng thực sự.

Một thành phần con nằm trong AnchorPane có thể được neo (anchor) vào một hoặc nhiều vùng logic của AnchorPane.

Hình ảnh dưới đây minh họa một thành phần con nằm trong AnchorPane, được neo vào cạnh bên trái và bên phải của AnchorPane. Và khi AnchorPane thay đổi chiều dài (width), chiều dài của thành phần con cũng bị thay đổi theo.

Thành phần con có thể được neo (anchor) vào 4 cạnh của AnchorPane:

2- Ví dụ với 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) Neo vào Top + Left + Right
       AnchorPane.setTopAnchor(button1, 40.0);
       AnchorPane.setLeftAnchor(button1, 50.0);
       AnchorPane.setRightAnchor(button1, 70.0);
 
       // (B2) Neo vào Top + Left + Right
       AnchorPane.setTopAnchor(button2, 90.0);
       AnchorPane.setLeftAnchor(button2, 10.0);
       AnchorPane.setRightAnchor(button2, 320.0);

 
       // (B3) Neo vào Top + Left + Right
       AnchorPane.setTopAnchor(button3, 100.0);
       AnchorPane.setLeftAnchor(button3, 250.0);
       AnchorPane.setRightAnchor(button3, 20.0);
 
       // (B4) Neo vào 4 cạnh của AnchorPane
       AnchorPane.setTopAnchor(button4, 150.0);
       AnchorPane.setLeftAnchor(button4, 40.0);
       AnchorPane.setRightAnchor(button4, 50.0);
       AnchorPane.setBottomAnchor(button4, 45.0);

 
       // Thêm vào 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);
   }

}

Chạy ví dụ:

3- Thiết kế AnchorPanel với Scene Builder

File/New/Other...

Thêm các thành phần con vào AnchorPane:

Anchor:

Neo thành phần con vào các cạnh của AnchorPane:

Xem thêm các chuyên mục:

Các hướng dẫn lập trình JavaFX