GUI编程

GUI编程

1.简介

• GUI的核心技术：Swing 和AMT（图形用户界面编程）
• 不流行的原因：
  • 1.因为界面不美观
  • 2.需要jre环境
• 为什么需要学习？
  • 1.可以写出自己心中想要的小工具
  • 2.工作时候，也可能需要维护到Swing界面，概率较小。
  • 了解MVC架构，了解监听！

2.AWT

2.1 Awt介绍

• 1.包含了很多类和接口（抽象的窗口工具）
• 2.元素：窗口、按钮、文本框
• 3.java.awt

2.2组件和容器

1. Frame

package com.jin.awt;

import java.awt.*;

//GUI的第一个界面
public class TestFrame {
    public static void main(String[] args) {
        //Frame  看源码
        Frame frame = new Frame("我的第一个Java图形界面窗口");
        //1.需要设置可见性
        frame.setVisible(true);
        //2.设置窗口大小
        frame.setSize(400,400);
        //3.设置背景颜色
        frame.setBackground(new Color(184, 30, 30));
        //4.弹出的初始位置
        frame.setLocation(200,200);
        //5.设置大小固定
        frame.setResizable(false);//不可改变

    }
}

• 存在问题：发现窗口关不掉，停止运行java程序。

回顾封装

package com.jin.awt;

import java.awt.*;

public class TestFrame2 {
    public static void main(String[] args) {
        //展示多个窗口
        MyFrame myFrame1 = new MyFrame(100, 100, 200, 200, Color.CYAN);
        MyFrame myFrame2 = new MyFrame(300, 100, 200, 200,Color.black);
        MyFrame myFrame3 = new MyFrame(100, 300, 200, 200, Color.YELLOW);
        MyFrame myFrame4 = new MyFrame(300, 300, 200, 200, Color.MAGENTA);
    }
    static 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);
        }
    }
}

2.面板

• 解决了窗口关闭的问题

package com.jin.awt;

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

//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(48, 140, 45));

        //Panel设置坐标，相对于frame
        panel.setBounds(50,50,400,400);
        panel.setBackground(new Color(184, 43, 35));

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

3.布局管理器

• 流式布局

  package com.jin.awt;
  
  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(200,200);
  
          //把按钮添加上去、
          frame.add(button1);
          frame.add(button2);
          frame.add(button3);
  
          frame.setVisible(true);
      }
  }
  

• 东西南北中

package com.jin.awt;

import java.awt.*;

//Border：边界  Layout布局   Test：测试  Center:中心
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 north = new Button("North");
        Button south = new Button("South");
        Button center = new Button("center");
        //添加按钮到合适的位置
        frame.add(east,BorderLayout.EAST);
        frame.add(west,BorderLayout.WEST);
        frame.add(north,BorderLayout.NORTH);
        frame.add(south,BorderLayout.SOUTH);
        frame.add(center,BorderLayout.CENTER);

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


    }
}

• 表格布局

package com.jin.awt;

import java.awt.*;

//Grid:表格
public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("TestGridLayout");

        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函数！布局自动选择最优布局

    }

}

练习：生成如下按钮

• 示意图

• 自己画的草图

package com.jin.awt;

import java.awt.*;
//Flow：流动的   Rows:行  Cols：列
public class TestFlowLayout {
    public static void main(String[] args) {
        Frame frame = new Frame();
        Panel panel1 = new Panel();
        Panel panel2 = new Panel();
        Panel panel3 = new Panel();
        Panel panel4 = new Panel();
        Panel panel5 = new Panel();

        frame.setBounds(400,300,400,300);
        panel1.setBounds(0,0,80,300);
        panel2.setBounds(80,0,240,150);
        panel3.setBounds(80,150,240,150);
        panel4.setBounds(320,0,80,300);


        //组件-按钮
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        panel1.setLayout(new GridLayout(2,1));
        panel1.add(button1);
        panel1.add(button2);

        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        panel2.setLayout(new GridLayout(2,1));
        panel2.add(button3);
        panel2.add(button4);

        Button button5 = new Button("button5");
        Button button6 = new Button("button6");
        Button button7 = new Button("button7");
        Button button8 = new Button("button8");
        panel3.setLayout(new GridLayout(2,2));
        panel3.add(button5);
        panel3.add(button6);
        panel3.add(button7);
        panel3.add(button8);

        Button button9 = new Button("button9");
        Button button10 = new Button("button10");
        panel4.setLayout(new GridLayout(2,1));
        panel4.add(button9);
        panel4.add(button10);

        frame.add(panel1);
        frame.add(panel2);
        frame.add(panel3);
        frame.add(panel4);
        frame.add(panel5);


        frame.setVisible(true);
    }
}

生成结果为

• 遇到的问题：需要定义第五个panel，不然panal4就会充满屏幕空白部分。

• 讲解后的代码

  package com.jin.awt;
  
  import javax.swing.plaf.basic.BasicArrowButton;
  import java.awt.*;
  import java.awt.event.WindowAdapter;
  import java.awt.event.WindowEvent;
  
  public class ExDemo {
      public static void main(String[] args) {
          Frame frame = new Frame();
          frame.setSize(400,300);
          frame.setLocation(0,0);
          frame.setLayout(new GridLayout(2,1));
          frame.setVisible(true);
  
  
          Panel p1 = new Panel(new BorderLayout());
          p1.add(new Button("East-1"),BorderLayout.EAST);
          p1.add(new Button("West-1"),BorderLayout.WEST);
          Panel p2 = new Panel(new GridLayout(2,1));
          p2.add(new Button("p2-1"));
          p2.add(new Button("p2-2"));
          p1.add(p2,BorderLayout.CENTER);
  
          Panel p3 = new Panel(new BorderLayout());
          p3.add(new Button("East-2"),BorderLayout.EAST);
          p3.add(new Button("West-2"),BorderLayout.WEST);
          Panel p4 = new Panel(new GridLayout(2,1));
          for (int i = 0; i < 4; i++) {
              p4.add(new Button("for-"+i));
          }
          p3.add(p4,BorderLayout.CENTER);
  
          frame.add(p1);
          frame.add(p3);
          frame.addWindowListener(new WindowAdapter() {
              @Override
              public void windowClosing(WindowEvent e) {
                 System.exit(1);
              }
          });
  
      }
  }
  

• 分析思路

• 在IDEA的输出结果为：