界面编程模仿篇(QQ登录界面逼真篇)

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

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

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

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

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

Github简明教程(入门篇)

Github上如何给别人贡献代码

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

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

1	setUndecorated( true );

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

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上如何给别人贡献代码，期待你的参与

 

 

分类: 
界面编程