GUI

GUI编程

组件:

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

1、简介

GUI的核心技术: swing 、AWT

  • 现在很少使用的原因

    1. 界面不美观
    2. 需要jre环境

  • 为什么还要学习？

    1. GUI是MVC框架的基础，可以了解MVC，了解监听
    2. 可以写一些自己想要的小工具
    3. 以后可能有极小的概率需要去维护swing界面

2、AWT

2.1、AWT介绍

  1. 包含很多类和接口，可以通过查看源码去了解
  2. 元素：窗口、按钮、文本框…
  3. java.awt
    GUI

2.2、组件与容器

1、Frame

  • 创建一个弹窗
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import java.awt.*;

public class TestFrame {
    public static void main(String[] args) {
        //看源码
        Frame frame = new Frame("我的第一个窗口");

        //可见性
        frame.setVisible(true);

        //窗口大小
        frame.setSize(400,400);

        //背景颜色
        frame.setBackground(Color.pink);

        //弹出初始位置
        frame.setLocation(200,200);

        //大小固定
        frame.setResizable(false);
    }
}

效果图：
GUI

  • 创建多个弹窗
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import java.awt.*;

public class TestFrame2 {
    public static void main(String[] args) {
        MyFrame myFrame1 = new MyFrame(100,100,200,200,Color.blue);
        MyFrame myFrame2 = new MyFrame(300,100,200,200,Color.red);
        MyFrame myFrame3 = new MyFrame(100,300,200,200,Color.pink);
        MyFrame myFrame4 = new MyFrame(300,300,200,200,Color.green);
    }
}

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

效果图：
GUI

注：发现窗口关不掉，只有停止Java程序才能将其关闭

2、面板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
import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;


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

        //Panel 可以看成一个空间。但是不能单独存在
        Panel panel = new Panel();

        //设置布局
        frame.setLayout(null);

        //坐标
        frame.setBounds(300,300,500,500);
        frame.setBackground(Color.pink);

        //Panel设置坐标，相对于Frame
        panel.setBounds(50,50,400,400);
        panel.setBackground(Color.green);

        frame.add(panel);

        frame.setVisible(true);

        //监听事件，监听窗口关闭事件
        frame.addWindowFocusListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

效果图：
GUI

3、布局管理器

流式布局

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
import java.awt.*;

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.setLayout(new FlowLayout(FlowLayout.RIGHT)); //设置向右

        //设置窗口大小
        frame.setSize(400,400);

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

        frame.setVisible(true);
    }
}

效果图：
GUI

东南西北中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import java.awt.*;

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

        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.setVisible(true);
        frame.setSize(300,300);
    }
}

效果图：
GUI

表格式布局

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
import java.awt.*;

public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("TestGridLayout");
        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);

        frame.pack(); //Java函数！
        frame.setVisible(true);
    }
}

效果图：
GUI

小题一道

通过对三种布局的使用，使其实现如下图效果：
GUI

分析：
首先将该图分为上下两个面板

再将上面板分为左右两个按钮和中间一个面板，其中中间面板可以采用一列两行的表格式布局或者采用上下东南西北中布局中的西东

再将下面板分为左右两个按钮和中间面板，将中间面板采用表格式布局

  • 参考答案
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
import java.awt.*;

public class ExDemo {
    public static void main(String[] args) {
        Frame frame = new Frame();
        frame.setVisible(true);
        frame.setBackground(Color.cyan);
        frame.setLocation(600,600);
        frame.setSize(600,600);
        frame.setLayout(new GridLayout(2,1));

        //p1为上面板
        Panel p1 = new Panel(new BorderLayout());
        //p2为p1中的中间面板-表格式布局
        Panel p2 = new Panel(new GridLayout(2,1));
        //p3为下面板
        Panel p3 = new Panel(new BorderLayout());
        //p4为下面板的中间面板
        Panel p4 = new Panel(new GridLayout(2,2));

        //利用东南西北中布局设置
        p1.add(new Button("East-1"), BorderLayout.EAST);
        p1.add(new Button("West-1"), BorderLayout.WEST);

        p2.add(new Button("p2-btu-1"));
        p2.add(new Button("p2-btu-2"));
        p1.add(p2, BorderLayout.CENTER);

        p3.add(new Button("East-2"), BorderLayout.EAST);
        p3.add(new Button("West-2"), BorderLayout.WEST);

        for (int i = 0; i < 4; i++) {
            p4.add(new Button("for-"+i));
        }

        p3.add(p4, BorderLayout.CENTER);

        frame.add(p1);
        frame.add(p3);
    }
}

效果图：
GUI

4、事件监听

事件监听：当某个事情发生的时候，干什么？

写一个事件监听-代码实现

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
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class TestActionEvent {
    public static void main(String[] args) {
        //点击按钮触发一些事件
        Frame frame = new Frame();
        Button button = new Button();

        //因为addActionListener()需要一个ActionListener，则构造一个ActionListener
        MyActionListener myActionListener = new MyActionListener();
        button.addActionListener(myActionListener);

        frame.add(button, BorderLayout.CENTER);
        frame.pack();
        frame.setVisible(true);

    }

    //关闭窗体事件
    private static void windowClose(Frame frame){
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}
class MyActionListener implements ActionListener{

    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("aaa");
    }
}

4.1、多个按钮，共享一个事件

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
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class TestActionTwo {
    public static void main(String[] args) {

        //两个按钮  实现同一个监听
        // 开始  停止
        Frame frame = new Frame("开始-停止");
        Button button1 = new Button("start");
        Button button2 = new Button("stop");

        //可以显示的定义触发会返回的命令，如果不显示定义，则会走默认的值！
        //可以多个按钮只写一个监听类
        button2.setActionCommand("button2-stop");

        MyMonitor myMonitor = new MyMonitor();

        button1.addActionListener(myMonitor);
        button2.addActionListener(myMonitor);

        frame.add(button1, BorderLayout.NORTH);
        frame.add(button2, BorderLayout.SOUTH);

        frame.pack();
        frame.setVisible(true);


    }
}

class MyMonitor implements ActionListener{

    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("按钮被点击：msg=>" + e.getActionCommand());
    }
}