GUI-基础 布局管理器

GUI编程

介绍

GUI：图形用户界面

1. GUI核心技术：Swing AWT

2. 不流行原因：界面不美观，需要jre环境

3. 学习目的：- 实现自己心中想的一些工具

   ​ - 维护Swing界面

   ​ - 了解监听器，了解MVC架构

AWT（底层实现）

介绍

1. AWT:抽象的窗口工具，包含了很多的类和接口

2. 元素：窗口，按钮，文本框

3. 关于AWT要了解和学习的一些类：

组件和容器

Frame

public class Test {
    public static void main(String[] args) {
        //new 一个窗口
        Frame fram=new Frame("第一个GUI窗口");
        //设置可见性
        fram.setVisible(true);
        //设置窗口大小
        fram.setSize(400,400);
        //设置颜色到背景
        Color blue=new Color(86, 227, 200);//三个参数:r g b  四个参数：r g b alpha(透明度)
        fram.setBackground(blue);
        //弹出的初始位置
        //（0，0）在左上角
        fram.setLocation(0,0);
        //设置大小固定,不能拉伸
        fram.setResizable(false);
        
    }
}

//此时窗口是不能关闭的

= 封装基本格式，弹出多个窗口=

public class Some {
    public static void main(String[] args) {
        //弹出多个窗口
        Color color=new Color(211,100,1);
        MyFrame Frame1=new MyFrame(100,100,320,400,color);
        MyFrame Frame2=new MyFrame(420,100,320,400,color);
        MyFrame Frame3=new MyFrame(100,500,320,400,color);
        MyFrame Frame4=new MyFrame(420,500,320,400,color);
        MyFrame Frame5=new MyFrame(740,100,320,400,color);
    }
}
//封装创建窗口的基础方法，使用继承
class MyFrame extends Frame{
    static int id=0;
    //构造器，传参：弹出位置，宽高，背景颜色
    public MyFrame(int x,int y,int w,int h,Color color){
        super("MyFrame"+(++id));
        setVisible(true);
        setBounds(x,y,w,h);
        setBackground(color);
    }
}

Panel

panel是component,所以可以add到frame上

---------panel-->container-->component---------------

后续添加的东西几乎都是添加在面板上的

//panel是一个空间，不能单独存在
public class Panel1 {
    public static void main(String[] args) {
        Frame frame=new Frame("NewFrame");
        Panel panel=new Panel();

        //设置布局
        frame.setLayout(null);
        //坐标,颜色
        frame.setBounds(0,0,200,200);
        frame.setBackground(new Color(192, 110, 110));

        //panel设置坐标:此时面板的坐标是相对于frame的坐标
        panel.setBounds(300,300,300,200);
        panel.setBackground(new Color(107, 116, 225));

        //将面板添加到frame上
        frame.add(panel);
        frame.setVisible(true);
    }
}

布局管理器

1. 流式布局 FloatLayout

//流式布局
public class FloatLayout {
    public static void main(String[] args) {
        Frame frame=new Frame("FloatLayout");

        //按钮组件
        Button button1 = new Button("Button1");
        Button button2 = new Button("Button2");
        Button button3 = new Button("Button3");

        //设置为流式布局
        //居中(1),靠左(0)，靠右(2)
        frame.setLayout(new FlowLayout(2));

        frame.setBounds(0,0,200,200);
        frame.setBackground(new Color(192, 110, 110));
        frame.setVisible(true);

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

2. 东西南北中布局 BorderLayout

public class TestBorderLayout {
    public static void main(String[] args) {
        Frame fram=new Frame("BorderLayout");
        fram.setBounds(0,0,300,300);
        fram.setVisible(true);
        fram.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

        //设置按钮
        Button button1=new Button("Button1 East");
        Button button2=new Button("Button2 west");
        Button button3=new Button("Button3 south");
        Button button4=new Button("Button4 north");
        Button button5=new Button("Button5 center");

        //设置东南西北中布局
        fram.add(button1,BorderLayout.EAST);
        fram.add(button2,BorderLayout.WEST);
        fram.add(button3,BorderLayout.SOUTH);
        fram.add(button4,BorderLayout.NORTH);
        fram.add(button5,BorderLayout.CENTER);
    }
}

3. 表格布局

public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame=new Frame("GirdLayout");
        frame.setBounds(0,0,300,300);
        frame.setVisible(true);
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

        //设置按钮
        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");

        //设置表格布局
        //GirdLayout(rows,cols,行间距，列间距)
        frame.setLayout(new GridLayout(2,3));
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);
        frame.add(button4);
        frame.add(button5);
        frame.add(button6);

        frame.pack();   //java函数，选择最优排列
    }
}

练习

实现以下布局

全部采用表格布局：

1. 使用两个panel实现：

   思想：1.Frame是顶级窗口，设置为(2，3)的表单布局

   ​ 2.Panel添加两块与周围不同的布局

   ​ 3.分别设置(2,1)和(2,2)的两种布局样式

package com.Component.Day01;

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

public class Pratice2 {
    public static void main(String[] args) {
        Frame frame1=new Frame("Pratice");
        frame1.setVisible(true);
        frame1.setBounds(100,100,200,300);
        frame1.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

        frame1.setLayout(new GridLayout(2,3));
        Button bt1=new Button("bt1");
        Button bt2=new Button("bt2");
        Button bt3=new Button("bt3");
        Button bt4=new Button("bt4");
        Button bt5=new Button("bt5");
        Button bt6=new Button("bt6");
        Button bt7=new Button("bt7");
        Button bt8=new Button("bt8");
        Button bt9=new Button("bt9");
        Button bt10=new Button("bt10");

        frame1.add(bt1);

        Panel p1=new Panel();
        p1.setLayout(new GridLayout(2,1));
        p1.add(bt2);
        p1.add(bt7);
        //panel无法单独显示
        frame1.add(p1);

        frame1.add(bt3);
        frame1.add(bt4);
        frame1.add(bt5);

        Panel p2=new Panel();
        p2.setLayout(new GridLayout(2,2));
        p2.add(bt5);
        p2.add(bt8);
        p2.add(bt9);
        p2.add(bt10);
        frame1.add(p2);

        frame1.add(bt6);
    }
}