まったり技術ブログ

Technology is power.

【JavaFX】レイアウトを使ってみる

f:id:motikan2010:20180107061741j:plain
以下のレイアウトを紹介します。

  • VBox クラス:垂直にUIコントロールを配置
  • HBox クラス:平行にUIコントロールを配置
  • FlowPane クラス:平行にUIコントロールを配置(折り返し有り)
  • BorderPane クラス:上下・左右・中心の位置にUIコントロールを配置
  • GridPane クラス:行と列を指定してUIコントロールを配置
  • TilePane クラス:クリッド状にUIコントロールを配置
  • StackPane クラス:重ねてUIコントロールを配置

コピペで実行する場合の注意点

 この記事で紹介するコード内では、「Google Guava」というライブラリを利用しています。
コピペで実行する場合は、「Google Guava」を導入してください。
 導入方法は下の記事が分かりやすいです。 Google製のJavaライブラリ「Guava」を使ってみよう (1) | WEB ARCH LABO

 または、各リストの取り扱いの部分を以下を参考に修正して下さい。

-import com.google.common.collect.Lists;
+import java.util.ArrayList;

-List<Button> buttonList = Lists.newArrayList();
+List<Button> buttonList = new ArrayList<>();

Java - ネットのプログラムが実行できない(140210)|teratail

VBox クラス

垂直にUIコントロールを配置します。
上部から順に配置されていきます。

f:id:motikan2010:20180107044324p:plain:w100
VBox (JavaFX 8)

import com.google.common.collect.Lists;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.List;

public class VBoxExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("HBox Example");

        List<Button> buttonList = Lists.newArrayList();
        for (int i=0; i<5; i++) {
            buttonList.add(new Button(Integer.toString(i)));
            buttonList.get(i).setPrefWidth(80);
        }

        VBox vBox = new VBox();
        vBox.setAlignment(Pos.CENTER);
        vBox.setPadding(new Insets(10, 10, 10, 10));
        vBox.getChildren().addAll(buttonList);

        stage.setScene(new Scene(vBox));
        stage.show();
    }
}

UIコントロール間に間隔を空けることも可能です。

VBox vBox = new VBox();
vBox.setAlignment(Pos.CENTER);
vBox.setPadding(new Insets(10, 10, 10, 10));
vBox.setSpacing(5.0); // 追加
vBox.getChildren().addAll(buttonList);

f:id:motikan2010:20180107044413p:plain:w100

HBox クラス

平行にUIコントロールを配置します。
f:id:motikan2010:20180107044758p:plain:w450

HBox (JavaFX 8)

import com.google.common.collect.Lists;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

import java.util.List;

public class HBoxExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("HBox Example");

        List<Button> buttonList = Lists.newArrayList();
        for (int i=0; i<5; i++) {
            buttonList.add(new Button(Integer.toString(i)));
            buttonList.get(i).setPrefWidth(80);
        }

        HBox hBox = new HBox();
        hBox.setAlignment(Pos.CENTER);
        hBox.setPadding(new Insets(10, 10, 10, 10));
        hBox.getChildren().addAll(buttonList);

        stage.setScene(new Scene(hBox));
        stage.show();
    }
}

HBox同様に、UIコントロール間に間隔を空けることも可能です。

HBox hBox = new HBox();
hBox.setAlignment(Pos.CENTER);
hBox.setPadding(new Insets(10, 10, 10, 10));
hBox.setSpacing(5.0); // 追加
hBox.getChildren().addAll(buttonList);

f:id:motikan2010:20180107044840p:plain:w450

FlowPane クラス

平行にUIコントロールを配置します。
入りきらないUIコントロールは折り返しが行われます。

f:id:motikan2010:20180107045018p:plain:w450
FlowPane (JavaFX 8)

import com.google.common.collect.Lists;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

import java.util.List;

public class FlowPaneExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("Flow Pane Example");

        List<Button> buttonList = Lists.newArrayList();
        for (int i=0; i<5; i++) {
            buttonList.add(new Button(Integer.toString(i)));
            buttonList.get(i).setPrefWidth(80);
        }

        FlowPane flowPane = new FlowPane();
        flowPane.setPadding(new Insets(10, 10, 10, 10));
        flowPane.getChildren().addAll(buttonList);

        stage.setScene(new Scene(flowPane));
        stage.show();
    }

}

HBoxクラスとの違い

ウィンドウの幅を狭めてみると、2つの違いが分かります。

  • HBox   :ウィンドウの幅に合わせてボタンのサイズが縮小
  • FlowPane:ウィンドウの幅に合わせてボタンが次の行へ折り返し
HBoxクラス

f:id:motikan2010:20180107045119p:plain:w300

FlowPane クラス

f:id:motikan2010:20180107045121p:plain:w300

BorderPaneクラス

上下・左右・中心の位置にUIコントロールを配置します。

f:id:motikan2010:20180107051907p:plain:w250
GridPane (JavaFX 8)

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BorderPaneExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("Border");
        stage.setWidth(200);
        stage.setHeight(110);

        Button topButton = new Button("Top");
        topButton.setPrefWidth(210);
        topButton.setPrefHeight(30);

        Button leftButton = new Button("Left");
        leftButton.setPrefHeight(30);

        Button centerButton = new Button("Center");
        centerButton.setPrefWidth(160);
        centerButton.setPrefHeight(30);

        Button rightButton = new Button("Right");
        rightButton.setPrefHeight(30);

        Button bottomButton = new Button("Bottom");
        bottomButton.setPrefWidth(210);
        bottomButton.setPrefHeight(30);

        BorderPane borderPane = new BorderPane();
        borderPane.setTop(topButton);
        borderPane.setLeft(leftButton);
        borderPane.setCenter(centerButton);
        borderPane.setRight(rightButton);
        borderPane.setBottom(bottomButton);

        VBox vBox = new VBox();
        vBox.getChildren().addAll(borderPane);

        stage.setScene(new Scene(vBox));
        stage.show();
    }

}

GridPane クラス

行と列を指定してUIコントロールを配置します。

f:id:motikan2010:20180107051647p:plain:w250
GridPane (JavaFX 8)

import com.google.common.collect.Lists;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.List;

public class VBoxExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("HBox Example");

        List<Button> buttonList = Lists.newArrayList();
        for (int i=0; i<5; i++) {
            buttonList.add(new Button(Integer.toString(i)));
            buttonList.get(i).setPrefWidth(80);
        }

        VBox vBox = new VBox();
        vBox.setAlignment(Pos.CENTER);
        vBox.setPadding(new Insets(10, 10, 10, 10));
        vBox.setSpacing(5.0);
        vBox.getChildren().addAll(buttonList);

        stage.setScene(new Scene(vBox));
        stage.show();
    }
}

TilePane クラス

クリッド状にUIコントロールを配置します。

f:id:motikan2010:20180107051732p:plain:w350
TilePane (JavaFX 8)

import com.google.common.collect.Lists;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

import java.util.List;

public class TilePaneExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("Tile Pane Example");
        stage.setWidth(320);
        stage.setHeight(130);

        List<Button> buttonList = Lists.newArrayList();
        for (int i=0; i<16; i++) {
            buttonList.add(new Button("Button:" + Integer.toString(i)));
            buttonList.get(i).setPrefWidth(80);
            buttonList.get(i).setPrefHeight(20);
        }

        TilePane tilePane = new TilePane();
        tilePane.getChildren().addAll(buttonList);

        stage.setScene(new Scene(tilePane));
        stage.show();
    }
}

ウィンドウの縮尺に合わせて配置が変わります。
f:id:motikan2010:20180107062347p:plain

StackPane クラス

重ねてUIコントロールを配置ができます。

f:id:motikan2010:20180107051814p:plain:w300
StackPane (JavaFX 8)

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;


public class StackPaneExample extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        stage.setTitle("Stack Pane Example");
        stage.setWidth(260);
        stage.setHeight(130);

        Button smButton = new Button("Small Button");
        smButton.setPrefWidth(80);
        smButton.setPrefHeight(30);
        smButton.setAlignment(Pos.TOP_CENTER);

        Button mdButton = new Button("Medium Button");
        mdButton.setPrefWidth(160);
        mdButton.setPrefHeight(60);
        mdButton.setAlignment(Pos.TOP_CENTER);

        Button lgButton = new Button("Large Button");
        lgButton.setPrefWidth(240);
        lgButton.setPrefHeight(90);
        lgButton.setAlignment(Pos.TOP_CENTER);

        StackPane stackPane = new StackPane();
        stackPane.setAlignment(Pos.BOTTOM_RIGHT);
        stackPane.getChildren().addAll(lgButton, mdButton, smButton);

        stage.setScene(new Scene(stackPane));
        stage.show();
    }
}