JavaSE进阶：GUI编程

目录

1.GUI简介

2.AWT

1.AWT介绍

2.窗口和面板

3.布局管理器

4.事件监听

5.输入框

6.计算器及回顾

7.画笔

8.鼠标监听

9.窗口监听

10.键盘监听

3.Swing

1.窗口

2.弹窗

3.标签

4.面板

5.按钮

6.列表

7.文本框

4.贪吃蛇

---

1.GUI简介

GUI核心技术：Swing AWT

但并不流行，甚至快要被淘汰：

• 界面不美观
• 需要JRE环境

为什么我们还要学习？

1. 自娱自乐
2. 工作的时候，也可能需要维护到swing页面，概率极小
3. 了解MVC框架，了解监听

2.AWT

1.AWT介绍

AWT Abstract Windows Tools 抽象窗口工具

GUI Graphical User Interface 图形用户接口

1. 包含了许多类和接口
2. 元素：窗口，文本框，按钮
3. java.awt包

2.窗口和面板

窗口Frame

//GUI的第一个界面
public class TestFrame {
    public static void main(String[] args) {
        //使用时要学会点进去看源码
        Frame frame = new Frame("我的第一个Java图像界面");

        //需要设置可见性
        frame.setVisible(true);

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

        //设置背景颜色
        //new Color(1,1,1);//自定义颜色
        frame.setBackground(Color.BLACK);

        //弹出的初始位置，（0，0）在左上角
        frame.setLocation(200,200);

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

发现问题：程序无法关掉。方法：停止程序运行。

回顾封装：产生多个窗口

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.CYAN);
        MyFrame myFrame3 = new MyFrame(100, 300, 200, 200, Color.GREEN);
        MyFrame myFrame4 = new MyFrame(300, 300, 200, 200, Color.ORANGE);
    }
}

class MyFrame extends Frame {
    //可能存在多个窗口，我们需要一个计数器
    static int count = 0;

    public MyFrame(int x,int y,int w,int h,Color color){
        super("MyFrame"+(++count));

        setBounds(x, y, w, h);
        setVisible(true);
        setBackground(color);
    }
}

面板Panel

面板不能单独存在，在容器里面，可以看成是一个空间

下面的代码解决了关闭事件

//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(96, 255, 29, 255));

        //Panel设置坐标，相对于frame
        panel.setBounds(50,50,400,400);
        panel.setBackground(new Color(0, 82, 255));

        //放进frame
        frame.add(panel);
        frame.setVisible(true);

        //监听事件，监听窗口关闭事件 System.exit(0);
        //适配器模式 不去new WindowListener 实现太全部的接口
        //而是去继承它的一个子类，子类有默认的实现，我们只写我们需要的那个功能

        //这是AWT的解决方式，后面还有swing的解决方式
        frame.addWindowListener(new WindowAdapter() {
            //窗口点击关闭的时候需要做的事情
            @Override
            public void windowClosing(WindowEvent e) {
                //结束程序
                System.exit(0);
            }
        });

    }
}

3.布局管理器

• 三种布局
  • 流式布局
  • 东西南北中
  • 表格布局 Gird

流式布局

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(200,200);
        //添加按钮
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);

        frame.setVisible(true);
    }
}

东西南北中

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

        Button button1 = new Button("East");
        Button button2 = new Button("West");
        Button button3 = new Button("South");
        Button button4 = new Button("North");
        Button button5 = new Button("Center");

        frame.add(button1, BorderLayout.EAST);
        frame.add(button2,BorderLayout.WEST);
        frame.add(button3,BorderLayout.SOUTH);
        frame.add(button4,BorderLayout.NORTH);
        frame.add(button5,BorderLayout.CENTER);

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

    }
}

表格布局 Gird 

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

        Button button1 = new Button("1");
        Button button2 = new Button("2");
        Button button3 = new Button("3");
        Button button4 = new Button("4");
        Button button5 = new Button("5");
        Button button6 = new Button("6");

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

    }
}

布局练习

通过不同布局的嵌套我们可以设计出我们想要的布局，下面是一个练习

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

        //4个面板
        Panel panel1 = new Panel(new BorderLayout());
        Panel panel2 = new Panel(new GridLayout(2,1));
        Panel panel3 = new Panel(new BorderLayout());
        Panel panel4 = new Panel(new GridLayout(2,2));

        //上面
        panel1.add(new Button("East-1"),BorderLayout.EAST);
        panel1.add(new Button("East-2"),BorderLayout.WEST);
        panel2.add(new Button("p2-btn-1"));
        panel2.add(new Button("p2-btn-2"));
        panel1.add(panel2,BorderLayout.CENTER);//将表格布局放在东西南北中布局的中间

        //下面
        panel3.add(new Button("East-1"),BorderLayout.EAST);
        panel3.add(new Button("East-2"),BorderLayout.WEST);
        //中间的四个
        for (int i = 1; i <= 4; i++) {
            panel4.add(new Button("btn"+i));
        }
        panel3.add(panel4,BorderLayout.CENTER);

        frame.add(panel1);
        frame.add(panel3);
    }
}

总结

1. Frame是一个顶级窗口
2. Panel无法单独显示，必须添加到某个容器中。
3. 三种布局管理器（流式、东西南北中、表格）
4. 设置 大小，颜色，位置，可见性，监听

4.事件监听

事件监听

按下按钮打印一行字符串

public class TestAction {
    public static void main(String[] args) {
        //按下按钮，触发一些事件
        Frame frame = new Frame();
        Button button = new Button();
        //addActionListener()方法需要一个ActionListener，我们构建了一个MyActionListener类
        MyActionListener myActionListener = new MyActionListener();
        button.addActionListener(myActionListener);

        frame.add(button, BorderLayout.CENTER);
        frame.pack();
        windowClose(frame);//窗口可以关闭
        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");
    }
}

两个按钮，共享一个事件

public class TestAction02 {
    public static void main(String[] args) {
        //两个按钮实现同一个监听
        //开始    结束
        Frame frame = new Frame();

        Button button1 = new Button("start");
        Button button2 = new Button("stop");
		//可以显示地定义触发返回的命令
        //设置行为命令前button2参数为stop，设置后变更为button-2-stop
        button2.setActionCommand("button-2-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());
        //判断点击的按钮是不是start
        if(e.getActionCommand().equals("start")){
            System.out.println("开始");
        }else{
            System.out.println("停止");
        }
    }
}

5.输入框

TextField

public class TextField01 {
    public static void main(String[] args) {
        MyFrame myFrame = new MyFrame();
    }
}

class MyFrame extends Frame {
    public MyFrame() {
        //new TextArea();//多行文本
        TextField textField = new TextField();//单行文本
        add(textField);

        //监听这个文本框输入的文字
        MyActionListener myActionListener = new MyActionListener();
        //按下Enter 触发输入框的事件
        textField.addActionListener(myActionListener);
        //设置替换编码
        textField.setEchoChar('*');

        pack();
        setVisible(true);

    }

    class MyActionListener implements ActionListener {
        @Override
        public void actionPerformed(ActionEvent e) {
            //获得一些资源，返回的一个对象Object 监听谁就转为谁
            TextField field = (TextField) e.getSource();
            System.out.println(field.getText());//  获得输入框中的文本
            field.setText("");//Enter后清空输入框
        }
    }

}

6.计算器及回顾

实现一个简易的计算器，顺便回顾组合，内部类

组合是继承的另一种方式，OOP原则：组合大于继承

public A extends B{
    //继承
}
public A{
    public B b;
    //组合，耦合性降低
}

加法计算器

//简易计算器
public class Calculator {
    public static void main(String[] args) {
        new Calc();
    }
}
//计算器类
class Calc extends Frame{
    public Calc(){
        //三个文本框
        TextField textField1 = new TextField(10);//最多写多少字符
        TextField textField2 = new TextField(10);
        TextField textField3 = new TextField(20);//比前两个长

        //一个按钮
        Button button = new Button("=");
        button.addActionListener(new MyCalculatorListener(textField1,textField2,textField3));
        //一个标签 展示+
        Label label = new Label("+");

        //布局 流式
        setLayout(new FlowLayout());

        add(textField1);
        add(label);
        add(textField2);
        add(button);
        add(textField3);

        pack();
        setVisible(true);
    }
}

//监听器类
class MyCalculatorListener implements ActionListener {

    //获取三个变量
    private TextField field1,field2,field3;
    public MyCalculatorListener(TextField field1,TextField field2,TextField field3){
        this.field1 = field1;
        this.field2 = field2;
        this.field3 = field3;

    }

    @Override
    public void actionPerformed(ActionEvent e) {
        //获得加数和被加数
        int i1 = Integer.parseInt(field1.getText());
        int i2 = Integer.parseInt(field2.getText());
        //相加后，放到第三个框
        field3.setText(""+(i1+i2));//暴力拼接成字符串
        //清除前两个框
        field1.setText("");
        field2.setText("");

    }
}

优化

//简易计算器
public class Calculator {
    public static void main(String[] args) {
        new Calc().loadFrame();
    }
}
//计算器类
class Calc extends Frame{
    //属性
    TextField textField1,textField2,textField3;
    //方法
    public void loadFrame(){
        //三个文本框
        textField1 = new TextField(10);//最多写多少字符
        textField2 = new TextField(10);
        textField3 = new TextField(20);//比前两个长
        //一个按钮
        Button button = new Button("=");
        button.addActionListener(new MyCalculatorListener(this));
        //一个标签 展示+
        Label label = new Label("+");
        //布局 流式
        setLayout(new FlowLayout());

        add(textField1);
        add(label);
        add(textField2);
        add(button);
        add(textField3);

        pack();
        setVisible(true);
    }
}

//监听器类
class MyCalculato