Recently, the course is a little tight, so I put aside the study of SSH temporarily, and wait a little less time to start the follow-up of SSH blog. This semester's JAVA course has learned the chapters of graphical user interface, and began to contact awt and swing learning. I want to use the knowledge I learned to design a login interface that imitates QQ. If I have more time, I'm going to continue to improve this small program. I may also try to achieve login, add database and add network functions to make it simple. Chat function. I don't want to think so much at first. It depends on whether I have time or not. Enter the topic, and begin to design a QQ-like interface.

  

In order to realize the design of QQ interface, first of all, I think about the idea. Here I use BorderLayout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layou Add a gif map to the north, the west is a head image, the middle is a user box and password box, "remember password" and "automatic login" check box, the south is a picture of the login button, the East is a "registration account" and "forget password" label. Okay, now the code.

1. Design Frame

1. public class InitSysLogin extends JFrame{  
2.   
3.     private static final long serialVersionUID = 1L;  
4.     public static final String LOG_TITLE="Sign in";  
5.     public static final int WINDOW_WIDTH=420;  
6.     public static final int WINDOW_HEIGHT=300;  
7.     public static final int LOCATION_X=497;  
8.     public static final int LOCATION_Y=242;  
9.       
10.       
11.     public void initLogin(){  
12.         InitSysLogin login=new InitSysLogin();  
13.         login.setTitle(LOG_TITLE);  
14.         login.setSize(WINDOW_WIDTH, WINDOW_HEIGHT);  
15.         login.setLocation(LOCATION_X, LOCATION_Y);  
16.       
17.         login.setUndecorated(true);   //Set frame border invisible  
18.         login.setResizable(false);    //Do not change window size  
19.           
20.         login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
21.         login.setVisible(true);  
22.     }  
23.       
24.   
25. }  

The frame's border is set invisible, so the window can't be moved. The purpose of this paper is to use BorderLayout to design the interface, so the function of dragging window is not implemented yet.

2. Add BorderLayout Layout Layout Layout Layout Manager and add a JPanel in five parts

1. public class InitSysLogin extends JFrame{  
2.   
3.     private static final long serialVersionUID = 1L;  
4.     public static final String LOG_TITLE="Sign in";  
5.     public static final int WINDOW_WIDTH=420;  
6.     public static final int WINDOW_HEIGHT=300;  
7.     public static final int LOCATION_X=497;  
8.     public static final int LOCATION_Y=242;  
9.       
10.       
11.     public void initLogin(){  
12.         InitSysLogin login=new InitSysLogin();  
13.             login.setTitle(LOG_TITLE);  
14.         login.setSize(WINDOW_WIDTH, WINDOW_HEIGHT);  
15.         login.setLocation(LOCATION_X, LOCATION_Y);  
16.       
17.         login.setUndecorated(true);   //Set frame border invisible  
18.         login.setResizable(false);    //Do not change window size  
19.           
20.         BorderLayout border_layout=new BorderLayout();  
21.         login.setLayout(border_layout);  
22.           
23.         /** 
24.          * North panel 
25.          */  
26.         JPanel panel_north=CreatePanel.CreateNorthPanel();  
27.         login.add(panel_north,BorderLayout.NORTH);  
28.           
29.         /** 
30.          * Middle panel 
31.          */  
32.         JPanel panel_center=CreatePanel.CrateCenterPanel();  
33.         login.add(panel_center,BorderLayout.CENTER);  
34.           
35.         /** 
36.          * Western Panel 
37.          */  
38.         JPanel panel_west=CreatePanel.CreateWestPanel();  
39.         login.add(panel_west,BorderLayout.WEST);  
40.           
41.         /** 
42.          * Southern panel 
43.          */  
44.         JPanel panel_south=CreatePanel.CreateSouthPanel();  
45.         login.add(panel_south,BorderLayout.SOUTH);  
46.           
47.         /** 
48.          * Eastern panel 
49.          */  
50.         JPanel pannel_east=CreatePanel.CrateEastPanel();  
51.         login.add(pannel_east,BorderLayout.EAST);  
52.           
53.         login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
54.         login.setVisible(true);  
55.     }  
56. }  

3. Create a new class for layout design, named CreatePanel

1. public class CreatePanel {  
2.       
3.     public static final int WINDOW_WIDTH=420;  
4.     public static final int WINDOW_HEIGHT=300;  
5.     public static final int LOCATION_X=497;  
6.     public static final int LOCATION_Y=242;  
7.       
8.     /** 
9.      * Create the North Panel 
10.      * @return 
11.      */  
12.     public static JPanel CreateNorthPanel(){  
13.         JPanel panel=new JPanel();  
14.         panel.setLayout(null);  
15.         panel.setPreferredSize(new Dimension(0, 140));  
16.           
17.         ImageIcon image=new ImageIcon("images/back.gif");  
18.         JLabel background=new JLabel(image);  
19.         background.setBounds(0,0,420,180);     
20.         panel.add(background);  
21.         return panel;  
22.     }  
23.       
24.     /** 
25.      * Creating Western Panel 
26.      */  
27.     public static JPanel CreateWestPanel(){  
28.         JPanel panel=new JPanel();  
29.         panel.setLayout(null);  
30.         panel.setPreferredSize(new Dimension(130,0));  
31.           
32.         ImageIcon image=new ImageIcon("images/HeadImage.png");  
33.         JLabel  background=new JLabel(image);  
34.           
35.         background.setBounds(0, 0, 120, 120);  
36.           
37.         panel.add(background);  
38.         return panel;  
39.     }  
40.       
41.     /** 
42.      * Create the Southern Panel 
43.      */  
44.     public static JPanel CreateSouthPanel(){  
45.         JPanel panel=new JPanel();  
46.         panel.setLayout(null);  
47.         panel.setPreferredSize(new Dimension(0, 50));  
48.         MyLineBorder myLineBorder = new MyLineBorder(new Color(192, 192, 192), 1 , true);  
49.           
50.         /** 
51.          * Login button 
52.          */  
53.         ImageIcon image=new ImageIcon("images/login_button.png");  
54.         JButton btn=new JButton(image);  
55.         btn.setBounds(130,0,image.getIconWidth()-10,image.getIconHeight()-10);  
56.         btn.setBorder(myLineBorder);  
57.         panel.add(btn);  
58.         return panel;  
59.     }  
60.       
61.     /** 
62.      * Create the middle panel 
63.      */  
64.     public static JPanel CrateCenterPanel(){  
65.         JPanel panel=new JPanel();  
66.         panel.setLayout(null);  
67.         panel.setPreferredSize(new Dimension(0, 180));  
68.         MyLineBorder myLineBorder = new MyLineBorder(new Color(192, 192, 192), 1 , true);  
69.           
70.         /** 
71.          * Username box 
72.          */  
73.         JTextField username=new JTextField();  
74.         username.setBounds(0, 15, 175, 30);  
75.         username.setBorder(myLineBorder);  
76.   
77.         /** 
78.          * Password name box 
79.          */  
80.         JPasswordField password=new JPasswordField(JPasswordField.LEFT);  
81.         password.setBounds(0, 44, 175, 30);  
82.         password.setBorder(myLineBorder);  
83.   
84.           
85.         JCheckBox rember_pwd=new JCheckBox("Remember password");  
86.         rember_pwd.setBounds(0, 80, 80, 20);  
87.           
88.         JCheckBox login_auto=new JCheckBox("automatic logon");  
89.         login_auto.setBounds(100, 80, 80, 20);  
90.           
91.           
92.         panel.add(rember_pwd);  
93.         panel.add(username);  
94.         panel.add(password);  
95.         panel.add(login_auto);  
96.         return panel;  
97.     }  
98.       
99.     /** 
100.      * Create Eastern Panel 
101.      */  
102.     public static JPanel CrateEastPanel(){  
103.         JPanel panel=new JPanel();  
104.         panel.setLayout(null);  
105.         panel.setPreferredSize(new Dimension(100, 0));  
106.           
107.         JLabel regeist=new JLabel("Registered account number");  
108.         regeist.setForeground(new Color(100,149,238));  
109.         regeist.setBounds(0, 13, 60, 30);  
110.         regeist.setFont(new Font("Song style",0,12));  
111.           
112.         JLabel regetpwd=new JLabel("Retrieve password");  
113.         regetpwd.setForeground(new Color(100,149,238));  
114.         regetpwd.setBounds(0, 43, 60, 30);  
115.         regetpwd.setFont(new Font("Song style",0,12));  
116.           
117.         panel.add(regetpwd);  
118.         panel.add(regeist);  
119.         return panel;  
120.     }  
121. }  

4. Create an image folder and import related pictures

5. The results are as follows:

Although the login interface with QQ is still too poor, but the basic appearance is still out. Do it yourself before you know a seemingly simple thing. For beginners, you can learn a lot. When you do it, you will encounter many confusing problems. Some functions are not as simple as we thought. However, I believe that as long as we slowly explore, one day we will improve the interface to their satisfaction. I have to say that QQ login interface is still very beautiful! This one of mine needs to be perfected urgently, and it will be added slowly in the future.

6. Solutions to some problems in the production process

JTextField input box's border is very ugly, square, and looks aesthetic fatigue (personal feeling), so I use a MyLineBorder-like program to achieve a rounded rectangle, and use a light-colored border, as shown in the figure above, when I did this idea, but it will not be realized, Baidu checked, learn from others. The human method is directly used.

1. public class MyLineBorder extends LineBorder{    
2.     
3.     
4.     private static final long serialVersionUID = 1L;    
5.         
6.     public MyLineBorder(Color color, int thickness, boolean roundedCorners) {    
7.         super(color, thickness, roundedCorners);    
8.     }    
9.     
10.      public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {    
11.              
12.          RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING,    
13.                                                 RenderingHints.VALUE_ANTIALIAS_ON);     
14.          Color oldColor = g.getColor();    
15.          Graphics2D g2 = (Graphics2D)g;    
16.          int i;    
17.          g2.setRenderingHints(rh);    
18.          g2.setColor(lineColor);    
19.          for(i = 0; i < thickness; i++)  {    
20.          if(!roundedCorners)    
21.              g2.drawRect(x+i, y+i, width-i-i-1, height-i-i-1);    
22.          else    
23.              g2.drawRoundRect(x+i, y+i, width-i-i-1, height-i-i-1, 5, 5);   
24.          }    
25.          g2.setColor(oldColor);    
26.     }    
27. }    

b. In this case, inserting pictures in Panel is achieved by defining a JLabel instance and an ImageIcon instance, and then passing the ImageIcon parameter directly to JLabel.

c. Buttons are also implemented directly with pictures as the background of JButton.

d. When adding group will in Panel, set its layout to null, set it to null to adjust the position of each component according to its own needs. The process of adding components is actually a process of constant adjustment and modification, especially when adjusting the position, it is a headache, because it is just touching, and it does not know any skills, it is purely groping.

e. If we want to continue to improve the function of QQ interface, most of them need to use the monitoring mechanism (personal feeling) to achieve, because we have not yet learned, we have not had time to improve it.