23. GUI图形用户界面

2024-04-10 08:50:09 阅读数 778

参考链接： https://blog.csdn.net/qq_42035966/article/details/82258199#5.插件介绍WindowBuilder

1、GUI的介绍

1.1 GUI概述

早期，电脑向用户提供的是单调、枯燥、纯字符状态的“命令行界面（CLI）”。就是到现在，我们还可以依稀看到它们的身影：在Windows中开个DOS窗口，就可看到历史的足迹。后来，Apple公司率先在电脑的操作系统中实现了图形化的用户界面（Graphical User Interface，简称GUI），但由于Apple公司封闭的市场策略，自己完成电脑硬件、操作系统、应用软件一条龙的产品，与其它PC不兼容。这使得Apple公司错过了一次一统全球PC的好机会。

后来，Microsoft公司推出了风靡全球的Windows操作系统，它凭借着优秀的图形化用户界面，一举奠定了操作系统标准的地位。这也造就了世界首富---比尔.盖茨和IT业的泰山北斗微软公司。

在这图形用户界面风行于世的今天，一个应用软件没有良好的GUI是无法让用户接受的。而Java语言也深知这一点的重要性，它提供了一套可以轻松构建GUI的工具。在本章和下一章中，我们将向你充分证明这一点。

1.2 Java提供了三个主要包做GUI开发：

java.awt 包 – 主要提供字体/布局管理器

javax.swing 包[商业开发常用] – 主要提供各种组件(窗口/按钮/文本框)

java.awt.event 包 – 事件处理，后台功能的实现。

2、Swing组件

如图所示：swing组件主要可分为三个部分，后面会详细介绍

（1）顶层容器:：常用有JFrame，JDialog

（2）中间容器：JPanel，JOptionPane，JScrollPane，JLayeredPane 等，主要以panel结尾。

（3）基本组件：JLabel，JButton，JTextField，JPasswordField，JRadioButton 等。

2.1 顶层容器

image.png

顶层容器

JFrame组件在javax.swing.JFrame

2.2 中间容器

image.png

中间容器

2.3 基本组件

image.png

基本组件

3、组件API介绍

3.1 JFrame组件(一般需要继承JFrame类)

javax.swing.JFrame
JFrame组件用于在Swing程序中创建窗体；
JFrame类的构造方法有4种重载方式：
JFrame() 构造一个最初不可见的新框架。
JFrame(GraphicsConfiguration gc) 在屏幕设备的指定 GraphicsConfiguration中创建一个 Frame和一个空白标题。
JFrame(String title) 创建一个新的，最初不可见的 Frame与指定的标题。
JFrame(String title, GraphicsConfiguration gc) 创建 JFrame具有指定标题和指定 GraphicsConfiguration屏幕设备的。

JFrame常用方法：

public void setTitle(String title) 设置窗体标题
public void setBounds(int a,int b,int width,int height)设置窗口的初始位置是(a,b),即距屏幕左面a个像素，距屏幕上方b个像素，窗口的宽是width,高是height。
public void setSize(int width,int height)设置窗口的大小。
public void setLocation(int x,int y)设置窗口的位置，默认位置是(0,0)。
public void setVisible(boolean b)设置窗口是否可见，窗口默认是不可见的。
public void setResizable(boolean b)设置窗口是否可调整大小，默认可调整大小。
public void dispose()撤销当前窗口，并释放当前窗口所使用的资源。
public Container getContentPane() 获得当前窗体的内容面板
void dispose()释放当前窗体及其所有子组件所占用的资源。
void repaint()从新绘制当前窗体。
public void setExtendedState(int state)设置窗口的扩展状态，其中参数state取JFrame类中的下列类常量:

MAXIMIZED_HORIZ (水平方向最大化)，
MAXIMIZED_VERT (垂直方向最大化)，
MAXIMIZED_BOTH (水平、垂直方向都最大化)。

public void setDefaultCloseOperation(int operation)该方法用来设置单击窗体右上角的关闭图标后，程序会做出怎样的处理，其中的参数operation取JFrame类中的下列int型static常量，程序根据参数operation取值做出不同的处理:

DO_NOTHING_ON_CLOSE(什么也不做)，
HIDE_ON_CLOSE (隐藏当前窗口)，
DISPOSE_ON_CLOSE (隐藏当前窗口，并释放窗体占有的其他资源)，
EXIT_ON_CLOSE (结束窗口所在的应用程序)。

代码演示：

//创建一个窗口

import javax.swing.JFrame;

public class JFrameDemo extends JFrame{
    public static void main(String[] args) {
        //创建JFrame对象
        JFrame jFrame1 = new JFrame("第一个JFrame窗口");
        
        //设置窗口的大小
        jFrame1.setSize(720,680);
        
        //设置窗口显示位置
        jFrame1.setLocation(500,200);
        
        //设置窗口大小可调整
        jFrame1.setResizable(true);
        
        //设置窗口拓展延水平方向最大化
        jFrame1.setExtendedState(MAXIMIZED_HORIZ);
        
        //设置关闭窗口的操作为什么都不做
        jFrame1.setDefaultCloseOperation(DO_NOTHING_ON_CLOSE);
        
        //设置窗口可视化，一般放在最后一步
        jFrame1.setVisible(true);
    }
}

结果：

image.png

3.2 JPanel组件

javax.swing.JPanel
JPanel提供面板组件，它是轻量级的容器组件；
面板中可以添加其它组件，也可以设置布局，我们一般使用面板来实现布局嵌套；
JFrame类的构造方法有4种重载方式：
JPanel() 创建一个新的 JPanel双缓冲区和流布局。
JPanel(boolean isDoubleBuffered) 创建一个新的 JPanel与 FlowLayout和指定的缓冲策略。
JPanel(LayoutManager layout) 使用指定的布局管理器创建一个新的缓冲JPanel。
JPanel(LayoutManager layout, boolean isDoubleBuffered) 使用指定的布局管理器和缓冲策略创建一个新的JPanel。

JPanel常用方法：

public Component add(Component comp)设置面板的背景色
public void setLayout(LayoutManager mgr)设置面板的布局，选null为空布局，下面会讲几种常用的布局。
public Component add(Component comp)向面板中添加组件
public void setLayout(LayoutManager mgr)向面板中指定位置添组件
public void remove(Component comp)移除指定组件
public void removeAll()移除面板上所有组件
public void repaint() 重新绘制

代码演示：

//JPanel组件的使用

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

public class JPanelDemo extends JFrame {

    public JPanelDemo() {
        this.init();
    }

    public static void main(String[] args) {
        JPanelDemo frameDemo = new JPanelDemo();
    }

    private void init() {

        // 获取当前的内容面板
        Container container = this.getContentPane();

        // 设置布局为空布局
        setLayout(null);

        // 创建JPanel组件面板
        JPanel jPanel = new JPanel();

        // 设置JPanel组件面板大下小
        jPanel.setSize(540, 420);

        jPanel.setBackground(new Color(86,182,255));

        jPanel.setLocation(0, 0);
        container.add(jPanel);

        // 设置窗口可视化，一般放在最后一步
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setTitle("登录界面");
        this.setSize(540, 420);
        this.setVisible(true);
    }
}

结果：

image.png

3.3 Container容器

Container类通常用于操作JFrame的内容面板

常用方法：

public void setBackground(Color bg)设置背景色
public void setLayout(LayoutManager mgr)设置容器的布局
public Component add(Component comp)往容器中添加组件
public Component add(Component comp, int index)往容器的指定位置添加组件‘
public void remove(Component comp)移除指定的组件
public void removeAll()移除所有的组件
public void repaint()重新绘制

3.3 JButton组件

javax.swing.JButton
在Swing程序中，按钮可能是使用量最大的组件之一，JButton则是用来创建按钮的；
JButton类的构造方法有5种重载方式
JButton() 创建一个没有设置文本或图标的按钮。
JButton(Action a) 创建一个按钮，其中的属性取自提供的 Action 。
JButton(Icon icon) 创建一个带有图标的按钮。
JButton(String text) 创建一个带文本的按钮。
JButton(String text, Icon icon) 创建一个带有初始文本和图标的按钮。

JButton常用方法：

public void setText(String text)设置按钮上的文本
public String getText()获取按钮上的文本
public void setBackground(Color bg)设置按钮的背景色
public Color getBackground()获取按钮的背景色
public void setEnabled(boolean b)设置按钮的启用或禁用
public void setVisible(boolean b)设置按钮是否可见
public void setToolTipText(String text)设置按钮悬停的提示信息
public void setMnemonic(int mnemonic)设置按钮的快捷键
public void addActionListener(ActionListener al)增加对按钮对象的事件监听

3.4 JLabel组件

javax.swing.JLabel
JLabel是最简单的Swing组件之一，用于在窗体上显示标签，JLabel既可以显示文本，也可以显示图像；
JLabel类的构造方法有6种重载方式：
JLabel() 创建一个没有图像的 JLabel实例，标题为空字符串。
JLabel(Icon image) 使用指定的图像创建一个 JLabel实例。
JLabel(Icon image, int horizontalAlignment) 创建一个具有指定图像和水平对齐的 JLabel实例。
JLabel(String text) 使用指定的文本创建一个 JLabel实例。
JLabel(String text, Icon icon, int horizontalAlignment) 创建具有 JLabel文本，图像和水平对齐的JLabel实例。
JLabel(String text, int horizontalAlignment) 创建一个具有指定文本和水平对齐的 JLabel实例。

JLabel常用方法：

public void setText(String text) 设置标签上的文本
public String getText()获得标签上的文本
public void setIcon(Icon icon)设置标签中的图像
public Icon getIcon()获得标签中的图像
public void setHorizontalAlignment(int alignment)设置标签中文本的对齐方式 alignment -一个中所定义的以下常量 SwingConstants ： LEFT ， CENTER （仅用于图像的标签的默认值）， RIGHT ， LEADING （默认为纯文本的标记），或 TRAILING 。
public void setVisible(boolean b)设置标签是否可见
public void setFont(Font f)设置标签对象的字体

3.5 JTextField组件

javax.swing.JTextField
JTextField是文本框组件，主要用来接受用户的输入；
JTextField类的构造方法有5种重载方式
JTextField() 构造新的 TextField 。
JTextField(Document doc, String text, int columns) 构造一个新的 JTextField ，它使用给定的文本存储模型和给定的列数。
JTextField(int columns) 构造一个新的空的 TextField与指定的列数。
JTextField(String text) 构造一个新的 TextField ，用指定的文本初始化。
JTextField(String text, int columns) 构造一个新的 TextField ，用指定的文本和列初始化。

JTextField的常用方法：

public void setText(String text)设置文本框的文本
public String getText()获得文本框中的文本
public void setHorizontalAlignment(int alignment)设置文本框的文本对齐方式。

设置文本的水平对齐方式。有效的密钥是：
JTextField.LEFT
JTextField.CENTER
JTextField.RIGHT
JTextField.LEADING
JTextField.TRAILING

public void setEditable(boolean b)设置文本框是否可以编辑
public void setEnabled(boolean enabled)设置文本框的启用或禁用
public void setVisible(boolean b)设置文本框是否可见
public int getColumns()获取文本域的宽度
public void setColumns(int columns)设置文本域的宽度
public void setEchoChar(char c)设置文本域的回显字符为c，比如输入密码的输入框，设置回显字符为*
public void addActionListener(ActionListener al) 添加对文本框的监听器，由按Enter键触发

3.6 JTextArea 组件

javax.swing.JTextArea
当用户有大量文本需要输入的时候，就可以使用到文本域组件；
JTextArea的构造方法共有6种重载
JTextArea() 构造一个新的TextArea。
JTextArea(Document doc) 使用给定的文档模型构造一个新的JTextArea，默认为所有其他参数（null，0，0）。
JTextArea(Document doc, String text, int rows, int columns) 构造具有指定行数和列数的新JTextArea以及给定模型。
JTextArea(int rows, int columns) 构造具有指定行数和列数的新的空TextArea。
JTextArea(String text) 构造一个新的TextArea，并显示指定的文本。
JTextArea(String text, int rows, int columns) 构造具有指定文本和行数和列数的新TextArea。

JTextArea的常用方法：

void setText(String text)
String getText()
void setFont(Font font)
void setLineWrap(boolean wrap)
void setTabSize(int size)
void append(String str) 在原文本尾添加字符串str
int getColumns()获取文本区的列数
int getRows()获取文本区的行数
void setEditable(boolean b)设置文本区是否可以编辑

4、布局管理器

用户界面上的组件可以按照不同的方式进行排列，例如：可以依序水平排列，或者按网格方式进行排列；
每种方案都是指组件的一种布局，要管理这些布局，就需要使用布局管理器；
布局管理器是一组实现了java.awt.LayoutManager接口的类，由这些类自动定位组件；
布局管理器类在java.awt包中。

几种常见的布局：

流式布局 java.awt.FlowLayout
边界布局 java.awt.BorderLayout
网格布局 java.awt.GridLayout
卡片布局 Java.awt.CardLayout
网袋布局管理器 Java.awt.GridBagLayout

4.1 流式布局（FlowLayout）

流式布局（FlowLayout）是最基本的一种布局，容器缺省的布局就是流式布局。

流式布局是值把图形元素一个接一个的放在容器中，按照组件加入的先后顺序从左到右排列，当一行排列满后就转到下一行继续从左到右排列。

构造方法：

FlowLayout() 构造一个新的 FlowLayout中心对齐和默认的5单位水平和垂直间隙。
FlowLayout(int align) 构造一个新的 FlowLayout具有指定的对齐和默认的5单位水平和垂直间隙。
FlowLayout(int align, int hgap, int vgap) 创建一个新的流程布局管理器，具有指示的对齐方式和指示的水平和垂直间距。

静态属性：

static int CENTER 该值表示每行的组件应该居中。
static int LEADING 该值表示组件的每一行应该对齐到容器方向的前端，例如从左到右的方向向左。
static int LEFT 该值表示每一行的组件应为左对齐。
static int RIGHT 该值表示组件的每一行都应该是右对齐的。
static int TRAILING 该值表示组件的每一行应该对齐到容器方向的后端，例如从左到右的方向向右。

常用方法：

int getAlignment()获取对齐方式
int getHgap()获取水平间隙
int getVgap()获取垂直间隙
void setAlignment(int align)设置对齐方式
void setHgap(int hgap)设置水平间隙
void setVgap(int vgap)设置垂直间隙

代码演示：

package com.company.project.sample.s1;

import java.awt.Button;
import java.awt.FlowLayout;

import javax.swing.JFrame;

public class FlowLayoutDemo extends JFrame {

    Button bt1 = new Button("A");
    Button bt2 = new Button("B");
    Button bt3 = new Button("C");
    Button bt4 = new Button("D");
    Button bt5 = new Button("E");
    Button bt6 = new Button("F");

    public void init() {
        //初始化流式布局（向左对齐，水平间距为20，垂直间距为30）
        FlowLayout flowLayout = new FlowLayout(FlowLayout.LEFT, 20, 30);
        
        //设置布局为流式布局
        setLayout(flowLayout);
        
        add(bt1);
        add(bt2);
        add(bt3);
        add(bt4);
        add(bt4);
        add(bt5);
        add(bt6);
        this.setSize(200, 200);
        this.setVisible(true);
    }

    public static void main(String[] args) {
        FlowLayoutDemo flowLayoutDemo = new FlowLayoutDemo();
        flowLayoutDemo.init();
    }
}

结果：

image.png

4.2 边界布局（BorderLayout）

边界布局（BorderLayout）将窗口区域分为东、南、西、北和中央五个区域，在窗口边缘是四个狭窄的、固定宽度的区域，中间为一个大的区域。

构造方法：

BorderLayout() 构建新的边框布局，组件间没有间隙。
BorderLayout(int hgap, int vgap) 构造具有组件之间指定间隙的边框布局。

静态属性：

static String AFTER_LAST_LINE PAGE_END的同义词。
static String AFTER_LINE_ENDS LINE_END的同义词。
static String BEFORE_FIRST_LINE PAGE_START的同义词。
static String BEFORE_LINE_BEGINS LINE_START的同义词。
static String CENTER 中心布局约束（容器中间）。
static String EAST 东面布局限制（容器右侧）。
static String LINE_END 组件在布局的行方向的末尾。
static String LINE_START 组件在布局的行方向的开始处。
static String NORTH 北面布局约束（容器顶部）。
static String PAGE_END 该组件来自布局内容的最后一行。
static String PAGE_START 该组件位于布局内容的第一行之前。
static String SOUTH 南布局约束（容器底部）。
static String WEST 西布局限制（容器左侧）。

成员方法：

void addLayoutComponent(String name, Component comp) 将指定的组件添加到布局。
int getAlignment() 获取此布局的对齐方式。
boolean getAlignOnBaseline() 如果组件沿其基线垂直对齐，则返回true。
int getHgap() 获得组件之间以及组件与Container的边框之间的 Container
int getVgap() 获取组件之间以及组件与所述边界之间的垂直间隙 Container
void layoutContainer(Container target) 放出容器。
Dimension minimumLayoutSize(Container target) 返回布局指定目标容器中包含的可见组件所需的最小尺寸。
Dimension preferredLayoutSize(Container target) 给定指定目标容器中可见组件的返回值。
void removeLayoutComponent(Component comp) 从布局中删除指定的组件。
void setAlignment(int align) 设置此布局的对齐方式。
void setAlignOnBaseline(boolean alignOnBaseline) 组件是否应沿其基线垂直排列。
void setHgap(int hgap) 设置组件之间以及组件与Container的边框之间的水平 Container 。
void setVgap(int vgap) 设置组件之间以及组件与所述边界之间的垂直间隙 Container 。
String toString() 返回此 FlowLayout对象及其值的字符串表示形式。

代码演示：

package com.company.project.sample.s1;

import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.FlowLayout;
import java.awt.Label;

import javax.swing.JFrame;

public class BorderLayoutDemo extends JFrame {

    Button bt1 = new Button("北");
    Button bt2 = new Button("西");
    Button bt3 = new Button("东");
    Button bt4 = new Button("南");

    Label label = new Label("中");

    public void init() {
        // 初始化边界布局
        BorderLayout borderLayout = new BorderLayout(10, 10);

        // 设置布局为边界布局
        setLayout(borderLayout);

        add(bt1, BorderLayout.NORTH);
        add(bt2, BorderLayout.WEST);
        add(bt3, BorderLayout.EAST);
        add(bt4, borderLayout.SOUTH);
        add("Center", label);

        this.setSize(200, 200);
        this.setVisible(true);
    }

    public static void main(String[] args) {
        BorderLayoutDemo borderLayoutDemo = new BorderLayoutDemo();
        borderLayoutDemo.init();
    }
}

结果：

image.png

4.3 网格布局（GridLayout）

GridLayout类是一个布局管理器，它将一个容器的组件放在矩形网格中。容器被分成等大小的矩形，并且每个矩形中放置一个组件。

构造方法:

GridLayout() 在单个行中创建一个每个组件的默认值为一列的网格布局。
GridLayout(int rows, int cols) 创建具有指定行数和列数的网格布局。
GridLayout(int rows, int cols, int hgap, int vgap) 创建具有指定行数和列数的网格布局。

成员方法：

void addLayoutComponent(String name, Component comp) 将具有指定名称的指定组件添加到布局。
int getColumns() 获取该布局中的列数。
int getHgap() 获得组件之间的水平间隙。
int getRows() 获取此布局中的行数。
int getVgap() 获取组件之间的垂直间距。
void layoutContainer(Container parent) 使用此布局放出指定的容器。
Dimension minimumLayoutSize(Container parent) 使用此网格布局确定容器参数的最小大小。
Dimension preferredLayoutSize(Container parent) 使用此网格布局确定容器参数的首选大小。
void removeLayoutComponent(Component comp) 从布局中删除指定的组件。
void setColumns(int cols) 将此布局中的列数设置为指定的值。
void setHgap(int hgap) 将组件之间的水平间距设置为指定的值。
void setRows(int rows) 将此布局中的行数设置为指定的值。
void setVgap(int vgap) 将组件之间的垂直间距设置为指定值。
String toString() 返回此网格布局值的字符串表示形式。

代码演示：

package com.company.project.sample.s1;

import java.awt.*;
import java.applet.Applet;

public class GridLayoutDemo extends Applet {
    public void init() {
        setLayout(new GridLayout(3, 2));
        add(new Button("1"));
        add(new Button("2"));
        add(new Button("3"));
        add(new Button("4"));
        add(new Button("5"));
        add(new Button("6"));
    }
}

结果：

image.png

5、面板Panel类

5.1 概述

在设计用户界面时，为了更加合理的安排各组件在窗口的位置，可以考虑将所需组件先安排在一个容器中，然后再将其作为一个整体加入另一个容器。

Panel类是这样一个被称为面板的容器类，它是一种无边框的，不能移动、放大、缩小或关闭的容器。

5.2 用途

Panel对象不能作为最底层的容器，也不能指定大小。

Panel总是作为一个容器组件被加入到Applet或Frame等其他容器，也可以加入到其他的Panel容器中，形成复杂的图形界面系统。

5.3 用法

首先创建Panel的对象，然后设置对象的布局格式，即设置Panel容器的布局，设置方法在与Applet容器中的设置一样，只是需要使用Panel对象的setLayout()方法，并使用Panel对象的add()方法往Panel容器加入组件。

5.4 代码案例

package com.company.project.sample.s1;

import java.applet.Applet;
import java.awt.*;

public class AppletPanelCalc extends Applet {
    public void init() {
        setLayout(new BorderLayout());
        add("North", new Button("按钮北"));
        add("West", new Button("按钮西"));
        add("South", new Button("按钮南"));
        add("East", new Button("按钮东"));

        Panel panel = new Panel();
        panel.setLayout(new GridLayout(3, 3));
        for (int i = 1; i < 10; i++) {
            panel.add(new Button((new Integer(i)).toString()));
        }
        add("Center", panel);
    }
}

结果：

image.png

还有一些Swing基本组件，这里就不一一列举了！！！

6、事件处理

6.1 监听器的概述

监听器，字面上的理解就是监听观察某个事件（程序）的发生情况，当被监听的事件真的发生了的时候，事件发生者（事件源）就会给注册该事件的监听者（监听器）发送消息，告诉监听者某些信息，同时监听者也可以获得一份事件对象，根据这个对象可以获得相关属性和执行相关操作。

监听器模型涉及以下三个对象：

（1）事件：用户对组件的一个操作，或者说程序执行某个方法，称之为一个事件，如机器人程序执行工作。（2）事件源：发生事件的组件就是事件源，也就是被监听的对象，如机器人可以工作，可以跳舞，那么就可以把机器人看做是一个事件源。（3）事件监听器（处理器）：监听并负责处理事件的方法，如监听机器人工作情况，在机器人工作前后做出相应的动作，或者获取机器人的状态信息。

执行顺序如下：

1、给事件源注册监听器。 2、组件接受外部作用，也就是事件被触发。 3、组件产生一个相应的事件对象，并把此对象传递给与之关联的事件处理器。 4、事件处理器启动，并执行相关的代码来处理该事件。

监听器模式：事件源注册监听器之后，当事件源触发事件，监听器就可以回调事件对象的方法；更形象地说，监听者模式是基于：注册-回调的事件/消息通知处理模式，就是被监控者将消息通知给所有监控者。

1、注册监听器：事件源.setListener。 2、回调：事件源实现onListener。

image.png

代码案例：

package com.company.project.sample.s1;

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

import javax.swing.JTextField;

@SuppressWarnings("serial")
public class Calc extends Applet implements ActionListener {
    JTextField jTextField;
    Button[] buttons = new Button[9];

    public void init() {
        setLayout(new BorderLayout());
        jTextField = new JTextField();
        add("North", jTextField);

        Panel panel = new Panel();
        panel.setLayout(new GridLayout(3, 3));

        for (int i = 0; i < 9; i++) {
            buttons[i] = new Button((new Integer(i + 1)).toString());
            buttons[i].addActionListener(this);
            panel.add(buttons[i]);
        }
        add("Center", panel);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        // TODO Auto-generated method stub
        for (int i = 0; i < 9; i++) {
            if (e.getSource() == buttons[i]) {
                jTextField.setText(jTextField.getText() + (i + 1));
            }
        }
    }
}

结果：

image.png