JavaFX Anchor Pane

Anchor Pane

Anchor Pane的類別為javafx.scene.layout.AnchorPane，類似於Java Swing的Spring Layout。

Java Swing的Spring Layout定義物件間其水平或垂直邊緣（Edge）間的距離，以此距離及物件的長寬定義各物件的位置。

Anchor Pane則如同其名稱Anchor（錨）一般，含有定位之意，並以下列方法設定Anchor Pane各區域與物件間之距離：

• setTopAnchor()：設定Anchor Pane區域上方與物件上方之距離。
• setBottomAnchor()：設定Anchor Pane區域下方與物件下方之距離。
• setLeftAnchor()：設定Anchor Pane區域左方與物件左方之距離。
• setRightAnchor()：設定Anchor Pane區域右方與物件右方之距離。

此距離依序稱為topAnchor、bottomAnchor、leftAnchor與rightAnchor，藉此將物件定位於上、下、左、右四個區域之中，不論視窗或Java Applet的大小如何改變，其所配置的物件均定位於所指定的區域中，不會改變其位置。

為說明上述方法與定位間之關係，請參考下圖之示範。

以物件1為例，分別以setTopAnchor()與setLeftAnchor()方法設定Anchor Pane區域上方與物件上方之距離（topAnchor）及區域左方與物件左方之距離（leftAnchor），因此物件1將會定位於左上方之區域中。

以物件2為例，分別以setBottomAnchor()與setRightAnchor()方法設定Anchor Pane區域下方與物件下方之距離（bottomAnchor）及區域右方與物件右方之距離（rightAnchor），因此物件2將會定位於右下方之區域中。

請參考以下範例：

// 設定Button物件 Button button1 = new Button("Top-Left"); button1.setPrefSize(100,20); Button button2 = new Button("Bottom-Left"); button2.setPrefSize(100,20); Button button3 = new Button("Top-Right"); button3.setPrefSize(100,20); Button button4 = new Button("Bottom-Right"); button4.setPrefSize(100,20); // 設定AnchorPane AnchorPane anchorpane = new AnchorPane(); // 設定Anchor Pane區域上方與Button物件上方之距離 anchorpane.setTopAnchor(button1, 10.0); // 設定Anchor Pane區域左方與Button物件左方之距離 anchorpane.setLeftAnchor(button1, 10.0); // 設定Anchor Pane區域下方與Button物件下方之距離 anchorpane.setBottomAnchor(button2, 10.0); // 設定Anchor Pane區域左方與Button物件左方之距離 anchorpane.setLeftAnchor(button2, 10.0); // 設定Anchor Pane區域上方與Button物件上方之距離 anchorpane.setTopAnchor(button3, 10.0); // 設定Anchor Pane區域右方與Button物件右方之距離 anchorpane.setRightAnchor(button3, 10.0); // 設定Anchor Pane區域下方與Button物件下方之距離 anchorpane.setBottomAnchor(button4, 10.0); // 設定Anchor Pane區域右方與Button物件右方之距離 anchorpane.setRightAnchor(button4, 10.0); // 將所有Button物件加至AnchorPane之中 anchorpane.getChildren().addAll(button1, button2, button3, button4); ...

【執行結果】

除了AnchorPane類別之外，JavaFX並提供AnchorPaneBuilder類別配置物件，以AnchorPaneBuilder類別配置物件的程式架構如下，首先以create()方法建立AnchorPaneBuilder的實體 (Instance)，中間以children()方法將物件置於Anchor Pane區域中，最後再以build()方法以AnchorPaneBuilder物件建立Anchor Pane的實體：

AnchorPane anchorpane = AnchorPaneBuilder.create()   .children(...)   .build();

請參考以下範例：

/ 以AnchorPaneBuilder建立AnchorPane AnchorPane anchorpane = AnchorPaneBuilder.create()   .children(button1, button2, button3, button4)   .build(); // 設定Anchor Pane區域上方與Button物件上方之距離 anchorpane.setTopAnchor(button1, 10.0); // 設定Anchor Pane區域左方與Button物件左方之距離 anchorpane.setLeftAnchor(button1, 10.0); // 設定Anchor Pane區域下方與Button物件下方之距離 anchorpane.setBottomAnchor(button2, 10.0); // 設定Anchor Pane區域左方與Button物件左方之距離 anchorpane.setLeftAnchor(button2, 10.0); // 設定Anchor Pane區域上方與Button物件上方之距離 anchorpane.setTopAnchor(button3, 10.0); // 設定Anchor Pane區域右方與Button物件右方之距離 anchorpane.setRightAnchor(button3, 10.0); // 設定Anchor Pane區域下方與Button物件下方之距離 anchorpane.setBottomAnchor(button4, 10.0); // 設定Anchor Pane區域右方與Button物件右方之距離 anchorpane.setRightAnchor(button4, 10.0); ...

【參考資料】

[1] 黃嘉輝，深入研究JavaFX 2。

[2] 黃嘉輝，深入研究Java Swing。

[3] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html

[4] JavaFX：http://www.oracle.com/technetwork/java/javafx

[5] JavaFX 2.2 API Specification.

[6] Java Platform, Standard Edition 7 API Specification.

© Chia-Hui Huang