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

  • 0
    いいね
  • 0
    コメント

    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>
    

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

    8bf6abbf-13bb-486d-8230-8ad3101cdbaf.gif

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

    参考

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

    SceneBuilderでの編集

    行/列 の追加

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

    grid.gif

    参考

    GridPane (JavaFX 8)