JavaGUI 04 ③种布局

2.3 布局管理器

---

• FlowLayout 流式布局（左右、居中 布局）
• BorderLayout 边界布局（东西南北中 布局）
• 表格布局（更加规范和整齐）

ALT+回车 可以自动补齐

---

2.3.1 FlowLayout 流式布局

流式布局 默认 是 CENTER 居中的，也就是说 所有受到该布局影响的组件或容器，都是 居中的。

package com.muquanyu.lesson01;

import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class TestFlowLayout {
    public static void main(String[] args) {
        Frame frame = new Frame();
        frame.setSize(500,500);

        //组件-按钮
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");

        //设置为流式布局方式
        //默认是 CENTER 居中的
        frame.setLayout(new FlowLayout());
        
        Panel panel = new Panel();
        panel.setLayout(new FlowLayout(FlowLayout.RIGHT));
        //受到 frame 的 Layout 影响，panel 大小不会改变，而是自适应
        panel.setSize(400,400);
        panel.setBackground(Color.red);
        panel.add(new Button("panel button1"));
        panel.add(new Button("panel button2"));

        frame.setVisible(true);

        //将按钮添加
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);
        frame.add(panel);

        //添加监听事件（关闭事件）
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                super.windowClosing(e);
                System.exit(0);
            }
        });
    }
}

你会发现 受到 frame 的 Layout 布局影响，panel 的大小居然没有改变，而是 选择了 自适应的大小。

源代码：写着 三种 对齐方式，也就是FlowLayout 是有三种对齐方式。

//这个是 左边对齐
frame.setLayout(new FlowLayout(FlowLayout.LEFT));

---

2.3.2 TestBorderLayout

package com.muquanyu.lesson01;

import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class TestBorderLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("边界布局");

        Button east = new Button("East");
        Button west = new Button("West");
        Button south = new Button("South");
        Button north = new Button("North");
        Button c = new Button("Center");

//先进行声明，说我们要用 这个 BorderLayout 布局了
        frame.setLayout(new BorderLayout());
        //然后把组件 添加到 BorderLayout.东西南北中 各个区域！
        frame.add(east,BorderLayout.EAST);
        frame.add(west,BorderLayout.WEST);
        frame.add(south,BorderLayout.SOUTH);
        frame.add(north,BorderLayout.NORTH);
        frame.add(north,BorderLayout.CENTER);

        frame.setSize(400,400);
        frame.setVisible(true);

        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                super.windowClosing(e);
                System.exit(0);
            }
        });
    }
}

容器.add(组件,布局区域) // add 这个方法 是可以把 组件添加到 固定区域的。

---

2.3.3 GridLayout 表格布局

表格布局 有四个参数：

1. rows ： 行数
2. cols ： 列数
3. hgap ： 水平间隙
4. vgap ： 垂直间隙

GridLayout 会根据这四个参数，用组件 来进行表格的填充！这就是 表格布局！
切记：它是按照 从上到下，从左到右 的顺序 对着每个单元格 进行填充的！并不是没有规则！

package com.muquanyu.lesson01;

import java.awt.*;

public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame();

        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        Button button5 = new Button("button5");
        Button button6 = new Button("button6");

        frame.setLayout(new GridLayout(3,2));

        frame.add(button1);
        frame.add(button2);
        frame.add(button3);
        frame.add(button4);
        frame.add(button5);
        frame.add(button6);

        //Java 的方法！自动选择最优布局。
        frame.pack();
        frame.setVisible(true);

    }
}

你会发现，我们的这个 表格是 三行两列，所以 添加的 组件会按照 从上到下，从左到右的顺序，依次填充到 单元格里面！

---

2.3.4 布局练习

上述的 布局，是如何 弄出来的呢？

其实我们很明显的能看出来，在外面的大框架下，里面也类似于拼接的形式，所以里面肯定也具有着小框架。

该练习，可能会借助 小容器 “panel” 为此提供两种解法：

• 解法①

package com.muquanyu.lesson01;

import java.awt.*;

public class Main {
    public static void main(String[] args) {
        Frame frame = new Frame();

        Button bth1 = new Button("bth1");
        Button bth2 = new Button("bth2");
        Button bth3 = new Button("bth3");
        Button bth4 = new Button("bth4");
        Button bth5 = new Button("bth5");
        Button bth6 = new Button("bth6");
        Button bth7 = new Button("bth7");
        Button bth8 = new Button("bth8");
        Button bth9 = new Button("bth9");
        Button bth10 = new Button("bth10");

        frame.setLayout(new GridLayout(2, 3));
        Panel panel1 = new Panel(new GridLayout(2, 1));
        Panel panel2 = new Panel(new GridLayout(2, 2));
        frame.add(bth1);
        frame.add(panel1);
        panel1.add(bth2);
        panel1.add(bth3);
        frame.add(bth4);
        frame.add(bth5);
        frame.add(panel2);
        panel2.add(bth6);
        panel2.add(bth7);
        panel2.add(bth8);
        panel2.add(bth9);
        frame.add(bth10);
        frame.setVisible(true);
    }
}

该解法完全采用 GridLayout 填充，表面上 看不出 拼接的痕迹。构思也及其简单。

• 解法②

package com.muquanyu.lesson01;

import java.awt.*;

public class MainII {
    public static void main(String[] args) {
        Frame f = new Frame();
        f.setLayout(new GridLayout(2,1));

        //四个面板
        Panel p1 = new Panel(new BorderLayout());
        Panel p2 = new Panel(new BorderLayout());
        Panel p3 = new Panel(new GridLayout(2,1));
        Panel p4 = new Panel(new GridLayout(2,2));

        //十个按钮
        Button bth1 = new Button("bth1");
        Button bth2 = new Button("bth2");
        Button bth3 = new Button("bth3");
        Button bth4 = new Button("bth4");
        Button bth5 = new Button("bth5");
        Button bth6 = new Button("bth6");
        Button bth7 = new Button("bth7");
        Button bth8 = new Button("bth8");
        Button bth9 = new Button("bth9");
        Button bth10 = new Button("bth10");


        f.add(p1);
        f.add(p2);
        p1.add(bth1,BorderLayout.WEST);
        p1.add(p3,BorderLayout.CENTER);
        p3.add(bth2);
        p3.add(bth3);
        p1.add(bth4,BorderLayout.EAST);
        p2.add(bth5,BorderLayout.WEST);
        p2.add(p4,BorderLayout.CENTER);
        p4.add(bth6);
        p4.add(bth7);
        p4.add(bth8);
        p4.add(bth9);
        p2.add(bth10,BorderLayout.EAST);

        f.setVisible(true);

    }
}

该方法 采用了 BorderLayout 与 GridLayout 的联用，能看出明显的 拼接痕迹。