Java swing 实现高仿 QQ2013之登入界面设计

时间:2022-10-08 21:11:06

介绍一下QQ登入界面的设计:

Java swing 实现高仿 QQ2013之登入界面设计

内容:

1.背景图片的设置

2.JFrame窗体大小,去掉window装饰的设置

3.JFrame窗体去掉自带的window修饰后(窗体不能动),拖动监听编写

4.窗体圆角设置

5.最后往JFrame窗体添加控件(最后还是决定:写一个类继承JButton)

6.源码和图片下载

-----------------------------------------------------------------------------

一.背景图片的设置:

这个JFrame是一个绝对布局(空布局),背景图是一个JLabel上面添加一张gif的图片,

使得有动态的效果:

private void setBackgroudImage() 
{
((JPanel) this.getContentPane()).setOpaque(false);//内容面板设置成透明
ImageIcon img = new ImageIcon("images/loginImage/loginBack.gif"); // 添加图片
JLabel lb_backgroud = new JLabel(img);
lb_backgroud.setBounds(0, 0, img.getIconWidth(), img.getIconHeight());
this.getLayeredPane().add(lb_backgroud, new Integer(Integer.MIN_VALUE)); //添加到面板上
}




 

 
二.JFrame窗体大小,装饰的设置: 

这里设置窗体的一些基本属性:空布局/大小/大小不可变/去掉window装饰/总是显示在前面等;

这里主要注意:去掉window自带的装饰后,会失去很多功能:

Java swing 实现高仿 QQ2013之登入界面设计

没有放大/缩小的功能,甚至都不能拖动了!没关系都可以自己写

三.JFrame窗体去掉自带的window修饰后(窗体不能拖动),拖动监听编写

让窗体重新“动起来”,我们依靠鼠标监听,重新设置窗体的位置就可以了(setLocation(x,y))

private void setFrameMove() 
{
this.addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent e) {
pt_press = new Point(e.getX(), e.getY());
}
});

this.addMouseMotionListener(new MouseAdapter() {
public void mouseDragged(MouseEvent e) {
setLocation(new Point(getLocation().x + e.getX() - pt_press.x,
getLocation().y + e.getY() - pt_press.y));
}
});
}

四.窗体 圆角 设置:

窗体圆角:主要用到了一个sun公司私有的包,(sun不提倡使用),因为这个包不具备跨平台性:

注意:添加代码后,你如果没有设置,可能会报错,因为自己下载的jdk默认把sun公司私有包

设置成erro:

Java swing 实现高仿 QQ2013之登入界面设计

解决办法:

方法1:移除自己的jdk,使用eclipse自带的jdk(这个就不说了:remove,在add Library就可以了);

方法2:如图

Java swing 实现高仿 QQ2013之登入界面设计


五.最后往JFrame窗体添加控件

最自己在做这个项目的时候发现QQ有很多按钮,基本设置的属性都很相似,所以决定

自定义一个类继承JButton,配置好一些共同的属性。

public class IconButton extends JButton {
/**
*
* @param common 鼠标没在按钮上显示的图片
* @param over 鼠标放上去显示的图片 可能为空
* @param press 鼠标按下显示的图片可能为空
*/
IconButton(Icon common, Icon over, Icon press)
{
setPreferredSize(new Dimension(common.getIconWidth(),
common.getIconHeight()));
setIcon(common);// 设置鼠标没在按钮上显示的图片
setRolloverEnabled(true);// 翻转效果: 鼠标放上去/移开 显示 不同的图片
if(over!=null)//可能没有图片,传null过来
setRolloverIcon(over);//鼠标放上去显示的图片
if(press!=null)
setPressedIcon(press);//鼠标按下显示的图片
setContentAreaFilled(false); // 设置不绘制按钮的内容区域
setBorderPainted(false);//去边框
}
}




总的设计:从上往下,从左往右依次添加控件,这样就不会太乱。