前言:

本文内容: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)
  • 大小,定位,背景颜色,可见性,监听。