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() {
    @Overridepublic 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() {
    @Overridepublic void windowClosing(WindowEvent e) {
    super.windowClosing(e);System.exit(0);}});}
}

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

2.3.3 GridLayout 表格布局

表格布局有四个参数：

rows ：行数

cols ：列数

hgap ：水平间隙

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 的联用，能看出明显的拼接痕迹。
在这里插入图片描述