运行的结果:
源码以及图片:
功能的实现:
实现1:
对每个文本框进行监控,鼠标定在哪的时候,下边框变为蓝色
实现2:
用户光标定到文本框的时候,要是没有输入信息,就把里面的提示文字给清除掉,给用户一个好的体验
实现3:
登录的时候对账号和密码检验,要是账号和密码都是admin是登录成功,否则登录失败并提醒用户
没输入密码和账号的时候也进行提示
分析:
这个的页面分为是三个部分,分别是上 中 下.其中上是一个背景,中是登录需要输入和选择的,下是注册账号和二维码
布局:
知识点:
定位:
定位用的大部分都是绝对定位的,在学web时候,感觉绝对定位是真的好用,在这里面也是. 怎么去设置为绝对定位呢?
绝对定位的相关知识点:
绝对定位是一种在 GUI 编程中使用的布局方式，它允许你直接指定组件在容器中的精确位置和尺寸。与其他布局管理器相比，绝对定位提供了更大的灵活性，可以精确控制组件的位置和大小。
使用绝对定位时，你需要将容器的布局管理器设置为 null，这样容器就不会自动调整组件的位置和大小。然后，你可以使用 setBounds() 方法来设置组件的位置和大小。setBounds() 方法接受四个参数：x、y、width 和 height，分别表示组件的左上角在容器中的 x 和 y 坐标，以及组件的宽度和高度。
panel.setLayout(null); // 使用绝对定位panel2.setBounds(0, 0, 591, 216); // 使用setBounds方法设置组件的位置和大小代码：
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class MyQQLogin {
public static void main(String[] args) {
JFrame f = new JFrame("模拟QQ登录");
f.setSize(600, 500);
f.setLocation(300, 300);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
panel.setLayout(null); // 使用绝对定位
panel.setBackground(Color.WHITE); // 设置背景颜色为白色
f.add(panel);
JPanel panel2 = new JPanel();
JLabel label = new JLabel(new ImageIcon("D:\\杂论\\background.png"));
panel2.add(label);
panel2.setBounds(0, 0, 591, 216); // 使用setBounds方法设置组件的位置和大小
panel2.setBackground(Color.WHITE); // 设置背景颜色为白色
panel.add(panel2);
JPanel panelCenter = new JPanel();
panelCenter.setLayout(null);//绝对定位
panelCenter.setBackground(Color.WHITE); // 设置背景颜色为白色
/*----------------qq号码start--------------------*/
JPanel QQNumber = new JPanel();
JLabel labelQQ = new JLabel(new ImageIcon("D:\\杂论\\qq.png"));
JTextField Number = new JTextField("QQ号码/手机/邮箱", 20);
Number.setPreferredSize(new Dimension(400, 35));
Number.setBorder(null);
Number.setFont(new Font("宋体", Font.PLAIN, 16));
QQNumber.add(labelQQ);
QQNumber.add(Number);
QQNumber.setBounds(-100, 0, 400, 40);
QQNumber.setBackground(Color.WHITE); // 设置背景颜色为白色
panelCenter.add(QQNumber);
//对Number输入框进行监控
// 添加焦点监听器
Number.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
Number.addFocusListener(new FocusListener() {
@Override
public void focusGained(FocusEvent e) {
if (Number.getText().equals("QQ号码/手机/邮箱")) {
Number.setText("");
Number.setForeground(Color.BLACK);
}
QQNumber.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, Color.BLUE));
Number.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, Color.BLUE));
}
@Override
public void focusLost(FocusEvent e) {
if (Number.getText().isEmpty()) {
Number.setForeground(Color.GRAY);
Number.setText("QQ号码/手机/邮箱");
}
QQNumber.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
Number.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
}
});
/*---------------qq号码end--------------------*/
/*---------------qq密码start------------------*/
JPanel passWord = new JPanel();
JLabel labelPassWord = new JLabel(new ImageIcon("D:\\杂论\\password.png"));
JTextField pass = new JTextField("密码", 20);
pass.setPreferredSize(new Dimension(400, 35));
pass.setBorder(null);
pass.setFont(new Font("宋体", Font.PLAIN, 16));
pass.setForeground(Color.GRAY);
passWord.add(labelPassWord);
passWord.add(pass);
passWord.setBounds(-100, 40, 400, 40);
passWord.setBackground(Color.WHITE); // 设置背景颜色为白色
panelCenter.add(passWord);
passWord.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
pass.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
pass.addFocusListener(new FocusListener() {
@Override
public void focusGained(FocusEvent e) {
String password = new String(pass.getText());
if (password.equals("密码")) {
pass.setText("");
pass.setForeground(Color.BLACK);
}
passWord.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, Color.BLUE));
pass.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, Color.BLUE));
}
@Override
public void focusLost(FocusEvent e) {
String password = new String(pass.getText());
if (password.isEmpty()) {
pass.setForeground(Color.GRAY);
pass.setText("密码");
}
passWord.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
pass.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(192, 192, 192)));
}
});
/*---------------qq密码end------------------*/
/*---------------多选按钮start--------------*/
JPanel choice = new JPanel();
choice.setLayout(null);
JCheckBox automaticLogin = new JCheckBox("自动登录");
automaticLogin.setBackground(Color.WHITE);
automaticLogin.setBounds(0, 0, 100, 40);
JCheckBox rememberPass = new JCheckBox("记住密码");
rememberPass.setBounds(125, 0, 100, 40);
JLabel findPass = new JLabel("找回密码");
findPass.setBounds(250, 0, 100, 40);
automaticLogin.setOpaque(false); // 设置为不透明
rememberPass.setOpaque(false); // 设置为不透明
findPass.setForeground(Color.black); // 设置字体颜色为蓝色
choice.add(automaticLogin);
choice.add(rememberPass);
choice.add(findPass);
choice.setBounds(0, 80, 400, 40);
choice.setBackground(Color.WHITE); // 设置背景颜色为白色
panelCenter.add(choice);
/*------------多选按钮end------------*/
/*-------------登录界面start-------------*/
JPanel login = new JPanel();
JButton secureLogin = new JButton("secureLogin", new ImageIcon("D:\\杂论\\安全登录.png"));
secureLogin.setPreferredSize(new Dimension(320, 40));
secureLogin.setBackground(new Color(8, 186, 253));
secureLogin.setFont(new Font("Arial", Font.BOLD, 16)); // 设置字体为Arial，加粗，大小为16
secureLogin.setForeground(Color.WHITE); // 设置字体颜色为白色
secureLogin.setBorderPainted(false); // 去除按钮的边框绘制
login.add(secureLogin);
login.setBounds(0, 120, 320, 50);
login.setBackground(new Color(8, 186,253));
panelCenter.add(login);
secureLogin.addActionListener(new ActionListener() {//事件的监控
@Override
public void actionPerformed(ActionEvent e) {
String account = Number.getText();
String password = pass.getText();
if (account.equals("admin") && password.equals("admin")) {
JOptionPane.showMessageDialog(f, "登录成功");
} else if(account.equals("QQ号码/手机/邮箱")) {
JOptionPane.showMessageDialog(f, "请输入账号");
} else if(password.equals("密码")) {
JOptionPane.showMessageDialog(f, "请输入密码");
}
else {
JOptionPane.showMessageDialog(f, "账号或密码错误");
}
}
});
/*------------登录界面end----------------------*/
JPanel last = new JPanel();
last.setBounds(20, 420, 60, 30);
last.setBackground(Color.WHITE); // 设置背景颜色为白色
JPanel register = new JPanel();//注册账号
register.setBackground(Color.WHITE);
JLabel signIn = new JLabel("注册账号");
signIn.setFont(new Font("宋体", Font.PLAIN, 14));// 设置字体
signIn.setForeground(Color.GRAY);// 设置字体颜色
register.add(signIn);
last.add(register);
JPanel QRCode = new JPanel();
QRCode.setBackground(Color.WHITE);
QRCode.setBounds(500, 400, 45, 46);
JLabel QR = new JLabel(new ImageIcon("D:\\杂论\\QRCode.png"));
QRCode.add(QR);
panelCenter.setBounds(130, 240, 340, 180);//居中显示
panel.add(panelCenter); // 将panelCenter添加到panel中
panel.add(last);
panel.add(QRCode);
f.setVisible(true);
f.addWindowListener(new WindowAdapter() {
public void windowOpened(WindowEvent e){
f.requestFocus(); // 将焦点设置到窗体上
}
});
}
}代码各个部分的分析：
创建JFrame对象
JFrame frame = new JFrame("QQ登录");
frame.setSize(400, 300);
frame.setLocationRelativeTo(null);
frame.setResizable(false);通过new JFrame("QQ登录")创建一个JFrame对象，并设置标题为"QQ登录"。使用setSize()方法设置窗口的大小为400x300像素。使用setLocationRelativeTo(null)方法将窗口居中显示。使用setResizable(false)方法禁止调整窗口大小。
创建主面板JPanel对象
JPanel panel = new JPanel();
panel.setBackground(Color.WHITE);添加JLabel组件
JPanel panel2 = new JPanel();
ImageIcon imageIcon = new ImageIcon("logo.png");
JLabel label = new JLabel(imageIcon);
panel2.add(label);
panel.add(panel2);使用new JPanel()创建一个JPanel对象，并将其赋给panel2变量。使用new ImageIcon("logo.png")创建一个带有指定图像的ImageIcon对象，其中"logo.png"是图片文件的路径。使用new JLabel(imageIcon)创建一个带有图像的JLabel对象，并将其赋给label变量。将label添加到panel2中，然后将panel2添加到主面板panel中。
创建输入框组件和多选按钮组件
JPanel panelCenter = new JPanel();
panelCenter.setLayout(null);
panelCenter.setBackground(Color.WHITE);
JTextField accountField = new JTextField("QQ号码/手机/邮箱");
accountField.setBounds(50, 50, 300, 30);
// 添加焦点监听器，以清除和恢复默认文本
JPasswordField passwordField = new JPasswordField("密码");
passwordField.setBounds(50, 100, 300, 30);
// 添加焦点监听器，以清除和恢复默认文本
JCheckBox autoLoginCheckbox = new JCheckBox("自动登录");
autoLoginCheckbox.setBounds(50, 150, 100, 30);
JCheckBox rememberPwdCheckbox = new JCheckBox("记住密码");
rememberPwdCheckbox.setBounds(150, 150, 100, 30);
JLabel forgetPwdLabel = new JLabel("找回密码");
forgetPwdLabel.setBounds(250, 150, 100, 30);
// 添加鼠标事件监听器使用new JPanel()创建一个JPanel对象，并将其赋给panelCenter变量。使用setLayout(null)方法将面板的布局管理器设置为绝对定位，这样可以手动指定组件的位置和大小。通过setBackground(Color.WHITE)方法将面板的背景颜色设置为白色。
使用new JTextField("QQ号码/手机/邮箱")创建一个文本框组件，并将其赋给accountField变量。使用setBounds(50, 50, 300, 30)方法设置组件的位置和大小。你可以根据需要修改这些值。
类似地，使用new JPasswordField("密码")创建一个密码输入框组件，并将其赋给passwordField变量。使用setBounds(50, 100, 300, 30)方法设置组件的位置和大小。
使用new JCheckBox("自动登录")创建一个多选按钮组件，并将其赋给autoLoginCheckbox变量。使用setBounds(50, 150, 100, 30)方法设置组件的位置和大小。
类似地，使用new JCheckBox("记住密码")创建一个多选按钮组件，并将其赋给rememberPwdCheckbox变量。使用setBounds(150, 150, 100, 30)方法设置组件的位置和大小。
使用new JLabel("找回密码")创建一个标签组件，并将其赋给forgetPwdLabel变量。使用setBounds(250, 150, 100, 30)方法设置组件的位置和大小。
监听输入框组件
为输入框组件添加焦点监听器，以在用户点击输入框时清除默认文本，并在用户离开输入框时恢复默认文本
添加登录按钮和事件监听器
JButton loginButton = new JButton("登录");
loginButton.setBounds(150, 200, 100, 30);
// 添加点击事件监听器使用new JButton("登录")创建一个按钮组件，并将其赋给loginButton变量。使用setBounds(150, 200, 100, 30)方法设置组件的位置和大小。
你可以为登录按钮添加点击事件监听器，以执行登录操作。
创建小面板并添加到主面板中
JPanel registerPanel = new JPanel();
registerPanel.setBounds(0, 250, 200, 50);
// 添加鼠标事件监听器
JPanel qrcodePanel = new JPanel();
qrcodePanel.setBounds(200, 250, 200, 50);
// 添加鼠标事件监听器
panel.add(registerPanel);
panel.add(qrcodePanel);使用new JPanel()创建一个JPanel对象，并将其赋给registerPanel变量。使用setBounds(0, 250, 200, 50)方法设置组件的位置和大小。
类似地，使用new JPanel()创建一个JPanel对象，并将其赋给qrcodePanel变量。使用setBounds(200, 250, 200, 50)方法设置组件的位置和大小。
将registerPanel和qrcodePanel添加到主面板panel中。
设置窗口可见
frame.add(panel);
frame.setVisible(true);
// 添加窗口事件监听器，以确保窗口获取焦点使用add(panel)方法将主面板panel添加到窗口frame中。使用setVisible(true)方法将窗口设置为可见状态。
添加一个窗口事件监听器，以确保窗口获取焦点。
