Flow Pane
Flow Pane的類別為javafx.scene.layout.FlowPane，類似於Java AWT的Flow Layout。
Flow Pane依其配置方向 (Orientation)，分為水平與垂直兩種方式，如同其名稱Flow (流動) 一般。
以水平方向為例，Flow Pane將物件依序由左至右、由上至下配置，當物件配置超過容器寬度，則超過一列 (Row) 時，會依序自下一列開始配置。
以垂直方向為例，Flow Pane將物件依序由上至下、由左至右配置，當物件配置超過容器高度，則超過一行 (Column) 時，會依序自下一行開始配置。其預設配置方向為水平方向。
FlowPane類別的建構函式為：
public FlowPane()
public FlowPane(Orientation orientation)
public FlowPane(double hgap, double vgap)
public FlowPane(Orientation orientation, double hgap, double vgap)
其中參數hgap與vgap分別設定物件間的水平與垂直間距，單位為像素。參數orientation設定Flow Pane的配置方向，為以下的常數值：
- Orientation.HORIZONTAL：水平方向。
- Orientation.VERTICAL：垂直方向。
請參考以下範例，示範如何以Flow Pane配置按鈕物件，首先以setHgap()與setVgap()方法分別設定Flow Pane中物件間的水平與垂直間距為5單位像素，接著以add()方法將按鈕物件加至Flow Pane之中，Flow Pane會將物件以預設的方式由左至右依序配置，當物件超過一列之配置時，會依序自下一列開始配置。
// 設定Button物件 Button button1 = new Button("OK"); Button button2 = new Button("Cancel"); Button button3 = new Button("Yes"); Button button4 = new Button("No"); // 設定FlowPane FlowPane flowpane = new FlowPane(); // 設定FlowPane中物件間的水平間距 flowpane.setHgap(5); // 設定FlowPane中物件間的垂直間距 flowpane.setVgap(5); // 將Button物件加至FlowPane之中 flowpane.getChildren().add(button1); flowpane.getChildren().add(button2); flowpane.getChildren().add(button3); flowpane.getChildren().add(button4); ... |
【執行結果】
除了FlowPane類別之外，JavaFX並提供FlowPaneBuilder類別配置物件，與FlowPane類別一樣，FlowPaneBuilder類別依其配置方向，分為水平與垂直兩種方式，其預設配置方向為水平方向。以FlowPaneBuilder類別配置物件的程式架構如下，首先以create()方法建立FlowPaneBuilder的實體 (Instance)，最後再以build()方法以FlowPaneBuilder物件建立Flow Pane的實體，其間以alignment()、hgap()、vgap()、orientation()等方法分別設定物件的水平與垂直對齊方式、物件間的水平與垂直間距、配置方向等，再以children()方法將物件置於Flow Pane區域中：
FlowPane flowpane = FlowPaneBuilder.create() .alignment(...) .hgap(...) .vgap(...) .orientation(...) .children(...) .build() |
請參考以下範例。
// 設定ImageView物件 ImageView images[] = new ImageView[9]; for (int i=0; i<9; i++) { // 讀取Java Archive檔案內的圖像檔案 images[i] = new ImageView(new Image( FlowPaneDemo.class.getResourceAsStream( "images/Icon0"+i+".png"))); } // 建立SceneBuilder的實體（Instance） Scene scene = SceneBuilder.create() .width(220) .height(220) .root( // 建立FlowPaneBuilder的實體（Instance） FlowPaneBuilder.create() .alignment(Pos.CENTER) .hgap(5) .vgap(5) .orientation(Orientation.VERTICAL) .padding(new Insets(5, 0, 5, 0)) .children(images) .build() ) .build(); ... |
【參考資料】
[1] 黃嘉輝，深入研究JavaFX 2。
[2] 黃嘉輝，深入研究Java Swing。
[3] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[5] JavaFX 2.2 API Specification.
[6] Java Platform, Standard Edition 7 API Specification.
© Chia-Hui Huang
沒有留言:
張貼留言