fuhaots2009

写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完善,明天开始继续搞爬虫,等有时间时再完善,先凑和着吧:

本篇博文就分析一下这个界面设计中的几个关键点,在阅读本博文之前请先阅读我个人博客上关于模仿QQ界面先行篇

界面编程模仿篇(模仿腾讯QQ登录界面先行篇)

本程序开源,下载地址,请查看我个人博客:烟雨林

对于还不会使用github的同学,以下是我的个人博客上的两篇教程

Github简明教程(入门篇)

Github上如何给别人贡献代码

程序采用Java语言实现,本人只懂C++/Java/Python/Shell,其他程序语言一概不懂,等有时间再写其他两种语言的登录版本,可以订阅我的个人博客,获取后绪相关文章与资料

1、QQ界面登录程序最显著的地方就是界面无标题栏,所以第一步就是去掉标题栏,Java中给JFrame去标题栏的方法很easy

1
setUndecorated( true );

的确很easy是吧,但问题又出来了,是去掉了,连窗口的边框都去掉了,这肯定不是想要的结果,在这里可以采用JInternalFrame实现去标题栏同时保留窗口的边框,核心代码如下(代码中jifJInternalFrame类型):

1
2
3
javax.swing.plaf.InternalFrameUI jf=jif.getUI();
((javax.swing.plaf.basic.BasicInternalFrameUI)jf).setNorthPane( null );
jif.setBorder(BorderFactory.createLineBorder(Color.LIGHT_GRAY, 2 ));

2、QQ界面窗口居中

1
2
setLocation((Toolkit.getDefaultToolkit().getScreenSize().width-getSize().width)/ 2 ,
(Toolkit.getDefaultToolkit().getScreenSize().height-getSize().height)/ 2 );

3、由于去掉了标题栏,结果最小化,最大化,关闭均被去掉了,更重要的一个功能是窗口随鼠标拖动也被去掉了,因此这些功能都需要自已再重新实现,实现的代码也是很easy的,给JInternalFrame增加监听器,此时得注意的是监听器里操作的对象应该是JFrame,因为最终的目的是对JFrame操作,窗口移动的核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//给窗体增加拖动功能
void  setWindowDray(JComponent jc){
     jc.addMouseListener( new  MouseAdapter() {
         @Override
         public  void  mousePressed(MouseEvent e) {
             isDragged= true ;
             axis= new  Point(e.getX(),e.getY());
             jif.setCursor( new  Cursor(Cursor.MOVE_CURSOR));
         }
         @Override
         public  void  mouseReleased(MouseEvent e) {
             isDragged= false ;
             jif.setCursor( new  Cursor(Cursor.DEFAULT_CURSOR));
         }          
     });
     jc.addMouseMotionListener( new  MouseMotionAdapter() {
         @Override
         public  void  mouseDragged(MouseEvent e) {
             if (isDragged){
                 mainLogin.setLocation(e.getXOnScreen()-axis.x,e.getYOnScreen()-axis.y);
             }
         }
     });
}

4、重写JPanel,给JPanel增加背景图片,核心代码如下:

1
2
3
4
5
6
URL imgUrl=getClass().getResource( "pics/afternoon.jpg" );
URL textureUrl=getClass().getResource( "pics/texture.png" );
ImageIcon img= new  ImageIcon(imgUrl);
ImageIcon txt= new  ImageIcon(textureUrl);
g.drawImage(img.getImage(), x, y, this .getSize().width, this .getSize().height, this );
g.drawImage(txt.getImage(), x- 50 , y, this .getSize().width+ 100 , this .getSize().height, this );

5、按钮的相关设置,对JButton的设置主要是设置背景的透明化,大小,内边框等,对JLabel以及JCheckbox作类似处理,相关代码例子如下:

1
2
3
4
5
6
7
jbtn.setOpaque( false );
jbtn.setMargin( new  Insets( 0 , 0 , 0 , 0 ));
jbtn.setContentAreaFilled( false );
jbtn.setFocusPainted( false ); 
jbtn.setBorderPainted( false ); 
jbtn.setBorder( null );
jbtn.addMouseListener( new  ButtonListener());

6、对JPasswordField的处理,QQ密码限制了长度,而且禁止了copy,paste,cut,以及对文本的选择操作,在这里就要自已实现一个类继承JPasswordFiled,在这个类里面重写copy,paste,cut,同时还得重写JPasswordField的Document模型对像,只有重写了它,才能限制密码的输入长度,以下是限制密码长度的代码:

1
2
3
4
5
6
7
public  void  insertString( int  offs, String str, AttributeSet a)
         throws  BadLocationException {
     if ( this .getLength()>MAX_LENGTH)
         return  ;
     else
         super .insertString(offs, str, a);
}

7、最重要的一点,就是如何缩减代码的长度,增加代码复用,这个得自已考虑去

8、程序中不采用任何界面布局,Java中的界面布局不太适合,将布局设置成null,自已控制控件的位置

备注:本程序开发过程中需要用到的软件请参考 界面编程模仿篇(模仿腾讯QQ登录界面先行篇)

最后,如果先和我合作,把这个界面做的更逼真,请阅读Github上如何给别人贡献代码,期待你的参与

 

分类:

技术点:

相关文章: