admin管理员组文章数量:1646328
素材获取可关注微信公众号:开源IT,后台回复 "素材" 免费获取。
最近学习的课程有点紧,所以暂时放下了SSH的学习,等时间稍微松点再开始SSH博客的跟进。在这个学期的JAVA课程已经学到了图形用户界面的章节了,开始接触到awt和swing的学习,就想着用所学的知识来设计一个仿照QQ的登录界面,如果有时间多的话,接下来还准备继续完善这个小程序,可能还会尝试实现登录,添加数据库以及添加网络功能,实现简单的聊天功能。先不想这么多,反正要看有没有时间。进入正题,开始着手设计仿QQ界面。
要实现QQ界面的设计,首先先想好思路,这里我使用的是BorderLayout布局管理器,将QQ界面分为东南西北中五个部分。北部添加一张gif图 ,西部就是一个头像,中部实现用户框和密码框,” 记住密码 ”以及” 自动登录 ”的复选框,南部实现一个登录按钮的图片,东部则是" 注册账号 " 和” 忘记密码 “的标签。好了,现在上代码。
1.设计Frame
public class InitSysLogin extends JFrame{
private static final long serialVersionUID = 1L;
public static final String LOG_TITLE="登录";
public static final int WINDOW_WIDTH=420;
public static final int WINDOW_HEIGHT=300;
public static final int LOCATION_X=497;
public static final int LOCATION_Y=242;
public void initLogin(){
InitSysLogin login=new InitSysLogin();
login.setTitle(LOG_TITLE);
login.setSize(WINDOW_WIDTH, WINDOW_HEIGHT);
login.setLocation(LOCATION_X, LOCATION_Y);
login.setUndecorated(true); //设置frame边框不可见
login.setResizable(false); //禁止改变窗口大小
login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
login.setVisible(true);
}
}
这里将frame的边框设置成不可见,所以也不能移动窗口了。本文目的旨在使用BorderLayout来设计界面,所以暂不实现拖动窗口的功能。
2.添加BorderLayout布局管理器,并在五个部位添加一个JPanel
public class InitSysLogin extends JFrame{
private static final long serialVersionUID = 1L;
public static final String LOG_TITLE="登录";
public static final int WINDOW_WIDTH=420;
public static final int WINDOW_HEIGHT=300;
public static final int LOCATION_X=497;
public static final int LOCATION_Y=242;
public void initLogin(){
InitSysLogin login=new InitSysLogin();
login.setTitle(LOG_TITLE);
login.setSize(WINDOW_WIDTH, WINDOW_HEIGHT);
login.setLocation(LOCATION_X, LOCATION_Y);
login.setUndecorated(true); //设置frame边框不可见
login.setResizable(false); //禁止改变窗口大小
BorderLayout border_layout=new BorderLayout();
login.setLayout(border_layout);
/**
* 北部面板
*/
JPanel panel_north=CreatePanel.CreateNorthPanel();
login.add(panel_north,BorderLayout.NORTH);
/**
* 中部面板
*/
JPanel panel_center=CreatePanel.CrateCenterPanel();
login.add(panel_center,BorderLayout.CENTER);
/**
* 西部面板
*/
JPanel panel_west=CreatePanel.CreateWestPanel();
login.add(panel_west,BorderLayout.WEST);
/**
* 南部面板
*/
JPanel panel_south=CreatePanel.CreateSouthPanel();
login.add(panel_south,BorderLayout.SOUTH);
/**
* 东部面板
*/
JPanel pannel_east=CreatePanel.CrateEastPanel();
login.add(pannel_east,BorderLayout.EAST);
login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
login.setVisible(true);
}
}
3.新建一个类来专门用来设计布局,类名为CreatePanel
public class CreatePanel {
public static final int WINDOW_WIDTH=420;
public static final int WINDOW_HEIGHT=300;
public static final int LOCATION_X=497;
public static final int LOCATION_Y=242;
/**
* 创建北部面板
* @return
*/
public static JPanel CreateNorthPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(0, 140));
ImageIcon image=new ImageIcon("images/back.gif");
JLabel background=new JLabel(image);
background.setBounds(0,0,420,180);
panel.add(background);
return panel;
}
/**
* 创建西部面板
*/
public static JPanel CreateWestPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(130,0));
ImageIcon image=new ImageIcon("images/HeadImage.png");
JLabel background=new JLabel(image);
background.setBounds(0, 0, 120, 120);
panel.add(background);
return panel;
}
/**
* 创建南部面板
*/
public static JPanel CreateSouthPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(0, 50));
MyLineBorder myLineBorder = new MyLineBorder(new Color(192, 192, 192), 1 , true);
/**
* 登录按钮
*/
ImageIcon image=new ImageIcon("images/login_button.png");
JButton btn=new JButton(image);
btn.setBounds(130,0,image.getIconWidth()-10,image.getIconHeight()-10);
btn.setBorder(myLineBorder);
panel.add(btn);
return panel;
}
/**
* 创建中部面板
*/
public static JPanel CrateCenterPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(0, 180));
MyLineBorder myLineBorder = new MyLineBorder(new Color(192, 192, 192), 1 , true);
/**
* 用户名框
*/
JTextField username=new JTextField();
username.setBounds(0, 15, 175, 30);
username.setBorder(myLineBorder);
/**
* 密码名框
*/
JPasswordField password=new JPasswordField(JPasswordField.LEFT);
password.setBounds(0, 44, 175, 30);
password.setBorder(myLineBorder);
JCheckBox rember_pwd=new JCheckBox("记住密码");
rember_pwd.setBounds(0, 80, 80, 20);
JCheckBox login_auto=new JCheckBox("自动登录");
login_auto.setBounds(100, 80, 80, 20);
panel.add(rember_pwd);
panel.add(username);
panel.add(password);
panel.add(login_auto);
return panel;
}
/**
* 创建东部面板
*/
public static JPanel CrateEastPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(100, 0));
JLabel regeist=new JLabel("注册账号");
regeist.setForeground(new Color(100,149,238));
regeist.setBounds(0, 13, 60, 30);
regeist.setFont(new Font("宋体",0,12));
JLabel regetpwd=new JLabel("找回密码");
regetpwd.setForeground(new Color(100,149,238));
regetpwd.setBounds(0, 43, 60, 30);
regetpwd.setFont(new Font("宋体",0,12));
panel.add(regetpwd);
panel.add(regeist);
return panel;
}
}
4.创建一个images文件夹,并且导入相关图片
5.得到结果如图:
虽然和QQ的登录界面还差太多,但是基本的样子还是出来了。自己动手做一遍才知道一个看似很简单的东西,对于初学者来说也是可以学到很多东西的,做的时候会遇到许多让自己困惑的问题,有些功能实现起来也没我们想象的那么简单。但是,相信只要慢慢摸索,终有一天会把这个界面完善到自己满意的程度。不得不说QQ的登录界面还是做得挺漂亮的!我的这个还亟待完善,日后也会慢慢补充。
6.制作过程中的一些问题的解决
a. JTextField输入框的边框是很难看的,方方正正的,看起来有审美疲劳(个人觉得),所以我在程序中专门用了一个类MyLineBorder来实现一个圆角矩形,和用了一个浅色边框,如上图所示,自己当初做的时候有这个想法,但是不会实现,就百度查了下,借鉴了别人的方法,就直接拿来用了。
public class MyLineBorder extends LineBorder{
private static final long serialVersionUID = 1L;
public MyLineBorder(Color color, int thickness, boolean roundedCorners) {
super(color, thickness, roundedCorners);
}
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
Color oldColor = g.getColor();
Graphics2D g2 = (Graphics2D)g;
int i;
g2.setRenderingHints(rh);
g2.setColor(lineColor);
for(i = 0; i < thickness; i++) {
if(!roundedCorners)
g2.drawRect(x+i, y+i, width-i-i-1, height-i-i-1);
else
g2.drawRoundRect(x+i, y+i, width-i-i-1, height-i-i-1, 5, 5);
}
g2.setColor(oldColor);
}
}
b. 本例中在Panel中插入图片是通过定义一个JLabel实例和ImageIcon实例,然后直接把ImageIcon参数传给JLabel来实现的。
c. 按钮也是直接将图片作为JButton的背景来实现的。
d. 在Panel中添加组将时,将其布局设置成null了,设置成null可以根据自己的需求调整各组件的位置,添加组件的过程,实际上就是一个不断调整和修改的过程,特别是调整 位置的时候挺头疼的,由于是刚接触,也不知道有什么技巧,纯粹是在摸索。
e.若要继续完善QQ界面的功能,大部分还需要用到监听机制(个人这么觉得)来实现,由于还没学,也没来得及完善了。
版权声明:本文标题:Swing学习----------QQ登录界面制作(一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729446904a1201489.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论