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);
    }       
}

边缘布局BorderPane（root默认布局方式）

水平布局HBox

自定义布局

猜你喜欢