前言：

本文内容：GUI编程简介、AWT介绍、第一个Frame窗口、Panel面板讲解、三种布局管理器、练习讲解及小结

推荐免费JavaGUI入门视频：【狂神说Java】GUI编程入门到游戏实战_哔哩哔哩_bilibili

GUI编程简介

该怎么学？

  • 这是什么？
  • 它怎么玩？
  • 该如何去使用

组件

  • 窗口
  • 弹窗
  • 面板
  • 文本框
  • 列表框
  • 按钮
  • 图片
  • 监听事件
  • 鼠标
  • 键盘事件

简介

  • GUI的核心技术：Swing AWT,因为界面不美观，需要jre环境。

  • 为什么我们要学习：

    • 写出一些想要的小工具。
    • 工作时候可能需要维护swing，但概率很小
    • 了解MVC架构，了解监听！

AWT介绍

AWT

  1. Awt介绍：包含了很多类和接口！GUI
  2. 元素：窗口，按钮，文本框。
  3. java.awt包

组件和容器

fWKnne.png

第一个Frame窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.jokerdig.lesson1;

import java.awt.*;

/**
 * @author Joker大雄
 * @data 2021/8/16 - 16:01
 **/
//GUI的第一个界面
public class TestFrame {
    public static void main(String[] args) {
        //Frame
        Frame frame=new Frame("我的第一个Java图像界面窗口");
        //需要设置可见性
        frame.setVisible(true);
        //设置窗口大小
        frame.setSize(400,400);
        //设置背景颜色
        frame.setBackground(new Color(14, 14, 14));
        //弹出初始位置
        frame.setLocation(300,300);
        //设置大小固定
        frame.setResizable(false);
    }

}

尝试封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//窗口封装
public class TestFrame1 {
    public static void main(String[] args) {
        //展示多个窗口
        new MyFrame(300,300,300,400, Color.BLUE);
        new MyFrame(600,300,300,400, Color.YELLOW);
        new MyFrame(300,600,300,400, Color.BLACK);
        new MyFrame(600,600,300,400, Color.PINK);
    }
}
//窗口类
class MyFrame extends Frame{

    static int id=0;//可能有多个窗口
    public MyFrame(int x,int y,int w,int h,Color color){
        super("MyFrame"+(++id));
        setBackground(color);
        setBounds(x,y,w,h);
        setVisible(true);
    }
}

问题：发现窗口无法关闭

Panel面板讲解

解决窗口无法关闭：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package com.jokerdig.lesson1;

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

/**
 * @author Joker大雄
 * @data 2021/8/16 - 16:21
 **/
//panel面板
public class TestPanel {
    public static void main(String[] args) {
        Frame frame = new Frame();
        //布局概念
       Panel panel= new Panel();
        //设置布局
        frame.setLayout(null);
        //坐标
        frame.setBounds(300,300,500,500);
        frame.setBackground(new Color(2,2,2));
        //panel设置坐标小对于frame
        panel.setBounds(50,60,400,400);
        panel.setBackground(new Color(149, 57, 57));
        //添加面板
        frame.add(panel);
        frame.setVisible(true);
        //监听事件 关闭窗口
        //适配器模式
        frame.addWindowListener(new WindowAdapter() {

            @Override
            public void windowClosing(WindowEvent e) {
              //结束程序
                System.exit(0);
            }
        }); 
    }
}

三种布局管理器

  • 流式布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    package com.jokerdig.lesson1;

    import java.awt.*;

    /**
     * @author Joker大雄
     * @data 2021/8/16 - 16:36
     **/
    //流式布局
    public class TestFlowLayout {
        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");
            //设置流式布局
            //frame.setLayout(new FlowLayout());
            frame.setLayout(new FlowLayout(FlowLayout.LEFT));

            frame.setSize(200,200);

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

            frame.setVisible(true);
        }
    }

  • 东南西北中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    package com.jokerdig.lesson1;

    import java.awt.*;

    /**
     * @author Joker大雄
     * @data 2021/8/16 - 16:42
     **/
    //东西南北中布局
    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 center = new Button("Center");

            frame.add(east,BorderLayout.EAST);
            frame.add(west,BorderLayout.WEST);
            frame.add(south,BorderLayout.SOUTH);
            frame.add(north,BorderLayout.NORTH);
            frame.add(center,BorderLayout.CENTER);

            frame.setSize(200,200);
            frame.setVisible(true);
        }
    }

  • 表格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package com.jokerdig.lesson1;

import java.awt.*;

/**
 * @author Joker大雄
 * @data 2021/8/16 - 16:47
 **/
//表格布局
public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("表格布局");

        Button btn1 = new Button("btn1");
        Button btn2 = new Button("btn2");
        Button btn3 = new Button("btn3");
        Button btn4= new Button("btn4");
        Button btn5 = new Button("btn5");
        Button btn6 = new Button("btn6");

        frame.setLayout(new GridLayout(3,2));
        frame.add(btn1);
        frame.add(btn2);
        frame.add(btn3);
        frame.add(btn4);
        frame.add(btn5);
        frame.add(btn6);

        frame.pack();//java函数，自动最优
        frame.setVisible(true);
    }
}

练习讲解及总结

练习：

fWcKts.png

效果：

fWcA6f.png

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
package com.jokerdig.lesson1;

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

/**
 * @author Joker大雄
 * @data 2021/8/16 - 16:54
 **/
public class Demo {
    public static void main(String[] args) {
        //总布局
        Frame frame = new Frame("练习");
        frame.setLayout(new GridLayout(2,1));
        frame.setSize(400,300);
        frame.setLocation(300,400);
        frame.setBackground(new Color(1,1,1));
        frame.setVisible(true);
        //4个面板
        Panel p1 = new Panel(new BorderLayout());
        Panel p2 = new Panel(new GridLayout(2,1));
        Panel p3 = new Panel(new BorderLayout());
        Panel p4 = new Panel(new GridLayout(2,2));

        //第一个面板
        p1.add(new Button("East-1"),BorderLayout.EAST);
        p1.add(new Button("West-2"),BorderLayout.WEST);
        //第二个面板
        p2.add(new Button("2-btn-1"));
        p2.add(new Button("2-btn-2"));

        //p2放到p1中间
        p1.add(p2,BorderLayout.CENTER);


        //第三个面板
        p3.add(new Button("East-3"),BorderLayout.EAST);
        p3.add(new Button("West-4"),BorderLayout.WEST);

        //第四个面板
        for (int i = 1; i <= 4; i++) {
            p4.add(new Button("for-"+i));
        }
        //p4放到p3中
        p3.add(p4,BorderLayout.CENTER);

        //将面板放入frame
        frame.add(p1);
        frame.add(p3,BorderLayout.SOUTH);

        //结束监听
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                //结束
                System.exit(0);
            }
        });
    }
}

总结：

  • Frame是一个顶级窗口。

  • Panel无法单独显示，必须添加到某个容器中。

  • 布局管理器：

    • 流式布局(FlowLayout)
    • 东西南北中(BorderLayout)
    • 表格布局(GridLayout)

  • 大小，定位，背景颜色，可见性，监听。