レイアウトについて(BorderLayout)

今回はBorderLayoutについて説明します。

BorderLayoutは枠の中を
・TOP
・BOTTOM
・LEFT
・RIGHT
・CENTER
の5つのエリアに分割して画面を構成するレイアウトです。

今回は先に実行結果から見ていきましょう。

画面を上記の5つのエリアに分割して、それぞれ色付けしています。

それではソースを示します。

package sample.pane;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * BorderPaneクラスのサンプル
 * @author Atsushi Nakamoto
 */
public class BorderPaneSample extends Application {

    /**
     * メインメソッド
     */
    public static void main(String[] args) {
        Application.launch(BorderPaneSample.class, args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("BorderPaneSample");
        BorderPane borderPane = new BorderPane();
        Scene scene = new Scene(borderPane, 320, 320, Color.WHITE);
        scene.getStylesheets().add("style.css");

        /* ****************************
         * TOP部分を構成 
         * ****************************/
        HBox topHBox = new HBox();
        topHBox.setAlignment(Pos.CENTER);
        topHBox.getStyleClass().add("background-blue");
        Text textTop = new Text("Top");
        textTop.setFill(Color.WHITE);
        topHBox.getChildren().add(textTop);
        borderPane.setTop(topHBox);
        
        /* ****************************
         * CENTER部分を構成 
         * ****************************/
        HBox centerHBox = new HBox();
        centerHBox.setAlignment(Pos.CENTER);
        centerHBox.setStyle("-fx-background-color: greenyellow;");
        Text textCenter = new Text("Center");
        centerHBox.getChildren().add(textCenter);
        borderPane.setCenter(centerHBox);

        /* ****************************
         * BOTTOM部分を構成 
         * ****************************/
        HBox bottomHBox = new HBox();
        bottomHBox.setAlignment(Pos.CENTER);
        Text textBottom = new Text("Bottom");
        bottomHBox.getStyleClass().add("background-red");
        bottomHBox.getChildren().add(textBottom);
        borderPane.setBottom(bottomHBox);
        
        /* ****************************
         * LEFT部分を構成 
         * ****************************/
        VBox leftVBox = new VBox();
        leftVBox.setAlignment(Pos.CENTER);
        leftVBox.getStyleClass().add("background-purple");
        Text textLeft = new Text("Left");
        textLeft.setFill(Color.WHITE);
        leftVBox.getChildren().add(textLeft);
        borderPane.setLeft(leftVBox);
        
        /* ****************************
         * RIGHT部分を構成 
         * ****************************/
        VBox rightVBox = new VBox();
        rightVBox.setAlignment(Pos.CENTER);
        rightVBox.getStyleClass().add("background-coral");
        Text textRight = new Text("Right");
        textRight.setFill(Color.WHITE);
        rightVBox.getChildren().add(textRight);
        borderPane.setRight(rightVBox);

        
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

前回のエントリで書いたVBox、HBoxにTextオブジェクトを入れて、
BorderPaneに配置しています。
配置の仕方は、生成したBorderPaneクラスのインスタンスに対して、
setXXXするだけです。
配置する位置によって、呼び出すsetterメソッドを切り替えてください。

・setTop：画面上部に配置する
・setBottom：画面下部に配置する
・setLeft：画面左に配置する
・setRight：画面右に配置する
・setCenter：画面中央に配置する

背景色の設定は、HBox、VBoxにそれらしいメソッドがなかったので、スタイルシートを使いました。
JavaFXは、スタイルシートが使えます。
ここで使用するスタイルシートはHTMLに使用するものではありません。
スタイルシートを適用することで、HTMLと同様に、表示を華やかにすることができるみたいです。

以下スタイルシートの説明になります。
今回はstyle.cssという外部ファイルを用意しました。

Sceneオブジェクトに対し、getStylesheets().add("style.css");
でスタイルシートの追加を行うことができます。

style.cssの中身は以下のとおりです。

.background-red { 
    -fx-background-color: red;
}

.background-blue {
    -fx-background-color: blue;
}

.background-purple {
    -fx-background-color: purple;
}

.background-coral {
    -fx-background-color: coral;
}

記述方法はHTMLに適用するCSSそのものです。
それぞれ背景色を設定する記述です。

今回はHBoxとVBoxのインスタンスに適用することでBorderPaneの
それぞれのエリアの境界がわかるよう色付けしました。

HBoxまたはVBoxクラスのインスタンスに対して、
getStyleClass().add("background-blue");
のようにすることで任意のスタイルを適用できます。

また、centerHBox.setStyle("-fx-background-color: greenyellow;");
のように、外部ファイルに設定していなくても、
setStyleメソッドを使用してスタイルを直接記述すれば適用することができます。

CSSの説明については以下あたりが参考になるかもしれません。
Redirecting