Hướng dẫn sử dụng JavaFX AnchorPane Layout
Xem thêm các chuyên mục:
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:
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ụ:
- 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:
