GUI学习笔记

2024-03-16 17:14:58

1、简介

Gui的核心技术:Swing ，AWT

这个技术将要被淘汰：1.因为界面不美观；2.需要jre环境！

为什么我们要学习？

  • 可以写出自己心中想要的一些工具
  • 工作时候，也可能需要维护到Swing界面，概率极小
  • 了解MVC架构，了解监听

2、AWT

2.1AWT介绍

1、包含了很多类和接口

2、元素：窗口、按钮、文本框

3、java.awt

GUI学习笔记

2.2组件和容器

2.2.1、Frame

package guitest;

import java.awt.*;
//GUI的第一个界面
public class TestFrame {
    public static void main(String[] args) {
        Frame frame=new Frame("我的第一个JAVA图像界面窗口");
        //需要设置可见性
        frame.setVisible(true);
        //设置窗口大小
        frame.setSize(400,400);
        //设置背景颜色
        frame.setBackground(new Color(76, 232, 242));
        //弹出的初始位置
        frame.setLocation(200,200);
        //设置大小固定
        frame.setResizable(false);

    }
}

GUI学习笔记

问题：发现窗口关闭不掉，停止JAVA程序

尝试回顾封装：

package guitest;

import java.awt.*;

public class TestFrame2 {
    public static void main(String[] args) {
        //展示多个窗口 new
        MyFrame myframe1=new MyFrame(100,100,200,200,Color.red);
        MyFrame myframe2=new MyFrame(300,100,200,200,Color.blue);
        MyFrame myframe3=new MyFrame(100,300,200,200,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);//设置可见性

    }
}

GUI学习笔记

2.2.2、面板panel

解决了关闭事件

package guitest;

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

//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(40,161,35));//设置颜色

        //panel设置坐标，相对于frame
        panel.setBounds(50,50,400,400);
        panel.setBackground(new Color(193,15,60));

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

        //监听事件，监听窗口关闭事件 System.exit(0)
        //适配器模式：
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                //结束程序
                System.exit(0);
            }
        });


    }
}

GUI学习笔记

2.2.3布局管理器

  • 流式布局
package guitest;

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

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

        //设置窗口监听
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

    }

}

GUI学习笔记

  • 东西南北中
package guitest;

import java.awt.*;

public class TestBorderLayout {
    public static void main(String[] args) {
        Frame fram=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");
        fram.add(east,BorderLayout.EAST);
        fram.add(west,BorderLayout.WEST);
        fram.add(south,BorderLayout.SOUTH);
        fram.add(north,BorderLayout.NORTH);
        fram.add(center,BorderLayout.CENTER);
        fram.setVisible(true);
        fram.setSize(200,200);
    }
}

GUI学习笔记

  • 表格布局
package guitest;

import java.awt.*;

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.setVisible(true);
        frame.pack();//JAVA函数，窗口大小自动填充
    }
}

GUI学习笔记

练习：

package guitest;

import java.awt.*;

public class ExDemo {
    public static void main(String[] args) {
        Frame fram=new Frame("布局管理器练习");

        fram.setLayout(new GridLayout(2,1));
        //四个面板
        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("botton"),BorderLayout.EAST);//上右按钮
        p1.add(new Button("button"),BorderLayout.WEST);//上左按钮
        p2.add(new Button("button"));//上中按钮
        p2.add(new Button("button"));//上中按钮
        p1.add(p2,BorderLayout.CENTER);//上中面板
        p4.add(new Button("button"));//下中按钮
        p4.add(new Button("button"));//下种按钮
        p4.add(new Button("button"));//下中按钮
        p4.add(new Button("button"));//下中按钮
        p3.add(new Button("button"),BorderLayout.WEST);//下左按钮
        p3.add(new Button("button"),BorderLayout.EAST);//下右按钮
        p3.add(p4,BorderLayout.CENTER);//下中面板
        fram.add(p1);//上面板
        fram.add(p3);//下面板
       fram.setSize(200,200);
        fram.setVisible(true);


    }
}

GUI学习笔记

总结：

1.Frame是一个*窗口

2.Panel无法直接显示，必须添加到某个容器中

3.布局管理器

  • 流式
  • 东西南北中
  • 表格

4.大小、定位、背景颜色、可见性、监听

2.2.4事件监听

很多个按钮共享一个事件监听

GUI学习笔记

GUI学习笔记

2.2.5输入框TextField监听

package guitest;

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class TextInput {
    public static void main(String[] args) {
        //启动
        MyFrame01 myFrame01=new MyFrame01();
    }
}
class MyFrame01 extends Frame{
    public  MyFrame01(){
        TextField textFild=new TextField();
        add(textFild);
        //监听这个文本框输入的文字
        MyActionListener2 myActionListener2=new MyActionListener2();
        textFild.addActionListener(myActionListener2);
        
        //设置替换编码
        textFild.setEchoChar('*');
        
        pack();
        setVisible(true);

    }
}

class MyActionListener2 implements ActionListener{

    @Override
    public void actionPerformed(ActionEvent e) {
     TextField field   =(TextField)e.getSource();//获得一些资源
        System.out.println(field.getText());//获取输入框中的文本
    }
}

GUI学习笔记

2.2.6简易计算器，组合+内部类回顾练习

package guitest;

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

//简易计算器
public class TestCalculat {
    public static void main(String[] args) {
      new  Calculator();

    }
}
 //计算器类
class Calculator extends Frame{
    public Calculator(){
        //3个文本框
       TextField num1= new TextField(10);
        TextField num2= new TextField(10);
        TextField num3= new TextField(10);
        //1个按钮
       Button button= new Button("=");
       button.addActionListener(new MycalculatorListener(num1,num2,num3));
       //1个标签
        Label label=new Label("+");
        setLayout(new FlowLayout());
        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);
        pack();
        setVisible(true);

    }
}
//监听器类
class MycalculatorListener implements ActionListener{
    //获取三个变量
    private TextField num1,num2,num3;
    public MycalculatorListener(TextField num1,TextField num2,TextField num3){
        this.num1=num1;
        this.num2=num2;
        this.num3=num3;
    }
    @Override
    public void actionPerformed(ActionEvent e) {
        //1。获得加数和被加数
       int n1= Integer.parseInt(num1.getText());
       int n2=Integer.parseInt(num2.getText());
       //2.将这个值加法运算后放到第三个框
       num3.setText(""+(n1+n2));
       //3清除前两个框
        num1.setText("");
        num2.setText("");

    }
}

面向对象写法：

package guitest;

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 TestCalculat {
    public static void main(String[] args) {
      new  Calculator();

    }
}
 //计算器类
class Calculator extends Frame{
     TextField num1,num2,num3;
    public Calculator(){

        //3个文本框
        num1= new TextField(10);
         num2= new TextField(10);
         num3= new TextField(10);
        //1个按钮
       Button button= new Button("=");
       button.addActionListener(new MycalculatorListener(this));
       //1个标签
        Label label=new Label("+");
        setLayout(new FlowLayout());
        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);
        pack();
        setVisible(true);
        addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

    }
}
//监听器类
class MycalculatorListener implements ActionListener{
    //获取计算器这个对象，在一个类中组合例外一个类
    Calculator calculator=null;
    public  MycalculatorListener(Calculator calculator){
        this.calculator=calculator;
    }
    @Override
    public void actionPerformed(ActionEvent e) {
        //1。获得加数和被加数
       int n1= Integer.parseInt(calculator.num1.getText());
       int n2=Integer.parseInt(calculator.num2.getText());
       //2.将这个值加法运算后放到第三个框
       calculator.num3.setText(""+(n1+n2));
       //3清除前两个框
        calculator.num1.setText("");
        calculator.num2.setText("");

    }
}

内部类实现：

package guitest;

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 TestCalculat {
    public static void main(String[] args) {
      new  Calculator();

    }
}
 //计算器类
class Calculator extends Frame{
     TextField num1,num2,num3;
    public Calculator(){

        //3个文本框
        num1= new TextField(10);
         num2= new TextField(10);
         num3= new TextField(10);
        //1个按钮
       Button button= new Button("=");
       button.addActionListener(new MycalculatorListener());
       //1个标签
        Label label=new Label("+");
        setLayout(new FlowLayout());
        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);
        pack();
        setVisible(true);
        addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

    }
     //监听器类
   private class MycalculatorListener implements ActionListener{

         @Override
         public void actionPerformed(ActionEvent e) {
             //1。获得加数和被加数
             int n1= Integer.parseInt(num1.getText());
             int n2=Integer.parseInt(num2.getText());
             //2.将这个值加法运算后放到第三个框
             num3.setText(""+(n1+n2));
             //3清除前两个框
             num1.setText("");
             num2.setText("");

         }
     }
}

GUI学习笔记

2.2.7画笔

package guitest;

import java.awt.*;

public class TestPaint {
    public static void main(String[] args) {
        new Mypaint().loadFram();

    }
}
class  Mypaint extends Frame{
    public void loadFram(){
        setBounds(200,200,600,500);
        setVisible(true);
    }

    @Override
    public void paint(Graphics g) {
        //画笔需要有颜色，画笔可以画画
        g.setColor(Color.red);//设置颜色
        //g.drawOval(100,100,100,100);//画一个圆距离窗口顶端：x=100，y=100
        g.fillOval(100,100,100,100);//画一个实心的圆
        g.setColor(Color.green);
        g.fillRect(150,200,200,200);//画一个矩形
        //养成习惯，画笔用完将它还原到最初的颜色（黑色）
    }
}

GUI学习笔记

2.2.8鼠标监听

画图：

package guitest;

import java.awt.*;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.util.ArrayList;
import java.util.Iterator;

//鼠标监听事件
public class TestMouseListener {

    public static void main(String[] args) {
        new MyFrame03("画图");

    }
}

    class MyFrame03 extends Frame {
        ArrayList points;
        //画面需要画笔，需要监听鼠标当前的位置，需要集合来存储位置
        public MyFrame03(String title) {
            super(title);
            setBounds(200, 200, 400, 300);
            //存鼠标点击的点
            points = new ArrayList<>();
            this.addMouseListener(new MyMouseListener());
            setVisible(true);
        }

        @Override
        public void paint(Graphics g) {
            //画画，监听鼠标的事件
            Iterator iterator = points.iterator();
            while (iterator.hasNext()) {
                Point point = (Point) iterator.next();
                g.fillOval(point.x, point.y, 10, 10);
            }

        }

        //添加一个点到界面上
        public void addPoint(Point point) {
            points.add(point);
        }

        private class MyMouseListener extends MouseAdapter {
            //鼠标 按下、弹起、按住不放
            @Override
            public void mousePressed(MouseEvent e) {
                MyFrame03 frame = (MyFrame03) e.getSource();
                //拿到鼠标点击的时候产生的点
               frame.addPoint (new Point(e.getX(), e.getY()));

               //每次点击鼠标都要重新画一次
                frame.repaint();
            }
        }
    }

GUI学习笔记

2.2.9窗口监听

package guitest;

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

public class TestWindow {
    public static void main(String[] args) {
        new WindowFrame();

    }
}
class WindowFrame extends Frame{
    public WindowFrame(){
        setBackground(Color.blue);
        setBounds(100,100,200,200);
        setVisible(true);
        addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);//正常退出
            }

        });

    }
}

2.2.10键盘监听

package guitest;

import java.awt.*;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

public class TestKeyListener {
    public static void main(String[] args) {
        new keyFrame();
    }
}
class keyFrame extends Frame{
   public keyFrame(){
       setBounds(1,2,300,400);
       setVisible(true);
       //设置键盘监听
       addKeyListener(new KeyAdapter() {
           @Override
           public void keyPressed(KeyEvent e) {
               //获取按下的键当前的码
               int keycode=e.getKeyCode();
               //判断按下的键是否为向下键
               if(keycode==KeyEvent.VK_UP){
                   System.out.println("你按下了上键");
               }
           }
       });
    }
}

GUI学习笔记

3、Swing

3.1窗口

package Swings;

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

public class JFrameDemo {
    //init()初始化
    public  void init(){
        JFrame frame=new JFrame("这是一个JFframe窗口");
        frame.setVisible(true);
        frame.setBounds(100,100,200,200);
       //获得容器，设置颜色
        frame.getContentPane().setBackground(Color.pink);
        //设置文字JLabel
        JLabel label=new JLabel("欢迎来到JFrame");
        //设置文字水平居中
        label.setHorizontalAlignment(SwingConstants.CENTER);
        frame.add(label);
        //关闭事件
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
    public static void main(String[] args) {
        new JFrameDemo().init();

    }
}

GUI学习笔记

3.2弹窗

package Swings;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class DialogDemo extends JFrame {
    public DialogDemo(){
        this.setVisible(true);
        this.setSize(700,500);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        //JFrame放东西   容器
        Container container=this.getContentPane();
        //绝对布局
        container.setLayout(null);
        //按钮
        JButton button=new JButton("点击弹出一个对话框");
        button.setBounds(30,30,200,50);//设置按钮的位置
        container.add(button);
        //点击这个按钮的时候弹出一个弹窗
        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                //弹窗
                new MyDialogDemo();
            }
        });

    }
    public static void main(String[] args) {
        new DialogDemo();
    }

}
class MyDialogDemo extends JDialog{
    public MyDialogDemo(){
        this.setVisible(true);
        this.setBounds(100,100,400,200);
       this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
       Container container= this.getContentPane();
       //container.setLayout(null);

       container.add(new JLabel("游戏规则说明如下：---"));
    }
}

GUI学习笔记

3.3标签

Label

new Label("xxx")
package Swings;

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

//图标需要实现类，Frame继承
public class IconDemo extends JFrame implements Icon {
    private  int width;
    private  int height;
    public IconDemo(){}//无参构造
    public IconDemo(int width,int height){
        this.width=width;
        this.height=height;
    }

    public void init(){
        IconDemo iconDemo=new IconDemo(15,15);
        //图标可以放在标签上也可以放在按钮上
       JLabel label= new JLabel("icontest",iconDemo,SwingConstants.CENTER);
        Container container=getContentPane();
        container.add(label);
        this.setVisible(true);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
    public static void main(String[] args) {
        new IconDemo().init();
    }

    @Override
    public void paintIcon(Component c, Graphics g, int x, int y) {
        g.fillOval(x,y,width,height);
    }

    @Override
    public int getIconWidth() {
        return this.width;
    }

    @Override
    public int getIconHeight() {
        return this.height;
    }
}

GUI学习笔记

图片作为图标

package Swings;

import javax.swing.*;
import java.awt.*;
import java.net.URL;

public class ImageIconDemo extends JFrame {
    public ImageIconDemo(){
        JLabel label=new JLabel("ImageIcon");
       URL url= ImageIconDemo.class.getResource("pt.png");
       ImageIcon imageicon=new ImageIcon(url);
       label.setIcon(imageicon);
       label.setHorizontalAlignment(SwingConstants.CENTER);

       Container container=getContentPane();
       container.add(label);
       setVisible(true);
       setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
       setBounds(100,100,200,200);
    }
    public static void main(String[] args) {
        new ImageIconDemo();
    }
}

3.4普通面板、滚动面板

JPanel(普通面板）   JScrollPanel（可以实现滚动条的面板）

GUI学习笔记

3.5按钮、单选框、复选框

图片按钮

GUI学习笔记

  • 单选按钮

GUI学习笔记

  • 复选按钮

GUI学习笔记

3.6下拉框、列表框

  • 下拉框

GUI学习笔记

  • 列表框

GUI学习笔记

3.7文本框、密码框、文本域

  • 文本框

GUI学习笔记

  • 密码框

GUI学习笔记

  • 文本域

GUI学习笔记

 

 

 

 

 

 

 

 

上一篇：1.java的GUI编程01-AWT


下一篇：【学习笔记】| Java GUI界面