您的位置: 首页  >  文章  >  Swing学习----------QQ登录界面制作（二）

Swing学习----------QQ登录界面制作（二）

分类: 文章 • 2024-01-07 14:02:58

  上次把QQ界面的主题框架实现了，但是还没有完成最小化，关闭按钮等的功能，这次重新完善了QQ登录界面的功能，本次更新主要有以下几个方面：

           1.最小化，关闭窗口功能以及实现这两个图标的鼠标移动事件（类似大多数软件，当把鼠标光标移到这两个图标的区域时，图标会有渐变效果，点击时有点击效果）；

           2.登录按钮的鼠标响应事件，以及点击时的阴影效果；

           3.密码框的明文提示，账号框的明文提示；

           4.账号和密码框的鼠标响应事件，以及“注册账号”和“忘记密码”的鼠标响应事件

           5.窗体的拖动事件

       总的来说，这次的重点就在于实现鼠标事件的监听功能，现在先上效果图：

Swing学习----------QQ登录界面制作（二）   Swing学习----------QQ登录界面制作（二）

看了自己录制的gif图，感觉失真程度太大，于是又加了一张静态图来做对比，现在来解析实现方法：


   1.最小化和关闭的功能实现：

          事先准备三张图片，分别表示鼠标进入该区域，离开该区域和点击该区域的状态，然后实现鼠标点击事件，每次不同的状态就插入不同的图片。这里只贴出这部分的实现代码，后面的相似的就不累赘了：


[java] view plain copy
  1.      
  2.    /** 
  3.           * 实现点击×退出的时间，注意将×放到面板的上一层 
  4.           */  
  5. close_label.setBounds(397, 0, 23, 23);  
  6. panel_north.add(close_label,0);  
  7. close_label.addMouseListener(new MouseAdapter() {  
  8.     public void mousePressed(MouseEvent e) {  
  9.         ImageIcon icon_close = new ImageIcon("images/closeback_2.gif");  
  10.         close_label.setIcon(icon_close);  
  11.         System.out.println("点击");  
  12.     }  
  13.       
  14.     public void mouseExited(MouseEvent e) {  
  15.         ImageIcon icon_close = new ImageIcon("images/common.gif");  
  16.         close_label.setIcon(icon_close);  
  17.         System.out.println("不显示");  
  18.     }  
  19.       
  20.     public void mouseEntered(MouseEvent e) {  
  21.         ImageIcon icon_close = new ImageIcon("images/closeback_1.gif");  
  22.         close_label.setIcon(icon_close);  
  23.         close_label.setToolTipText("关闭窗口");  
  24.         System.out.println("显示");  
  25.     }  
  26.     public void mouseClicked(MouseEvent e){  
  27.         System.out.println("系统退出");  
  28.         System.exit(0);  
  29.     }  
  30. });  
  31.   
  32. /** 
  33.  * 实现点击最小化功能 
  34.  */  
  35. min_label.setBounds(371, 0, 23, 23);  
  36. panel_north.add(min_label,0);  
  37. min_label.addMouseListener(new MouseAdapter() {  
  38.     public void mousePressed(MouseEvent e) {  
  39.         ImageIcon icon_close = new ImageIcon("images/minback2.gif");  
  40.         min_label.setIcon(icon_close);  
  41.         System.out.println("点击");  
  42.     }  
  43.       
  44.     public void mouseExited(MouseEvent e) {  
  45.         ImageIcon icon_close = new ImageIcon("images/common.gif");  
  46.         min_label.setIcon(icon_close);  
  47.         System.out.println("不显示");  
  48.     }  
  49.       
  50.     public void mouseEntered(MouseEvent e) {  
  51.         ImageIcon icon_close = new ImageIcon("images/minback1.gif");  
  52.         min_label.setIcon(icon_close);  
  53.         min_label.setToolTipText("最小化窗口");  
  54.         System.out.println("显示");  
  55.     }  
  56.     public void mouseClicked(MouseEvent e){  
  57.         LoginWindow.this.setExtendedState(JFrame.ICONIFIED);  
  58.         System.out.println("程序最小化");  
  59.     }  
  60. });  

        在这里有几点需要注意：一是在添加最小化，关闭按钮的图标时，在add方法中要设置添加的层数，因为我们看到的界面是一层一层的，如果直接添加的话会被背景图片覆盖，就不能正确显示小图标；二是这里的图标的背景是设置成透明的，所以在界面中的图片是经过PS的处理，具体如何使用PS制作透明背景，百度上很多教程。

     

   2.密码框和账号框的鼠标响应事件,” 注册账号 ”和“ 忘记密码 ”的变色效果：

         实现方法也是通过添加对鼠标的监听来给文本框设置不同的边框颜色，和上面最小化功能差不多，就不上代码了。


   3.密码框的明文显示：

         这里密码框设置的组件是JPassWordField，如果直接用setText方法给它设置提示内容的话，会显示成“ * ”，这样就达不到提示的效果，我们可以看到java源码中提供了setEchoChar方法来实现这个功能，Swing学习----------QQ登录界面制作（二）

        通过源码知道，可以通过将setEchoChar的参数设置成0就可以实现密码框的明文显示，至于具体字体样式就看个人的爱好了。注意，这个方法不支持int型数值，所以0需要进行强制类型转换成char类型才可以，说到这里，我们可以想到许多注册的页面有提供预览密码的功能，知道了这个功能之后，我们也可以实现一个预览密码的功能。下次有机会再更新来实现这个功能吧......


   4.无边框窗口的拖动：

         java swing中的窗口都有最大化，最小化，关闭图标以及一个外边框，但是这个是影响美观的，这里把外边框隐藏了，但是随之而来的是窗口的拖动功能也没了。所以需要自己来实现一个拖动功能。主要思路就是：获得鼠标Press时的相对JFrame的坐标，然后在mouseDragged方法中获得那点相对屏幕的坐标，然后用相对屏幕的坐标减去相对JFrame的坐标，最后用setLocation 设置它的位置就OK了。具体代码如下：

[java] view plain copy
  1.                /** 
  2.  * 实现拖拽窗口的功能 
  3.  */  
  4. this.addMouseListener(new MouseAdapter(){  
  5.     public void mousePressed(MouseEvent e) {  
  6.         xOld = e.getX();   //记录鼠标按下时的坐标  
  7.         yOld = e.getY();  
  8.     }  
  9.       
  10.     public void mouseClicked(MouseEvent e){  
  11.         MainFrame.this.setExtendedState(JFrame.ICONIFIED);  
  12.     }  
  13.    });  
  14.   
  15. this.addMouseMotionListener(new MouseAdapter() {  
  16.     public void mouseDragged(MouseEvent e) {  
  17.         int xOnScreen = e.getXOnScreen();  
  18.         int yOnScreen = e.getYOnScreen();  
  19.         int xNew = xOnScreen - xOld;  
  20.         int yNew = yOnScreen - yOld;  
  21.         System.out.println("xx="+xNew+"yy="+yNew);  
  22.         MainFrame.this.setLocation(xNew, yNew);  //设置拖拽后，窗口的位置  
  23.         System.out.println("QQ正在移动");  
  24.     }  
  25. });  

   这里附上一张拖动窗口的原理图：

Swing学习----------QQ登录界面制作（二）

        好了，这次差不多已经把所有的功能实现原理都写完了，下次将会继续更新QQ主界面的制作以及一些对数据库的操作，如登录，注册，获取联系人列表等功能。


相关推荐