欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

用户注册界面 | Java界面实战一

2026-08-10 分类：服务器技术 阅读(1) 评论(0)

用户注册界面 | Java界面实战一

  • 界面开发概要
    • 界面的组成
    • 界面开发包
  • 实战例子（用户注册界面）
    • 步骤一、二
    • 步骤三
    • 步骤四
  • 实例优化
    • 优化一（对齐与换行）
    • 优化二（固定组件大小）
    • 优化三（大小和颜色）
      • 一、Font 类完整用法（java.awt.Font）
      • 二、Color 类完整用法（java.awt.Color）
      • 三、推荐方案：颜色 + 字体的不同设定
      • 四、案例最终优化效果+源码

界面开发概要

界面的组成

  • 可视化组件部分：窗体 按钮 输入框 菜单 …
  • 元素规则部分：尺寸 颜色 字体 布局 …
  • 内容部分： 文本 图片…

界面开发包

  • package 软件包：分类管理代码文件
  • java.awt: 抽象窗体开发工具包 早期的界面开发包 样式老旧 功能不全，只保留使用元素规则 类
    • Dimension 尺寸类
    • Color 颜色类
    • Font 字体类
    • FlowLayout 流式布局类 将组件从左到右依次排列，一行不够 切换到下一行，整体居 中，会根据组件的内容适配尺寸
  • javax.swing: 升级的界面开发包 主要使用可视化组件类
    • JFrame 窗体类
    • JButton 按钮类
    • JTextField 文本输入框类
    • JPasswordField 密码输入框类
    • JLabel 标签类 透明的组件，只会显示内容
    • ImageIcon 图片类

实战例子（用户注册界面）

步骤一、二

  • 1： 创建一个新的类命名为ModifyUI ，其中定义一个方法showUI
  • 2： 再写一个程序入口 ，其中创建本类对象 调用showUI方法

package Frame0808;

//1： 创建一个新的类命名为ModifyUI ，其中定义一个方法showUI
//2： 再写一个程序入口 ，其中创建本类对象 调用showUI方法
public class ModifyUI {
public void showUI(){

}
static void main(){
ModifyUI ui = new ModifyUI();
ui.showUI();
}
}

步骤三

  • 3： 在showUI方法中创建一个窗体类的对象 ，使用窗体对象变量名调用set系列方法设置属性
    • 标题 尺寸 位置 关闭操作 可视化 布局

package Frame0808;

import javax.swing. *;// 导入Swing全套图形界面组件包：窗口、按钮、标签、输入框等所有Swing控件都在此包内
import java.awt. *;// 导入AWT基础工具包：布局管理器FlowLayout、颜色Color、字体Font、尺寸Dimension等基础绘图与布局类

public class ModifyUI {

public void showUI(){
JFrame jf = new JFrame();// 创建顶层窗口对象JFrame，Swing所有界面容器的最外层窗体
jf.setTitle("用户注册界面");// 为窗口设置标题文字，窗口左上角显示“用户注册界面”
jf.setSize(400,300);// 设置窗口固定大小，宽度400像素，高度300像素
jf.setLocation(100, 200);// 设置窗口打开后在屏幕上的坐标位置：横坐标100，纵坐标200
jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 关闭时退出
jf.setVisible(true);// 可视化 显示到屏幕上

FlowLayout flow = new FlowLayout();// 创建流式布局对象
jf.setLayout(flow);// 窗体设置布局
}

static void main(){
ModifyUI ui = new ModifyUI();
ui.showUI();
}
}

此时我们运行程序会得到这样一个窗口： （注：黑色是背景色，不是界面的一部分） 用户注册界面初步 注意：jf.setVisible(true); 用于将窗体显示到屏幕上，最好放在所有组件添加完毕之后。因为如果过早调用，后续添加的组件可能无法立即显示（比如图片）。将 setVisible(true) 放在最后，可以确保所有组件都已布局完成，一次性完整地呈现给用户。

步骤四

  • 4： 创建组件对象 设置好内容、属性之后添加到窗体上
    • 按钮-JButton
    • 文本输入框-JTextField
    • 密码输入框-JPasswordField
    • 标签-JLabel
    • 图片-ImageIcon

package Frame0808;

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

public class ModifyUI {

public void showUI(){
JFrame jf = new JFrame();
jf.setTitle("用户注册界面");
jf.setSize(400,300);
jf.setLocation(100, 200);
jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

FlowLayout flow = new FlowLayout();// 创建流式布局对象
jf.setLayout(flow);// 窗体设置布局

JButton btn1 = new JButton("同意以上协议并注册");// 创建按钮
JButton btn2 = new JButton("点我换一张");
JCheckBox che = new JCheckBox("我已阅读并同意用户注册协议");// 创建多选框
JLabel Jla1 = new JLabel("注册新用户：");// 创建标签
JLabel Jla2 = new JLabel("用户名：");
JTextField Jtf2 = new JTextField(30);// 创建文本输入框
JLabel Jla3 = new JLabel("手机号：");
JTextField Jtf3 = new JTextField(30);
JLabel Jla4 = new JLabel("电子邮件：");
JTextField Jtf4 = new JTextField(30);
JLabel Jla5 = new JLabel("登录密码：");
JPasswordField Jtf5 = new JPasswordField(30);// 创建密码输入框
JLabel Jla6 = new JLabel("确认密码：");
JPasswordField Jtf6 = new JPasswordField(30);
JLabel Jla7 = new JLabel("验证码：");
JTextField Jtf7 = new JTextField(6);
ImageIcon img = new ImageIcon("D:\\\\CodeTeach\\\\Java\\\\gdrz.png");
JLabel imgJla = new JLabel(img);// 图片放在标签上，将标签加载到窗体上

jf.add(Jla2);// 添加组件对象
jf.add(Jtf2);
jf.add(Jla3);
jf.add(Jtf3);
jf.add(Jla4);
jf.add(Jtf4);
jf.add(Jla5);
jf.add(Jtf5);
jf.add(Jla6);
jf.add(Jtf6);
jf.add(Jla7);
jf.add(Jtf7);
jf.add(imgJla);
jf.add(btn2);
jf.add(che);
jf.add(btn1);
jf.setVisible(true);// 可视化 显示到屏幕上
}

static void main(){
ModifyUI ui = new ModifyUI();
ui.showUI();
}
}

再次运行程序，会得到这样一个窗口： （注：黑色是背景色，不是界面的一部分） 用户注册界面

经过四个步骤后，我们就得到了一个较为粗糙的用户注册界面

实例优化

优化一（对齐与换行）

对齐可以通过调整空格数量来实现；换行则可以利用空白标签，强制 FlowLayout 提前换行——因为 FlowLayout 本身就具备自动换行能力。流式布局的规则是：组件从左到右依次排列，当一行容纳不下下一个组件时，会自动换到下一行继续摆放。

按照这个思路，将代码进行修改后，我们可以得到如下窗口： （注：黑色是背景色，不是界面的一部分） 在这里插入图片描述 可以看到：组件排列更加整齐，使界面更美观。

优化二（固定组件大小）

这里涉及 Dimension 组件，它用于封装组件的宽度和高度（手动固定组件大小，不让系统自动缩放）。用法很简单：先创建 Dimension 对象指定宽高，再通过 setPreferredSize() 方法设置给组件，即可固定其大小。

这里用三行代码来演示它的用法：

//1. 创建Dimension尺寸对象，规定宽160，高35
Dimension btnSize = new Dimension(160, 35);

//2. 创建按钮
JButton btnReg = new JButton("同意以上协议并注册");

//3. 给按钮设置固定首选尺寸
btnReg.setPreferredSize(btnSize);

这样我们的界面又得到了升级： （注：黑色是背景色，不是界面的一部分） 在这里插入图片描述

优化三（大小和颜色）

如果组件的大小和颜色都不能设置，窗口会显得十分单调。下面我们来讲解 Font 和 Color 两个组件。

一、Font 类完整用法（java.awt.Font）

1. 作用

专门设置 Swing 组件上文字的字体类型、样式（加粗 / 斜体）、字号大小。所有带文字的组件（如 JLabel、JButton、JTextField、JCheckBox）全都通用。

2. 标准格式

Font 自定义字体对象 = new Font(字体名称, 字体样式常量, 字号大小);

参数详解：

  • 字体名称：Windows 系统通用 “微软雅黑”、“宋体”、“黑体”、Arial
  • 字体样式（常量，三选一或组合）
    • Font.PLAIN：普通常规字体
    • Font.BOLD：加粗
    • Font.ITALIC：斜体
    • 组合写法：Font.BOLD + Font.ITALIC 加粗 + 斜体
  • 字号：int 数字，常用 12、13、14、16

    • 3. 调用格式

    组件对象.setFont(字体对象);

    4. 使用示例

    // 创建字体：微软雅黑、加粗、14号字
    Font btnFont = new Font("微软雅黑", Font.BOLD, 14);
    // 创建注册按钮
    JButton btnReg = new JButton("同意以上协议并注册");
    // 绑定到注册按钮
    btnReg.setFont(btnFont);

    在这里插入图片描述

    二、Color 类完整用法（java.awt.Color）

    1. 两大核心功能

    • setForeground()：前景色 = 文字颜色
    • setBackground()：背景颜色 = 组件底色

    2. 方式 1：直接使用系统自带颜色常量（最简单）

    内置常用常量：Color.WHITE 白色、Color.BLACK 黑色、Color.GRAY 灰色、Color.BLUE 蓝色、Color.RED 红色、Color.GREEN 绿色

    // 按钮文字设为白色
    btnReg.setForeground(Color.WHITE);

    3. 方式 2：RGB 自定义颜色（较为灵活）

    构造格式：

    Color 颜色对象 = new Color(红色值, 绿色值, 蓝色值);

    三个数值范围：0~255，数值越大对应颜色越亮。

    示例（深蓝按钮）：

    Color btnBgColor = new Color(25, 118, 210); // 按钮深蓝色底色
    Color btnTextColor = Color.WHITE; // 按钮白色文字

    JButton btnReg = new JButton("同意以上协议并注册"); // 创建按钮

    btnReg.setBackground(btnBgColor);// 设置组件底色
    btnReg.setForeground(btnTextColor);// 设置文字颜色

    在这里插入图片描述

    JLabel 标签背景色不生效解决办法 JLabel 默认透明，直接 setBackground 看不到颜色，必须额外一行代码开启不透明：

    JLabel jla2 = new JLabel("用户名：");
    jla2.setBackground(Color.LIGHT_GRAY);
    jla2.setOpaque(true); // 关键！开启不透明，背景色才能正常显示

    三、推荐方案：颜色 + 字体的不同设定

    把 Font 和 Color 组合起来，可以搭配出多种风格。下面给出 3 套「颜色 + 字体」的推荐方案：

    方案 1：深蓝底 + 白色加粗字（主操作按钮，最醒目）

    // 字体：微软雅黑、加粗、14号
    Font btnFont = new Font("微软雅黑", Font.BOLD, 14);
    // 颜色：深蓝底色 + 白色文字
    Color btnBgColor = new Color(25, 118, 210);
    Color btnTextColor = Color.WHITE;

    JButton btnReg = new JButton("同意以上协议并注册");
    btnReg.setFont(btnFont); // 设置字体
    btnReg.setBackground(btnBgColor); // 设置底色
    btnReg.setForeground(btnTextColor); // 设置文字颜色

    在这里插入图片描述

    方案 2：浅灰底 + 深灰普通字（次要按钮，低调不抢眼）

    // 字体：宋体、常规、12号
    Font btnFont = new Font("宋体", Font.PLAIN, 12);
    // 颜色：浅灰底色 + 深灰文字
    Color btnBgColor = new Color(230, 230, 230);
    Color btnTextColor = new Color(80, 80, 80);

    JButton btnReg = new JButton("点我换一张");
    btnReg.setFont(btnFont);
    btnReg.setBackground(btnBgColor);
    btnReg.setForeground(btnTextColor);

    在这里插入图片描述

    方案 3：绿色底 + 白色斜体字（强调提示类按钮）

    // 字体：微软雅黑、斜体、13号
    Font btnFont = new Font("微软雅黑", Font.ITALIC, 13);
    // 颜色：绿色底色 + 白色文字
    Color btnBgColor = new Color(46, 160, 67);
    Color btnTextColor = Color.WHITE;

    JButton btnReg = new JButton("我已阅读并同意用户注册协议");
    btnReg.setFont(btnFont);
    btnReg.setBackground(btnBgColor);
    btnReg.setForeground(btnTextColor);

    在这里插入图片描述

    这样，通过「颜色 + 字体」的不同组合，就能让界面按钮层次分明、风格统一。

    四、案例最终优化效果+源码

    在这里插入图片描述 完整源码：

    package Frame0808;

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

    public class ModifyUI {

    public void showUI(){
    JFrame jf = new JFrame();
    jf.setTitle("用户注册界面");
    jf.setSize(400,300);
    jf.setLocation(100, 200);
    jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    FlowLayout flow = new FlowLayout();// 创建流式布局对象
    jf.setLayout(flow);// 窗体设置布局

    Dimension btnSize1 = new Dimension(300, 25);//1. 创建Dimension尺寸对象，规定宽100，高35
    Color Bg = new Color(25, 118, 210);
    Color Fg = Color.WHITE;
    JButton btn1 = new JButton("同意以上协议并注册");//2. 创建按钮
    btn1.setPreferredSize(btnSize1);//3. 给按钮设置固定首选尺寸
    btn1.setForeground(Fg);
    btn1.setBackground(Bg);
    btn1.setOpaque(true);

    Dimension btnSize2 = new Dimension(100, 25);
    JButton btn2 = new JButton("点我换一张");
    btn2.setPreferredSize(btnSize2);

    Font labelFont = new Font("软雅黑体",Font.BOLD,16);
    JLabel Jla1 = new JLabel("注册新用户：");// 创建标签
    Jla1.setFont(labelFont);

    JCheckBox che = new JCheckBox("我已阅读并同意用户注册协议");// 创建多选框
    JLabel Jla2 = new JLabel(" 用户名：");
    JTextField Jtf2 = new JTextField(30);// 创建文本输入框
    JLabel Jla3 = new JLabel(" 手机号：");
    JTextField Jtf3 = new JTextField(30);
    JLabel Jla4 = new JLabel("电子邮件：");
    JTextField Jtf4 = new JTextField(30);
    JLabel Jla5 = new JLabel("登录密码：");
    JPasswordField Jtf5 = new JPasswordField(30);// 创建密码输入框
    JLabel Jla6 = new JLabel("确认密码：");
    JPasswordField Jtf6 = new JPasswordField(30);
    JLabel Jla7 = new JLabel(" 验证码：");
    JTextField Jtf7 = new JTextField(6);
    ImageIcon img = new ImageIcon("D:\\\\CodeTeach\\\\Java\\\\gdrz.png");
    JLabel imgJla = new JLabel(img);// 图片放在标签上，将标签加载到窗体上
    JLabel blank1 = new JLabel(" ");
    JLabel blank2 = new JLabel(" ");
    JLabel blank3 = new JLabel(" ");

    jf.add(Jla1);
    jf.add(blank3);
    jf.add(Jla2);// 添加组件对象
    jf.add(Jtf2);
    jf.add(Jla3);
    jf.add(Jtf3);
    jf.add(Jla4);
    jf.add(Jtf4);
    jf.add(Jla5);
    jf.add(Jtf5);
    jf.add(Jla6);
    jf.add(Jtf6);
    jf.add(Jla7);
    jf.add(Jtf7);
    jf.add(blank1);
    jf.add(imgJla);
    jf.add(btn2);
    jf.add(blank2);
    jf.add(che);
    jf.add(btn1);
    jf.setVisible(true);// 可视化 显示到屏幕上
    }

    static void main(){
    ModifyUI ui = new ModifyUI();
    ui.showUI();
    }
    }

    赞(0)
    未经允许不得转载：171主机测评 » 用户注册界面 | Java界面实战一
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(58073)#python(19747)#开发语言(16618)#java(15263)#运维(15185)#linux(14810)#大数据(14377)#服务器(12933)#算法(11645)#前端(10707)#网络(9238)#数据库(8776)#ai(8689)#c++(8074)#课程设计(6766)#学习(6668)#机器学习(6617)#区块链(5853)#OpenClaw(5379)#后端(5075)#spring boot(4966)#深度学习(4856)#c语言(4330)#毕业设计(4280)#数据结构(4157)#安全(3968)#docker(3902)#架构(3782)#javascript(3766)#大模型(3606)

    热门文章

    最新文章

    归档

    分类