JavaFX Tile Pane

Tile Pane

Tile Pane的類別為javafx.scene.layout.TilePane，類似於Flow Pane。Tile Pane功能幾乎與Flow Pane一樣，兩者差別在於Tile Pane可透過setPrefColumns()與setPrefRows()方法設定最佳直行 (Column) 與橫列 (Row) 的數目，此屬性稱為prefColumns與prefRows，但此二屬性僅用以計算Tile Pane的最佳尺寸 (Preferred Size)，並不會影響真正的直行與橫列數目。

Tile Pane依其配置方向 (Orientation)，分為水平與垂直兩種方式，如同其名稱Tile (瓷磚) 一般，Tile Pane將物件配置於大小均勻的格子之中，以水平方向為例，Tile Pane將物件依序由左至右、由上至下配置，當物件配置超過容器寬度，則超過一列 (Row) 時，會依序自下一列開始配置。以垂直方向為例，Tile Pane將物件依序由上至下、由左至右配置，當物件配置超過容器高度，則超過一行 (Column) 時，會依序自下一行開始配置。其預設配置方向為水平方向。

請參考以下範例3-20，示範如何以Tile Pane配置物件，分別設定Tile Pane的配置方式為垂直方向、以setPadding()方法設定Tile Pane四周的間距、以setHgap()與setVgap()方法設定Tile Pane中物件間的水平與垂直間距為5單位像素、以setPrefRows()方法設定Tile Pane最佳橫列數目。接著以add()方法將物件依序加至Tile Pane之中，由於其配置方式為垂直方向，因此Tile Pane會將物件以預設的方式由上至下依序配置，當物件超過一行之配置時，會依序自下一行開始配置。

// 設定TilePane TilePane tilepane = new TilePane(Orientation.VERTICAL); tilepane.setPadding(new Insets(10, 10, 10, 10)); // 設定TilePane中物件間的水平間距 tilepane.setHgap(5); // 設定TilePane中物件間的垂直間距 tilepane.setVgap(5); // 設定Tile Pane最佳橫列數目 tilepane.setPrefRows(4); ImageView images[] = new ImageView[9]; for (int i=0; i<9; i++) {   image = new ImageView(new Image(      TilePaneDemo.class.getResourceAsStream("images/Icon0"+i+".png")));   // 將ImageView物件加至TilePane之中   tilepane.getChildren().add(images[i]); }

【執行結果】

除了TilePane類別之外，JavaFX並提供TilePaneBuilder類別配置物件，以TilePaneBuilder類別配置物件的程式架構如下，首先以create()方法建立TilePaneBuilder的實體 (Instance)，其間以alignment(), hgap(), vgap(), orientation(), prefColumns(), prefRows()等方法分別設定物件的水平與垂直對齊方式、物件間的水平與垂直間距、配置方向、最佳直行數目、最佳橫列數目等，最後再以build()方法以TilePaneBuilder物件建立Tile Pane的實體，再以children()方法將物件置於Tile Pane區域中：

ImageView images[] = new ImageView[9]; for (int i=0; i<9; i++) {   image = new ImageView(new Image(      TilePaneDemo.class.getResourceAsStream("images/Icon0"+i+".png"))); } // 建立SceneBuilder的實體（Instance） Scene scene = SceneBuilder.create()   .width(250)   .height(250)   .root(     // 建立TilePaneBuilder的實體（Instance）     TilePaneBuilder.create()       .orientation(Orientation.VERTICAL)       .hgap(5)       .vgap(5)       .padding(new Insets(10, 10, 10, 10))       .prefRows(4)       .children(images)       .build()   )   .build();

【參考資料】

[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