【JavaFX】格子状にコントロールを配置する方法（GridPane）| kitanote

JavaFXで格子状にコントロールを配置する方法について記載します。

1. 格子状にコントロールを配置する方法

GridPaneを使用すると格子の場所を指定して、コントロールを配置することができます。

実行例

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class SampleGridPane extends Application {

    @Override
    public void start(Stage pStage) throws Exception {

        /**
         * ボタンの定義
         */
        Button btn1_1 = new Button("1-1");
        btn1_1.setPrefWidth(100);
        btn1_1.setPrefHeight(50);

        Button btn1_2 = new Button("1-2");
        btn1_2.setPrefWidth(100);
        btn1_2.setPrefHeight(50);

        Button btn1_3 = new Button("1-3");
        btn1_3.setPrefWidth(100);
        btn1_3.setPrefHeight(50);

        Button btn2_1 = new Button("2-1");
        btn2_1.setPrefWidth(100);
        btn2_1.setPrefHeight(50);

        Button btn2_2 = new Button("2-2");
        btn2_2.setPrefWidth(100);
        btn2_2.setPrefHeight(50);

        Button btn2_3 = new Button("2-3");
        btn2_3.setPrefWidth(100);
        btn2_3.setPrefHeight(50);

        /**
         * GridPaneにボタンを追加
         */
        // 1行目
        GridPane.setConstraints(btn1_1, 0, 0);
        GridPane.setConstraints(btn1_2, 1, 0);
        GridPane.setConstraints(btn1_3, 2, 0);

        // 2行目
        GridPane.setConstraints(btn2_1, 0, 1);
        GridPane.setConstraints(btn2_2, 1, 1);
        GridPane.setConstraints(btn2_3, 2, 1);

        // GridPaneにコントロールに追加
        GridPane gridPane = new GridPane();
        gridPane.getChildren().addAll( btn1_1, btn1_2, btn1_3, btn2_1, btn2_2, btn2_3 );

        pStage.setTitle("Sample Grid");
        pStage.setScene( new Scene( gridPane ) );
        pStage.show();

    }

    public static void main(String[] args){

        Application.launch(args);

    }
}

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.GridPane;

import javafx.stage.Stage;

public class SampleGridPane extends Application {

@Override

public void start(Stage pStage) throws Exception {

/**

* ボタンの定義

Button btn1_1 = new Button("1-1");

btn1_1.setPrefWidth(100);

btn1_1.setPrefHeight(50);

Button btn1_2 = new Button("1-2");

btn1_2.setPrefWidth(100);

btn1_2.setPrefHeight(50);

Button btn1_3 = new Button("1-3");

btn1_3.setPrefWidth(100);

btn1_3.setPrefHeight(50);

Button btn2_1 = new Button("2-1");

btn2_1.setPrefWidth(100);

btn2_1.setPrefHeight(50);

Button btn2_2 = new Button("2-2");

btn2_2.setPrefWidth(100);

btn2_2.setPrefHeight(50);

Button btn2_3 = new Button("2-3");

btn2_3.setPrefWidth(100);

btn2_3.setPrefHeight(50);

/**

* GridPaneにボタンを追加

// 1行目

GridPane.setConstraints(btn1_1, 0, 0);

GridPane.setConstraints(btn1_2, 1, 0);

GridPane.setConstraints(btn1_3, 2, 0);

// 2行目

GridPane.setConstraints(btn2_1, 0, 1);

GridPane.setConstraints(btn2_2, 1, 1);

GridPane.setConstraints(btn2_3, 2, 1);

// GridPaneにコントロールに追加

GridPane gridPane = new GridPane();

gridPane.getChildren().addAll( btn1_1, btn1_2, btn1_3, btn2_1, btn2_2, btn2_3 );

pStage.setTitle("Sample Grid");

pStage.setScene( new Scene( gridPane ) );

pStage.show();

}

public static void main(String[] args){

Application.launch(args);

}

setConstraintsメソッドを使用して位置を指定する

コントロールを配置する箇所は、GridPaneクラスのsetConstraintsメソッドを使用して指定します。

構文

GridPane.setConstraints(コントロール, 列, 行);

※ 列と行はどちらも 0 始まりです。

2. レイアウト一覧

1. 垂直方向にコントロールを配置する方法（VBox）

2. 水平方向にコントロールを配置する方法（HBox）

3. 左から右にコントロールを配置する方法（FlowPane）

4. 格子状にコントロールを配置する方法（GridPane）

5. 上下左右中央にコントロールを配置する方法（BorderPane）

6. 上下左右からの位置を指定してコントロールを配置する方法（AnchorPane）

7. コントロール幅を指定する setPrefWidth、setMaxWidth、setMinWidth の違い