Help us understand the problem. What is going on with this article?

JavaFX SceneBuilderのコンテナの特徴を紹介する

More than 1 year has passed since last update.

はじめに

この記事は SLP KBIT Advent Calendar 2018 の17日目の記事です。

この記事では、私がJavaFXとSceneBuilderを使い始めたときによくわからなかった、コンテナを紹介します。
最近サークル内でJavaを触っている人が多いので、GUIアプリケーションを作成する際の手助けになればと思います。

コンテナとは

この辺に入ってるやつ。
containers.png
ボタンなどのオブジェクトを配置する際の土台となります。
コンテナの中にコンテナを配置することも可能で、組み合わせることでより複雑なレイアウトを作ることが可能です。

各コンテナの概要

Pane

もっともシンプルなコンテナです。
好きな場所にオブジェクトを配置できます。

AnchorPane

AnchorPaneの枠から、その中に設置してあるオブジェクトまでの距離を固定できます。

AnchorPaneの右枠にアンカーしたボタンと、どこにもアンカーしていないボタンを用意します。
この状態で、画面サイズを右に拡大すると、
AnchorBefore.png
AnchorAfter.png
このように、アンカーしたボタンが、右枠との距離を保って動きます。

VBox

VBoxは、オブジェクトを上から縦に敷き詰めて並べて配置します。
オブジェクトの幅をVBoxの幅に合わせることが可能で、画面サイズを変更したときの細かい設定もできます。
オブジェクト毎のサイズや余白を設定すると、より見やすいレイアウトとなります。
VBox.png

HBox

HBoxは、VBoxに対し、オブジェクトを左から横に敷き詰めて配置します。
基本的にVBoxと動きは変わりません。
HBox.png

FlowPane

FlowPaneは、HBoxと同じようにオブジェクトを横に敷き詰めますが、一番右にくると折り返すように配置します。
VBoxと同じように、垂直方向に敷き詰めることも可能です。

BorderPane

BorderPaneは、上、左、右、下、中央の各位置にオブジェクトを配置します。
上下に配置されているオブジェクトは、その優先高に合せてサイズ変更され、BorderPaneの幅が拡張されます。
左右に配置されているオブジェクトは、その優先幅に合せてサイズ変更され、上下の長さが拡張されます。
中央に配置されているオブジェクトは、中央の使用可能なスペース全体に表示されるようにサイズ変更されます。
それぞれの場所には1つしかオブジェクトを配置できません。
複数のオブジェクトを配置する場合は、さらに別のコンテナを配置する必要があります。
Border.png

GridPane

GridPaneは、行と列からなるマス目にオブジェクトを配置します。
複数のマスにまたがって配置することも可能です。
Grid.png

おわりに

今回は、オブジェクトの配置に関するコンテナを紹介しました。
しかし、これら以外にもコンテナは存在します。
また機会があれば、具体的な使い方についてより詳しく解説したり、他のコンテナの紹介もしてみたいです。

kokeneko
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした