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

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

Java swing 实现高仿 QQ2013之登入界面设计_第1张图片

内容:

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之登入界面设计_第2张图片

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

三.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之登入界面设计_第3张图片

解决办法:

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

方法2:如图

Java swing 实现高仿 QQ2013之登入界面设计_第4张图片


五.最后往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);	//去边框
	}
}




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



你可能感兴趣的:(JAVASE,高仿QQ2013登入界面,源码,图片)