Swing学习----------QQ登录界面制作(一)

小胖墩有点瘦

已于 2022-06-13 23:46:46 修改

阅读量5.8k

点赞数 10

分类专栏： java java----swing开发文章标签： java swing UI

于 2017-05-07 23:45:42 首次发布

本文链接：https://blog.csdn.net/zys_1997/article/details/71375319

版权

java 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

java----swing开发

6 篇文章 2 订阅

订阅专栏

素材获取可关注微信公众号：开源IT，后台回复 "素材" 免费获取。

最近学习的课程有点紧，所以暂时放下了SSH的学习，等时间稍微松点再开始SSH博客的跟进。在这个学期的JAVA课程已经学到了图形用户界面的章节了，开始接触到awt和swing的学习，就想着用所学的知识来设计一个仿照QQ的登录界面，如果有时间多的话，接下来还准备继续完善这个小程序，可能还会尝试实现登录，添加数据库以及添加网络功能，实现简单的聊天功能。先不想这么多，反正要看有没有时间。进入正题，开始着手设计仿QQ界面。

要实现QQ界面的设计，首先先想好思路，这里我使用的是BorderLayout布局管理器，将QQ界面分为东南西北中五个部分。北部添加一张gif图 ,西部就是一个头像，中部实现用户框和密码框，” 记住密码 ”以及” 自动登录 ”的复选框，南部实现一个登录按钮的图片，东部则是" 注册账号 " 和” 忘记密码 “的标签。好了，现在上代码。

1.设计Frame

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);
	}
	

}

这里将frame的边框设置成不可见，所以也不能移动窗口了。本文目的旨在使用BorderLayout来设计界面，所以暂不实现拖动窗口的功能。

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界面的功能，大部分还需要用到监听机制（个人这么觉得）来实现，由于还没学，也没来得及完善了。