Swing學習----------QQ登入介面製作(一)
阿新 • • 發佈：2019-02-10
最近學習的課程有點緊，所以暫時放下了SSH的學習，等時間稍微鬆點再開始SSH部落格的跟進。在這個學期的JAVA課程已經學到了圖形使用者介面的章節了，開始接觸到awt和swing的學習，就想著用所學的知識來設計一個仿照QQ的登入介面，如果有時間多的話，接下來還準備繼續完善這個小程式，可能還會嘗試實現登入，新增資料庫以及新增網路功能，實現簡單的聊天功能。先不想這麼多，反正要看有沒有時間。進入正題，開始著手設計仿QQ介面。
要實現QQ介面的設計，首先先想好思路，這裡我使用的是BorderLayout佈局管理器，將QQ介面分為東南西北中五個部分。北部新增一張gif圖 ,西部就是一個頭像，中部實現使用者框和密碼框，” 記住密碼 ”以及” 自動登入 ”的複選框，南部實現一個登入按鈕的圖片，東部則是" 註冊賬號 " 和” 忘記密碼 “的標籤。好了，現在上程式碼。
1.設計Frame
這裡將frame的邊框設定成不可見，所以也不能移動視窗了。本文目的旨在使用BorderLayout來設計介面，所以暫不實現拖動視窗的功能。public class InitSysLogin extends JFrame{ private static final long serialVersionUID = 1L; public static final String LOG_TITLE="登入"; public static final int WINDOW_WIDTH=420; public static final int WINDOW_HEIGHT=300; public static final int LOCATION_X=497; public static final int LOCATION_Y=242; public void initLogin(){ InitSysLogin login=new InitSysLogin(); login.setTitle(LOG_TITLE); login.setSize(WINDOW_WIDTH, WINDOW_HEIGHT); login.setLocation(LOCATION_X, LOCATION_Y); login.setUndecorated(true); //設定frame邊框不可見 login.setResizable(false); //禁止改變視窗大小 login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); login.setVisible(true); } }
2.新增BorderLayout佈局管理器，並在五個部位新增一個JPanel
public class InitSysLogin extends JFrame{ private static final long serialVersionUID = 1L; public static final String LOG_TITLE="登入"; public static final int WINDOW_WIDTH=420; public static final int WINDOW_HEIGHT=300; public static final int LOCATION_X=497; public static final int LOCATION_Y=242; public void initLogin(){ InitSysLogin login=new InitSysLogin(); login.setTitle(LOG_TITLE); login.setSize(WINDOW_WIDTH, WINDOW_HEIGHT); login.setLocation(LOCATION_X, LOCATION_Y); login.setUndecorated(true); //設定frame邊框不可見 login.setResizable(false); //禁止改變視窗大小 BorderLayout border_layout=new BorderLayout(); login.setLayout(border_layout); /** * 北部面板 */ JPanel panel_north=CreatePanel.CreateNorthPanel(); login.add(panel_north,BorderLayout.NORTH); /** * 中部面板 */ JPanel panel_center=CreatePanel.CrateCenterPanel(); login.add(panel_center,BorderLayout.CENTER); /** * 西部面板 */ JPanel panel_west=CreatePanel.CreateWestPanel(); login.add(panel_west,BorderLayout.WEST); /** * 南部面板 */ JPanel panel_south=CreatePanel.CreateSouthPanel(); login.add(panel_south,BorderLayout.SOUTH); /** * 東部面板 */ JPanel pannel_east=CreatePanel.CrateEastPanel(); login.add(pannel_east,BorderLayout.EAST); login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); login.setVisible(true); } }
3.新建一個類來專門用來設計佈局,類名為CreatePanel
public class CreatePanel {
public static final int WINDOW_WIDTH=420;
public static final int WINDOW_HEIGHT=300;
public static final int LOCATION_X=497;
public static final int LOCATION_Y=242;
/**
* 建立北部面板
* @return
*/
public static JPanel CreateNorthPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(0, 140));
ImageIcon image=new ImageIcon("images/back.gif");
JLabel background=new JLabel(image);
background.setBounds(0,0,420,180);
panel.add(background);
return panel;
}
/**
* 建立西部面板
*/
public static JPanel CreateWestPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(130,0));
ImageIcon image=new ImageIcon("images/HeadImage.png");
JLabel background=new JLabel(image);
background.setBounds(0, 0, 120, 120);
panel.add(background);
return panel;
}
/**
* 建立南部面板
*/
public static JPanel CreateSouthPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(0, 50));
MyLineBorder myLineBorder = new MyLineBorder(new Color(192, 192, 192), 1 , true);
/**
* 登入按鈕
*/
ImageIcon image=new ImageIcon("images/login_button.png");
JButton btn=new JButton(image);
btn.setBounds(130,0,image.getIconWidth()-10,image.getIconHeight()-10);
btn.setBorder(myLineBorder);
panel.add(btn);
return panel;
}
/**
* 建立中部面板
*/
public static JPanel CrateCenterPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(0, 180));
MyLineBorder myLineBorder = new MyLineBorder(new Color(192, 192, 192), 1 , true);
/**
* 使用者名稱框
*/
JTextField username=new JTextField();
username.setBounds(0, 15, 175, 30);
username.setBorder(myLineBorder);
/**
* 密碼名框
*/
JPasswordField password=new JPasswordField(JPasswordField.LEFT);
password.setBounds(0, 44, 175, 30);
password.setBorder(myLineBorder);
JCheckBox rember_pwd=new JCheckBox("記住密碼");
rember_pwd.setBounds(0, 80, 80, 20);
JCheckBox login_auto=new JCheckBox("自動登入");
login_auto.setBounds(100, 80, 80, 20);
panel.add(rember_pwd);
panel.add(username);
panel.add(password);
panel.add(login_auto);
return panel;
}
/**
* 建立東部面板
*/
public static JPanel CrateEastPanel(){
JPanel panel=new JPanel();
panel.setLayout(null);
panel.setPreferredSize(new Dimension(100, 0));
JLabel regeist=new JLabel("註冊賬號");
regeist.setForeground(new Color(100,149,238));
regeist.setBounds(0, 13, 60, 30);
regeist.setFont(new Font("宋體",0,12));
JLabel regetpwd=new JLabel("找回密碼");
regetpwd.setForeground(new Color(100,149,238));
regetpwd.setBounds(0, 43, 60, 30);
regetpwd.setFont(new Font("宋體",0,12));
panel.add(regetpwd);
panel.add(regeist);
return panel;
}
}4.建立一個images資料夾，並且匯入相關圖片
5.得到結果如圖：
雖然和QQ的登入介面還差太多，但是基本的樣子還是出來了。自己動手做一遍才知道一個看似很簡單的東西，對於初學者來說也是可以學到很多東西的，做的時候會遇到許多讓自己困惑的問題，有些功能實現起來也沒我們想象的那麼簡單。但是，相信只要慢慢摸索，終有一天會把這個介面完善到自己滿意的程度。不得不說QQ的登入介面還是做得挺漂亮的！我的這個還亟待完善，日後也會慢慢補充。
6.製作過程中的一些問題的解決
a. JTextField輸入框的邊框是很難看的，方方正正的，看起來有審美疲勞（個人覺得），所以我在程式中專門用了一個類MyLineBorder來實現一個圓角矩形，和用了一個淺色邊框，如上圖所示，自己當初做的時候有這個想法，但是不會實現，就百度查了下，借鑑了別人的方法，就直接拿來用了。
public class MyLineBorder extends LineBorder{
private static final long serialVersionUID = 1L;
public MyLineBorder(Color color, int thickness, boolean roundedCorners) {
super(color, thickness, roundedCorners);
}
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
Color oldColor = g.getColor();
Graphics2D g2 = (Graphics2D)g;
int i;
g2.setRenderingHints(rh);
g2.setColor(lineColor);
for(i = 0; i < thickness; i++) {
if(!roundedCorners)
g2.drawRect(x+i, y+i, width-i-i-1, height-i-i-1);
else
g2.drawRoundRect(x+i, y+i, width-i-i-1, height-i-i-1, 5, 5);
}
g2.setColor(oldColor);
}
} b. 本例中在Panel中插入圖片是通過定義一個JLabel例項和ImageIcon例項，然後直接把ImageIcon引數傳給JLabel來實現的。
c. 按鈕也是直接將圖片作為JButton的背景來實現的。
d. 在Panel中新增組將時，將其佈局設定成null了，設定成null可以根據自己的需求調整各元件的位置，新增元件的過程，實際上就是一個不斷調整和修改的過程，特別是調整 位置的時候挺頭疼的，由於是剛接觸，也不知道有什麼技巧，純粹是在摸索。
e.若要繼續完善QQ介面的功能，大部分還需要用到監聽機制（個人這麼覺得）來實現，由於還沒學，也沒來得及完善了。