界面編程模仿篇(QQ登陸界面逼真篇)

寫了好多天的爬蟲，偷空前先後後用了兩天的時間(排除吃飯睡覺)寫完了這個QQ登陸界面，看起來還湊和着吧，若是是的大神的，莫見笑，純屬業餘做品，廢話先很少說，截圖以下,其中第二幅圖片中的紅色方框部份有待完善，明天開始繼續搞爬蟲，等有時間時再完善，先湊和着吧：

本篇博文就分析一下這個界面設計中的幾個關鍵點，在閱讀本博文以前請先閱讀我我的博客上關於模仿QQ界面先行篇

界面編程模仿篇(模仿騰訊QQ登陸界面先行篇)

本程序開源，下載地址，請查看我我的博客：煙雨林

對於還不會使用github的同窗，如下是個人我的博客上的兩篇教程

Github簡明教程(入門篇)

Github上如何給別人貢獻代碼

程序採用Java語言實現，本人只懂C++/Java/Python/Shell,其餘程序語言一律不懂，等有時間再寫其餘兩種語言的登陸版本，能夠訂閱個人我的博客,獲取後緒相關文章與資料

一、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 ));

二、QQ界面窗口居中

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

三、因爲去掉了標題欄，結果最小化，最大化，關閉均被去掉了，更重要的一個功能是窗口隨鼠標拖動也被去掉了，所以這些功能都須要自已再從新實現，實現的代碼也是很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);              }          }      }); }

四、重寫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 );

五、按鈕的相關設置，對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());

六、對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); }

七、最重要的一點，就是如何縮減代碼的長度，增長代碼複用，這個得自已考慮去

八、程序中不採用任何界面佈局，Java中的界面佈局不太適合，將佈局設置成null,自已控制控件的位置

備註：本程序開發過程當中須要用到的軟件請參考 界面編程模仿篇(模仿騰訊QQ登陸界面先行篇)

最後，若是先和我合做，把這個界面作的更逼真，請閱讀Github上如何給別人貢獻代碼，期待你的參與

 

 

分類:  界面編程