[JavaFX][Java8] GridPaneの使用方法

JavaFXに関してはあんまり日本語ドキュメントがないのでまとめ。

FXMLの編集はSceneBuilderを使用したりしなかったりしています。

公式ドキュメント

GridPane (JavaFX 8)

検証環境

種別	バージョン
OS	Windows10 64bit
IntelliJ IDEA	2017.1.5
JDK	1.8.0_121

基本

行/列の作成

2x2のGridを作成する例は以下になります。

2x2のGridPaneの例

<GridPane gridLinesVisible="true" hgap="10" vgap="10" xmlns="http://javafx.com/javafx/8.0.112"
          xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <columnConstraints>
        <ColumnConstraints/>
        <ColumnConstraints/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints/>
        <RowConstraints/>
    </rowConstraints>
</GridPane>

columnConstraints, rowConstraints の中に子要素を追加することによってグリッドを拡張することができます。
ここらへんはWPFのGridの仕様とあんまり変わらない様子。

コントロールの割当て

コントロールの割当て

<GridPane alignment="center" hgap="10" vgap="10" xmlns:fx="http://javafx.com/fxml/1"
          xmlns="http://javafx.com/javafx/8.0.112" fx:controller="sample.Controller">
    <rowConstraints>
        <RowConstraints/>
        <RowConstraints/>
    </rowConstraints>
    <columnConstraints>
        <ColumnConstraints/>
        <ColumnConstraints/>
    </columnConstraints>
    <children>
        <Label text="Label" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
    </children>
</GridPane>

• コントロールのプロパティにインデックスを設定する。これもWPFと同じ。
• <children> タグは省略可能で、コントロールのは位置は GridPane 直下でもよい。

親要素に幅を合わせる

<GridPane hgap="10" vgap="10" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <rowConstraints>
        <RowConstraints percentHeight="100" />
    </rowConstraints>
    <columnConstraints>
        <ColumnConstraints percentWidth="50" />
        <ColumnConstraints percentWidth="50"/>
    </columnConstraints>
   <children>
      <TextArea prefHeight="200.0" prefWidth="200.0" />
      <TextArea prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1" />
   </children>
</GridPane>

各要素にパーセンテージを設定できる。

todo: サイズ指定とパーセンテージでの指定を合わせたときの動作は？

参考

java - JavaFX - Get GridPane to fit parent - Stack Overflow

SceneBuilderでの編集

行/列 の追加

左のメニューの右クリックメニューから追加するのが簡単そう。

参考

GridPane (JavaFX 8)