介绍一下QQ登入界面的设计:
内容:
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自带的装饰后,会失去很多功能:
没有放大/缩小的功能,甚至都不能拖动了!没关系都可以自己写
三.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:
解决办法:
方法1:移除自己的jdk,使用eclipse自带的jdk(这个就不说了:remove,在add Library就可以了);
方法2:如图
五.最后往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);//去边框
}
}
总的设计:从上往下,从左往右依次添加控件,这样就不会太乱。