尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

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

用户注册界面 | Java界面实战一 用户注册界面 | 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 其中定义一个方法showUI2 再写一个程序入口 其中创建本类对象 调用showUI方法packageFrame0808;//1 创建一个新的类命名为ModifyUI 其中定义一个方法showUI//2 再写一个程序入口 其中创建本类对象 调用showUI方法publicclassModifyUI{publicvoidshowUI(){}staticvoidmain(){ModifyUIuinewModifyUI();ui.showUI();}}步骤三3 在showUI方法中创建一个窗体类的对象 使用窗体对象变量名调用set系列方法设置属性标题 尺寸 位置 关闭操作 可视化 布局packageFrame0808;importjavax.swing.*;// 导入Swing全套图形界面组件包窗口、按钮、标签、输入框等所有Swing控件都在此包内importjava.awt.*;// 导入AWT基础工具包布局管理器FlowLayout、颜色Color、字体Font、尺寸Dimension等基础绘图与布局类publicclassModifyUI{publicvoidshowUI(){JFramejfnewJFrame();// 创建顶层窗口对象JFrameSwing所有界面容器的最外层窗体jf.setTitle(用户注册界面);// 为窗口设置标题文字窗口左上角显示“用户注册界面”jf.setSize(400,300);// 设置窗口固定大小宽度400像素高度300像素jf.setLocation(100,200);// 设置窗口打开后在屏幕上的坐标位置横坐标100纵坐标200jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 关闭时退出jf.setVisible(true);// 可视化 显示到屏幕上FlowLayoutflownewFlowLayout();// 创建流式布局对象jf.setLayout(flow);// 窗体设置布局}staticvoidmain(){ModifyUIuinewModifyUI();ui.showUI();}}此时我们运行程序会得到这样一个窗口注黑色是背景色不是界面的一部分注意jf.setVisible(true);用于将窗体显示到屏幕上最好放在所有组件添加完毕之后。因为如果过早调用后续添加的组件可能无法立即显示比如图片。将setVisible(true)放在最后可以确保所有组件都已布局完成一次性完整地呈现给用户。步骤四4 创建组件对象 设置好内容、属性之后添加到窗体上按钮-JButton文本输入框-JTextField密码输入框-JPasswordField标签-JLabel图片-ImageIconpackageFrame0808;importjavax.swing.*;importjava.awt.*;publicclassModifyUI{publicvoidshowUI(){JFramejfnewJFrame();jf.setTitle(用户注册界面);jf.setSize(400,300);jf.setLocation(100,200);jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);FlowLayoutflownewFlowLayout();// 创建流式布局对象jf.setLayout(flow);// 窗体设置布局JButtonbtn1newJButton(同意以上协议并注册);// 创建按钮JButtonbtn2newJButton(点我换一张);JCheckBoxchenewJCheckBox(我已阅读并同意用户注册协议);// 创建多选框JLabelJla1newJLabel(注册新用户);// 创建标签JLabelJla2newJLabel(用户名);JTextFieldJtf2newJTextField(30);// 创建文本输入框JLabelJla3newJLabel(手机号);JTextFieldJtf3newJTextField(30);JLabelJla4newJLabel(电子邮件);JTextFieldJtf4newJTextField(30);JLabelJla5newJLabel(登录密码);JPasswordFieldJtf5newJPasswordField(30);// 创建密码输入框JLabelJla6newJLabel(确认密码);JPasswordFieldJtf6newJPasswordField(30);JLabelJla7newJLabel(验证码);JTextFieldJtf7newJTextField(6);ImageIconimgnewImageIcon(D:\\CodeTeach\\Java\\gdrz.png);JLabelimgJlanewJLabel(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);// 可视化 显示到屏幕上}staticvoidmain(){ModifyUIuinewModifyUI();ui.showUI();}}再次运行程序会得到这样一个窗口注黑色是背景色不是界面的一部分经过四个步骤后我们就得到了一个较为粗糙的用户注册界面实例优化优化一对齐与换行对齐可以通过调整空格数量来实现换行则可以利用空白标签强制 FlowLayout 提前换行——因为 FlowLayout 本身就具备自动换行能力。流式布局的规则是组件从左到右依次排列当一行容纳不下下一个组件时会自动换到下一行继续摆放。按照这个思路将代码进行修改后我们可以得到如下窗口注黑色是背景色不是界面的一部分可以看到组件排列更加整齐使界面更美观。优化二固定组件大小这里涉及 Dimension 组件它用于封装组件的宽度和高度手动固定组件大小不让系统自动缩放。用法很简单先创建 Dimension 对象指定宽高再通过setPreferredSize()方法设置给组件即可固定其大小。这里用三行代码来演示它的用法//1. 创建Dimension尺寸对象规定宽160高35DimensionbtnSizenewDimension(160,35);//2. 创建按钮JButtonbtnRegnewJButton(同意以上协议并注册);//3. 给按钮设置固定首选尺寸btnReg.setPreferredSize(btnSize);这样我们的界面又得到了升级注黑色是背景色不是界面的一部分优化三大小和颜色如果组件的大小和颜色都不能设置窗口会显得十分单调。下面我们来讲解 Font 和 Color 两个组件。一、Font 类完整用法java.awt.Font1. 作用专门设置 Swing 组件上文字的字体类型、样式加粗 / 斜体、字号大小。所有带文字的组件如 JLabel、JButton、JTextField、JCheckBox全都通用。2. 标准格式Font自定义字体对象newFont(字体名称,字体样式常量,字号大小);参数详解字体名称Windows 系统通用 “微软雅黑”、“宋体”、“黑体”、Arial字体样式常量三选一或组合Font.PLAIN普通常规字体Font.BOLD加粗Font.ITALIC斜体组合写法Font.BOLD Font.ITALIC 加粗 斜体字号int 数字常用 12、13、14、163. 调用格式组件对象.setFont(字体对象);4. 使用示例// 创建字体微软雅黑、加粗、14号字FontbtnFontnewFont(微软雅黑,Font.BOLD,14);// 创建注册按钮JButtonbtnRegnewJButton(同意以上协议并注册);// 绑定到注册按钮btnReg.setFont(btnFont);二、Color 类完整用法java.awt.Color1. 两大核心功能setForeground()前景色 文字颜色setBackground()背景颜色 组件底色2. 方式 1直接使用系统自带颜色常量最简单内置常用常量Color.WHITE 白色、Color.BLACK 黑色、Color.GRAY 灰色、Color.BLUE 蓝色、Color.RED 红色、Color.GREEN 绿色// 按钮文字设为白色btnReg.setForeground(Color.WHITE);3. 方式 2RGB 自定义颜色较为灵活构造格式Color颜色对象newColor(红色值,绿色值,蓝色值);三个数值范围0~255数值越大对应颜色越亮。示例深蓝按钮ColorbtnBgColornewColor(25,118,210);// 按钮深蓝色底色ColorbtnTextColorColor.WHITE;// 按钮白色文字JButtonbtnRegnewJButton(同意以上协议并注册);// 创建按钮btnReg.setBackground(btnBgColor);// 设置组件底色btnReg.setForeground(btnTextColor);// 设置文字颜色JLabel 标签背景色不生效解决办法JLabel 默认透明直接 setBackground 看不到颜色必须额外一行代码开启不透明JLabeljla2newJLabel(用户名);jla2.setBackground(Color.LIGHT_GRAY);jla2.setOpaque(true);// 关键开启不透明背景色才能正常显示三、推荐方案颜色 字体的不同设定把 Font 和 Color 组合起来可以搭配出多种风格。下面给出 3 套「颜色 字体」的推荐方案方案 1深蓝底 白色加粗字主操作按钮最醒目// 字体微软雅黑、加粗、14号FontbtnFontnewFont(微软雅黑,Font.BOLD,14);// 颜色深蓝底色 白色文字ColorbtnBgColornewColor(25,118,210);ColorbtnTextColorColor.WHITE;JButtonbtnRegnewJButton(同意以上协议并注册);btnReg.setFont(btnFont);// 设置字体btnReg.setBackground(btnBgColor);// 设置底色btnReg.setForeground(btnTextColor);// 设置文字颜色方案 2浅灰底 深灰普通字次要按钮低调不抢眼// 字体宋体、常规、12号FontbtnFontnewFont(宋体,Font.PLAIN,12);// 颜色浅灰底色 深灰文字ColorbtnBgColornewColor(230,230,230);ColorbtnTextColornewColor(80,80,80);JButtonbtnRegnewJButton(点我换一张);btnReg.setFont(btnFont);btnReg.setBackground(btnBgColor);btnReg.setForeground(btnTextColor);方案 3绿色底 白色斜体字强调提示类按钮// 字体微软雅黑、斜体、13号FontbtnFontnewFont(微软雅黑,Font.ITALIC,13);// 颜色绿色底色 白色文字ColorbtnBgColornewColor(46,160,67);ColorbtnTextColorColor.WHITE;JButtonbtnRegnewJButton(我已阅读并同意用户注册协议);btnReg.setFont(btnFont);btnReg.setBackground(btnBgColor);btnReg.setForeground(btnTextColor);这样通过「颜色 字体」的不同组合就能让界面按钮层次分明、风格统一。四、案例最终优化效果源码完整源码packageFrame0808;importjavax.swing.*;importjava.awt.*;publicclassModifyUI{publicvoidshowUI(){JFramejfnewJFrame();jf.setTitle(用户注册界面);jf.setSize(400,300);jf.setLocation(100,200);jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);FlowLayoutflownewFlowLayout();// 创建流式布局对象jf.setLayout(flow);// 窗体设置布局DimensionbtnSize1newDimension(300,25);//1. 创建Dimension尺寸对象规定宽100高35ColorBgnewColor(25,118,210);ColorFgColor.WHITE;JButtonbtn1newJButton(同意以上协议并注册);//2. 创建按钮btn1.setPreferredSize(btnSize1);//3. 给按钮设置固定首选尺寸btn1.setForeground(Fg);btn1.setBackground(Bg);btn1.setOpaque(true);DimensionbtnSize2newDimension(100,25);JButtonbtn2newJButton(点我换一张);btn2.setPreferredSize(btnSize2);FontlabelFontnewFont(软雅黑体,Font.BOLD,16);JLabelJla1newJLabel(注册新用户);// 创建标签Jla1.setFont(labelFont);JCheckBoxchenewJCheckBox(我已阅读并同意用户注册协议);// 创建多选框JLabelJla2newJLabel( 用户名);JTextFieldJtf2newJTextField(30);// 创建文本输入框JLabelJla3newJLabel( 手机号);JTextFieldJtf3newJTextField(30);JLabelJla4newJLabel(电子邮件);JTextFieldJtf4newJTextField(30);JLabelJla5newJLabel(登录密码);JPasswordFieldJtf5newJPasswordField(30);// 创建密码输入框JLabelJla6newJLabel(确认密码);JPasswordFieldJtf6newJPasswordField(30);JLabelJla7newJLabel( 验证码);JTextFieldJtf7newJTextField(6);ImageIconimgnewImageIcon(D:\\CodeTeach\\Java\\gdrz.png);JLabelimgJlanewJLabel(img);// 图片放在标签上将标签加载到窗体上JLabelblank1newJLabel( );JLabelblank2newJLabel( );JLabelblank3newJLabel( );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);// 可视化 显示到屏幕上}staticvoidmain(){ModifyUIuinewModifyUI();ui.showUI();}}
返回列表