22、Java 图形用户界面开发全解析

Java 图形用户界面开发全解析

1. 基础概念

在编程中，用户界面是人与程序交互的重要方式。简单的用户界面可能仅由屏幕上的提示信息和用于输入的键盘组成。例如，程序提示用户输入学生 ID，用户通过键盘输入，按下回车键后程序进行处理。以下是创建这种简单用户界面的示例代码：

import java.io.*;
public class Demo {
    public static void main(String args[]) {
        BufferedReader stdin = new BufferedReader(
                new InputStreamReader(System.in));
        try {
            System.out.print("Enter your student ID: ");
            String studentID = stdin.readLine();
            System.out.println( "Student ID: " + studentID);
        } catch (IOException e) {
            System.out.println( "Exception:" + e );
        }
    }
}

此代码使用 System.in 引用标准输入（默认是键盘）， InputStreamReader 将输入的字节转换为字符， BufferedReader 用于从内存缓冲区快速读取字符， readLine() 方法读取一整行文本。

2. 图形用户界面（GUI）概述

GUI 即图形用户界面，如今几乎所有程序都采用图形方式让用户与程序交互，因为它直观且高效，能方便地收集和展示信息。GUI 的标准图形元素包括窗口、菜单、按钮、标签、文本框等，这些元素在不同程序中的操作方式基本相同，大大减少了用户学习新程序的时间。

创建 GUI 有两种方式：
- 使用消息对话框和输入对话框 ：这是一种简单快速的方法，但功能有限。消息对话框显示消息和“确定”按钮，输入对话框可让用户输入信息。以下是使用示例：

import javax.swing.*;
public class Demo {
    public static void main(String[] args) {
        String str;
        JOptionPane.showMessageDialog(null,
                "Message", "Window Caption", JOptionPane.PLAIN_MESSAGE);
        str = JOptionPane.showInputDialog (
                "Enter Student ID ");
        System.exit(0);
    }
}

• 使用常见的 GUI 对象 ：如单选按钮、按钮等，能创建更复杂的 GUI。

3. 窗口与内容容器

创建 GUI 通常需要一个可最小化、最大化和调整大小的窗口，窗口内有用于容纳 GUI 元素的内容容器。
- 窗口类 ：通常自定义窗口类继承 JFrame 类， JFrame 类提供管理窗口的方法，如 setSize() 设置窗口大小、 setDefaultCloseOperation() 定义窗口关闭行为、 setVisible() 控制窗口显示。示例代码如下：

import javax.swing.*;
public class Demo {
    public static void main(String[] args) {
        Window win = new Window();
    }
}
class Window extends JFrame {
    public Window () {
        super ("Window Title");
        setSize(400,100);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
    }
}

• 内容容器 ：在插入 GUI 元素前，需创建内容容器。通过 getContentPane() 方法获取 Container 对象，使用 setBackground() 方法设置容器背景颜色。示例如下：

import java.awt.*;
import javax.swing.*;
public class Demo {
    public static void main(String[] rgs) {
        Window win = new Window();
    }
}
class Window extends JFrame {
    public Window () {
        super ("Window Title");
        setSize(400,100);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
        Container ca = getContentPane();
        ca.setBackground(Color.lightgray);
    }
}

常见的背景颜色常量如下表所示：
| 常量 | 颜色 |
| ---- | ---- |
| Color.white | 白色 |
| Color.lightGray | 浅灰色 |
| Color.gray | 灰色 |
| Color.black | 黑色 |
| Color.blue | 蓝色 |
| Color.green | 绿色 |
| Color.cyan | 青色 |
| Color.magenta | 洋红色 |
| Color.orange | 橙色 |
| Color.pink | 粉色 |
| Color.yellow | 黄色 |

4. Java 布局管理器

在 Java 中定位 GUI 元素时，通常指定相对位置，由 Java 虚拟机确定精确位置，以适应不同屏幕。常见的布局管理器有以下四种：
- Flow 布局管理器 ：像在页面上排列单词一样，从左到右、换行排列 GUI 元素，窗口调整大小时元素自动居中。使用示例：

FlowLayout flm = new FlowLayout();

可通过构造函数参数指定元素对齐方式（左、中、右）和元素间的水平、垂直间距。
- Border 布局管理器 ：将容器分为北、南、东、西、中五个区域。使用示例：

import java.awt.*;
import javax.swing.*;
public class Demo {
    public static void main(String[] args) {
        Window win = new Window();
    }
}
class Window extends JFrame {
    public Window () {
        super ("Window Title");
        setSize(400,100);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
        Container ca = getContentPane();
        ca.setBackground(Color.lightGray);
        BorderLayout blm = new BorderLayout();
        ca.setLayout(blm);
        JButton bt1 = new JButton("Start Test 1");
        ca.add(bt1,blm.WEST);
        JButton bt2 = new JButton("Start Test 2");
        ca.add(bt2,blm.EAST);
        setContentPane(ca);
    }
}

使用 add() 方法添加元素时，通过 BorderLayout 类的常量指定位置。

以下是布局管理器选择的 mermaid 流程图：

graph TD;
    A[选择布局管理器] --> B{是否需要按行排列元素};
    B -- 是 --> C[Flow 布局管理器];
    B -- 否 --> D{是否需要分区布局};
    D -- 是 --> E[Border 布局管理器];
    D -- 否 --> F{是否需要网格布局};
    F -- 是 --> G{是否需要指定单元格};
    G -- 是 --> H[Gridbag 布局管理器];
    G -- 否 --> I[Grid 布局管理器];

5. Grid 布局管理器和 Gridbag 布局管理器

5.1 Grid 布局管理器

Grid 布局管理器将容器划分为行和列。创建 Grid 布局管理器时，需声明 GridLayout 类的实例，并在构造函数中传入两个整数参数，分别指定行数和列数。每个单元格大小相等，无论分配给该单元格的 GUI 元素大小如何。示例代码如下：

GridLayout glm = new GridLayout();

不过，使用 Grid 布局管理器存在一个缺点，即无法指定将 GUI 元素放置在哪个单元格，元素会按照添加到容器的顺序从左到右依次放置在单元格中。

5.2 Gridbag 布局管理器

为了弥补 Grid 布局管理器的不足，一些程序员更喜欢使用 Gridbag 布局管理器。它允许将 GUI 元素放置到特定的单元格中。创建 Gridbag 布局管理器，需要声明 GridbagLayout 类的实例，同时还需声明 GridBagConstraints 类的实例，该类用于指定 GUI 元素在网格中的位置。具体操作步骤如下：
1. 声明 GridbagLayout 类的实例。
2. 声明 GridBagConstraints 类的实例。
3. 为 GridBagConstraints 实例的 gridx 和 gridy 属性分别分配行号和列号。
4. 在向容器添加新的 GUI 元素时，将 GridBagConstraints 实例的引用传递给容器的 add() 方法。

以下是创建网格并在网格中定位两个按钮的示例代码：

import java.awt.*;
import javax.swing.*;
public class Demo {
    public static void main(String[] args) {
        Window win = new Window();
    }
}
class Window extends JFrame {
    public Window () {
        super ("Window Title");
        setSize(400,100);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
        Container ca = getContentPane();
        ca.setBackground(Color.lightGray);
        GridBagLayout gblm = new GridBagLayout();
        GridBagConstraints gbc = new GridBagConstraints();
        ca.setLayout(gblm);
        JButton bt1 = new JButton("Start Test 1");
        gbc.gridx = 1;
        gbc.gridy = 0;
        ca.add(bt1,gbc);
        JButton bt2 = new JButton("Start Test 2");
        // 可继续设置 bt2 的位置
        // gbc.gridx = ...;
        // gbc.gridy = ...;
        // ca.add(bt2,gbc);
    }
}

6. 总结

在 Java 中开发图形用户界面（GUI），我们从简单的用户界面入手，了解了如何通过标准输入和 BufferedReader 实现基本的交互。接着引入了 GUI 的概念，它凭借直观高效的特点成为现代程序的主流交互方式。创建 GUI 有使用对话框和使用常见 GUI 对象两种方式，各有优劣。

在构建 GUI 时，窗口和内容容器是基础。窗口类通常继承 JFrame 类，利用其提供的方法实现窗口的基本操作；内容容器则用于容纳各种 GUI 元素，并可设置背景颜色。

布局管理器是 Java GUI 开发的关键部分，不同的布局管理器适用于不同的场景：
| 布局管理器 | 特点 | 适用场景 |
| ---- | ---- | ---- |
| Flow 布局管理器 | 元素按行排列，窗口调整大小时自动居中 | 元素较少，按顺序排列的场景 |
| Border 布局管理器 | 将容器分为五个区域 | 需要分区布局的场景 |
| Grid 布局管理器 | 将容器划分为行和列，单元格大小相等 | 元素需要按网格排列，但不需要指定具体单元格的场景 |
| Gridbag 布局管理器 | 可将元素放置到特定单元格 | 需要精确控制元素位置的场景 |

通过合理选择和使用布局管理器，结合窗口和内容容器的设置，我们能够创建出满足不同需求的 Java GUI 程序。希望本文能帮助你在 Java GUI 开发的道路上迈出坚实的一步，为你的编程之旅增添更多色彩。

以下是一个总结布局管理器特点及使用步骤的 mermaid 流程图：

graph LR;
    A[开始开发 GUI] --> B[创建窗口和内容容器];
    B --> C[选择布局管理器];
    C --> D{Flow 布局管理器};
    D -- 是 --> E[声明 FlowLayout 实例，可设置对齐和间距];
    C --> F{Border 布局管理器};
    F -- 是 --> G[声明 BorderLayout 实例，用常量指定元素位置];
    C --> H{Grid 布局管理器};
    H -- 是 --> I[声明 GridLayout 实例，指定行列数];
    C --> J{Gridbag 布局管理器};
    J -- 是 --> K[声明 GridBagLayout 和 GridBagConstraints 实例，设置位置属性];
    E --> L[添加 GUI 元素];
    G --> L;
    I --> L;
    K --> L;
    L --> M[完成 GUI 开发];