javaFx（4）佈局

邊緣佈局BorderPane（root默認佈局方式）

幾個參數：
top: Pos.TOP_LEFT
bottom: Pos.BOTTOM_LEFT
left: Pos.TOP_LEFT
right: Pos.TOP_RIGHT
center: Pos.CENTER

幾個主要的方法：
類似這樣設置上下左右中的控件

BorderPane root = new BorderPane();
Button but1 = new Button("上");
Button but2 = new Button("下");
Button but3 = new Button("左");
Button but4 = new Button("右");
Button but5 = new Button("中");

root.setTop(but1);
root.setBottom(but2);
root.setLeft(but3);
root.setRight(but4);
root.setCenter(but5);

水平佈局HBox

效果示例

package application;



import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            // 創建HBox佈局
            HBox hbox = new HBox();
            // 設置對齊方式爲居中
            hbox.setAlignment(Pos.CENTER);
            // 設置填充尺寸爲10
            hbox.setPadding(new Insets(10));

            TextField textField = new TextField();
            Button select = new Button("選擇文件");
            Button upload = new Button("開始上傳");

            // 添加控件，傳入不定參數
            hbox.getChildren().addAll(textField, select, upload);

            // 設置水平增長控件爲文本控件,並且一直增長
            HBox.setHgrow(textField, Priority.ALWAYS);

            Scene scene = new Scene(hbox,400,40);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

佈局設置

package application;



import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;


public class Main extends Application {
    Button a = new Button("中國");
    Button b = new Button("China");
    Button c = new Button("中華人民共和國");

    @Override
    public void start(Stage primaryStage) {
        try {
            // 創建HBox佈局
            HBox hbox = new HBox();

            // 子控件的顯示由佈局管理器決定
            Button b1 = new Button("中國");
            Button b2 = new Button("China");
            Button b3 = new Button("中華人民共和國");


            // 下面3個參數min，max，pref爲佈局容器顯示時的參考參數
            b1.setMinWidth(10);  // 設置最小寬度
            b1.setMaxWidth(400); // 設置最大寬度
            b1.setPrefWidth(200);// 設置最佳寬度

            hbox.getChildren().addAll(b1,b2,b3);


            /////////////////////////////
//          填充 Padding  : 子控件(與父級)的邊距
//          間距 Spacing : 各個子控件之間的間距
//          對齊 Alignment: 靠左、靠右、居中 ..

//          1填充、間距、對齊
            hbox.setPadding(new Insets(10));
            //hbox.setPadding(new Insets(10,20,30,40)); // 上右下左

            hbox.setSpacing(20);

            hbox.setAlignment(Pos.CENTER);

//          2 增長優先
            HBox.setHgrow( b1, Priority.ALWAYS);

//          3 精確佈局

            // 匿名內部類寫法
            HBox h = new HBox() {

                @Override
                protected void layoutChildren() {
                    // 如果完全自己計算佈局，就不需要調用super
                    super.layoutChildren();

                    // 自定義佈局
                    double width = getWidth();
                    double height = getHeight();

                    // 計算每個控件的寬度
                    double aa = 300;
                    double bb = (width - aa) * 0.5;
                    double cc = width - aa - bb;

                    // 依次定位: 左上角座標x,y / 長、寬
                    double x = 0;
                    a.resizeRelocate(x, 0, aa, height);
                    x += aa;
                    b.resizeRelocate(x, 0, bb, height);
                    x += bb;
                    c.resizeRelocate(x, 0, cc, height);
                }

            };
            // 派生類寫法
            MyHBox my= new MyHBox();
            my.getChildren().addAll(a,b,c);

            Scene scene = new Scene(my,600,60);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    // 派生:精確佈局
    class MyHBox extends HBox{
        @Override
        protected void layoutChildren(){
            // 如果完全自己計算佈局，就不需要調用super
            super.layoutChildren();

            // 自定義佈局
            double width = getWidth();
            double height = getHeight();

            // 計算每個控件的寬度
            double aa = 300;
            double bb = (width - aa) * 0.5;
            double cc = width - aa - bb;

            // 依次定位: 左上角座標x,y / 長、寬
            double x = 0;
            a.resizeRelocate(x, 0, aa, height);
            x += aa;
            b.resizeRelocate(x, 0, bb, height);
            x += bb;
            c.resizeRelocate(x, 0, cc, height);
        }   

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

自定義佈局

我們可以看到BorderPane是繼承於Pand
我們可以寫一個類繼承與Pand,重寫LayoutChildren方法
實現自定義容器

例：實現控件爲圖片控件大小，實際大小由外部佈局決定

package application;

import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;

public class MyImagePane extends Pane
{
    @Override
    protected void layoutChildren()
    {
        if(getChildren().size()==0) return;

        double w = getWidth();
        double h = getHeight();

        // 對ImageView進行擺放，使其適應父窗口
        ImageView imageView = (ImageView)getChildren().get(0);
        imageView.resizeRelocate(0, 0, w, h);
        imageView.setFitWidth(w);
        imageView.setFitHeight(h);

        // 設置適應比例
        imageView.setPreserveRatio(true);
    }       
}

更多佈局
官方教材:
https://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm#sthref9