Java-GUI编程（part-1）

前言

核心开发技术：

• Swing，AWT

  缺点：

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

Why to learn

1. 可以写出自己心中想要的小工具
2. 工作中可能需要维护到Swing界面
3. 连接MVC架构，了解监听

组件

窗口，弹窗，面板，文本框等等…

分类：

• 直接使用（基本）

button，TextArea，Label

• 容器

  Container

  • Window：Frame，Dialog
  • Panel：Applet…

AWT

概念：

抽象的窗口工具

1. 包含了很多类和接口
2. 元素：窗口，按钮等等

Frame窗口

package com.bao.lesson1;

import java.awt.*;

//GUI的第一个界面
public class TestFrame {
    public static void main(String[] args) {
        //Frame，JDK,看源码
        Frame frame = new Frame("我的第一个Java图像界面窗口");
        //设置可见性 w h
        frame.setVisible(true);

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

        //设置颜色 Color类
        Color color = new Color(150, 150, 150);
        frame.setBackground(color);

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

        //有些游戏默认不可以拉伸窗口，设置大小固定
        frame.setResizable(false);
        
    }
}

GUI里的东西也是相当于一个个类对象的使用，充分证明java的万物皆对象

也可以把frame继承给自己写的类，进行封装：

package com.bao.lesson1;
import java.awt.*;
public class TestFrame02 {
    public static void main(String[] args) {
        //展示多个窗口 new
        MyFrame myFrame1 = new MyFrame(100, 100, 200, 200, Color.black);
        MyFrame myFrame2 = new MyFrame(100, 300, 200, 200, Color.blue);
        MyFrame myFrame3 = new MyFrame(300, 100, 200, 200, Color.gray);
        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));
        setBounds(x,y,w,h);
        setVisible(true);
        setBackground(color);
    }
}

总结：

无法点“×”进行窗口关闭，程序停止

解决方法：

加监听窗口关闭事件（下节细讲）

Panel（面板）

package com.bao.lesson2;

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 = new Panel();
        frame.setLayout(null);
        frame.setBounds(300,300,500,500);
        frame.setBackground(new Color(150, 150, 150));
        frame.setVisible(true);
        frame.add(panel);
        panel.setBackground(new Color(0x1F1FA8));
        panel.setBounds(50,50,400,400);
        //监听事件：监听窗口关闭事件 system.exit(0)
        //适配器模式：
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

补充：

1. panel面板不可以单独存在，可以看成一个空间
2. panel面板相对于存储它的容器进行定位

适配器模式：

选择监听窗口事件中的一个或多个事件，不需要全部都写

[!IMPORTANT]

在进行新内容学习时，可以ctrl+鼠标点击去查看java所内置的类的使用方法（阅读源码）

三种布局管理器

流式布局

Frame.setLayout(new FlowLayout( ))

风格：

从左到右排列，不够则调到下一行

package com.bao.lesson3;

import java.awt.*;

public class TestFlow {
    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.setSize(300,300);
        frame.setVisible(true);

        //设置流式布局
//        frame.setLayout(new FlowLayout());
//        frame.setLayout(new FlowLayout(FlowLayout.LEFT));
        frame.setLayout(new FlowLayout(FlowLayout.RIGHT));
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);
    }
}

东西南北中布局

Frame.setLayout(new BorderLayout)

package com.bao.lesson3;

import javax.swing.border.Border;
import java.awt.*;

public class TestBorder {
    public static void main(String[] args) {
        Frame frame = new Frame("东西南北中布局");
        frame.setVisible(true);
        frame.setSize(400,400);
        frame.setLayout(new BorderLayout());

        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.setLayout(new GridLayout(3,2))

package com.bao.lesson3;

import java.awt.*;

public class TestGrid {
    public static void main(String[] args) {
        Frame frame = new Frame("表格布局");

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

        Button button1 = new Button("btn1");
        Button button2 = new Button("btn2");
        Button button3 = new Button("btn3");
        Button button4 = new Button("btn4");
        Button button5 = new Button("btn5");
        Button button6 = new Button("btn6");

        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函数！ 默认用最优布局
    }
}

设置完表格布局后，组件会一行一行插入

总结布局步骤

1. 设置容器
2. 设置容器的布局方式
3. 往容器中add组件，可以重复以上步骤，实现布局的嵌套使用

总结

1. Frame是一个顶级窗口
2. panel无法单独显示，必须添加到某个容器中
3. 布局管理器：流式，东西南北中，表格
4. 基本属性：大小，定位，背景颜色，可见性，事件监听等等

本节小练习

完成如图的布局，最里面的组件都是button

代码：

package com.bao.lesson3;

import java.awt.*;

public class TestC {
    public static void main(String[] args) {
        Frame frame = new Frame();
        frame.setLayout(new GridLayout(2,1));

        frame.setVisible(true);
        frame.setSize(500, 500);
        frame.setLocation(200,200);
        frame.setBackground(new Color(150,150,150));

        Panel panel1 = new Panel(new BorderLayout());
        Panel panel2 = new Panel(new BorderLayout());
        Panel panel11 = new Panel(new GridLayout(2,1));
        Panel panel21 = new Panel(new GridLayout(2,2));

        //上面
        panel1.add(new Button("East-1"),BorderLayout.EAST);
        panel1.add(new Button("West-1"),BorderLayout.WEST);
        panel11.add(new Button("p11-btn-1"));
        panel11.add(new Button("p11-btn-2"));
        panel1.add(panel11,BorderLayout.CENTER);

        //下面
        panel2.add(new Button("East-2"),BorderLayout.EAST);
        panel2.add(new Button("West-2"),BorderLayout.WEST);
        for (int i = 0; i < 4; i++) {
             panel21.add(new Button("p21-btn-" + i));
        }
        panel2.add(panel21,BorderLayout.CENTER);

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

[!NOTE]

最好自己想出来或者花一段时间思考后再看代码，如果不会看完代码后自己再不看着敲一遍