JavaFX 2で始めるGUI開発　第8回レイアウトその2

櫻庭祐一

横河電機

2013.03.08

　先月に引き続き、今月もJavaFXのコンテナとレイアウト機能について解説していきます。今月、解説するのは次の3種類のコンテナクラスです。

StackPane
AnchorPane
GridPane

　また、最後にScene Builderを使ったレイアウトのTipsも紹介します。

　今月使用したサンプルは以下からダウンロードできます。

サンプルのプロジェクト (こちらからダウンロードできます)
layout2.zip

StackPane

　StackPaneクラスはノードを奥行き方向に重ねて表示するコンテナです。Swing/AWTのjava.awt.CardLayoutクラスに相当するレイアウトを行います。奥行き方向に重ねるので、上に重なるノードが下のノードよりも大きい場合、下のノードは見えなくなってしまいます。ノードの重ね順は、StackPaneクラスのchildrenプロパティに保持したノードの順番によります。childrenプロパティに保持した先頭のノードが一番奥に表示され、最後のノードが手前に表示されます。

　ここでは、半径の異なる円を描いてみます。

リスト1●重なった円を描画する (Java)

public class StackedCircleDemo extends Application {
    
    @Override
    public void start(Stage stage) {
        StackPane stackPane = new StackPane();
        stackPane.setPrefSize(400, 400);
        
        for (int i = 10; i > 0; i--) {
            // 半径が 50+i*10 の円
            Circle circle = new Circle(50 + i * 10);
            // 青から赤に色が変化するようにする
            circle.setFill(Color.color(1.0 - i / 10.0, 0, i / 10.0));
            
            // 先に追加したものが奥に表示される
            stackPane.getChildren().add(circle);
        }
        
        Scene scene = new Scene(stackPane);
        
        stage.setTitle("Stacked Circle Demo");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

　円を描画するにはjavafx.scene.shape.Circleクラスを使用します。コンストラクタの引数は円の半径になります。

　赤字で示したように、childrenプロパティに対してaddメソッドでノードを追加した場合、始めに追加したノードが最も奥に表示されます。

　このサンプルでは奥の円をより大きく、そして色が青から赤に変化するようにしました。円の描画色はfillプロパティで示します。

　実行すると図1のようになります。