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

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

  

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


1.设计Frame

[java]  view plain  copy
  1. public class InitSysLogin extends JFrame{  
  2.   
  3.     private static final long serialVersionUID = 1L;  
  4.     public static final String LOG_TITLE="登录";  
  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);   //设置frame边框不可见     
  18.         login.setResizable(false);    //禁止改变窗口大小  
  19.           
  20.         login.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
  21.         login.setVisible(true);  
  22.     }  
  23.       
  24.   
  25. }  
这里将frame的边框设置成不可见,所以也不能移动窗口了。本文目的旨在使用BorderLayout来设计界面,所以暂不实现拖动窗口的功能。


2.添加BorderLayout布局管理器,并在五个部位添加一个JPanel

[java]  view plain  copy
  1. public class InitSysLogin extends JFrame{  
  2.   
  3.     private static final long serialVersionUID = 1L;  
  4.     public static final String LOG_TITLE="登录";  
  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);   //设置frame边框不可见     
  18.         login.setResizable(false);    //禁止改变窗口大小  
  19.           
  20.         BorderLayout border_layout=new BorderLayout();  
  21.         login.setLayout(border_layout);  
  22.           
  23.         /** 
  24.          * 北部面板 
  25.          */  
  26.         JPanel panel_north=CreatePanel.CreateNorthPanel();  
  27.         login.add(panel_north,BorderLayout.NORTH);  
  28.           
  29.         /** 
  30.          * 中部面板 
  31.          */  
  32.         JPanel panel_center=CreatePanel.CrateCenterPanel();  
  33.         login.add(panel_center,BorderLayout.CENTER);  
  34.           
  35.         /** 
  36.          * 西部面板 
  37.          */  
  38.         JPanel panel_west=CreatePanel.CreateWestPanel();  
  39.         login.add(panel_west,BorderLayout.WEST);  
  40.           
  41.         /** 
  42.          * 南部面板 
  43.          */  
  44.         JPanel panel_south=CreatePanel.CreateSouthPanel();  
  45.         login.add(panel_south,BorderLayout.SOUTH);  
  46.           
  47.         /** 
  48.          * 东部面板 
  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.新建一个类来专门用来设计布局,类名为CreatePanel

[java]  view plain  copy
  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.      * 创建北部面板 
  10.      * @return 
  11.      */  
  12.     public static JPanel CreateNorthPanel(){  
  13.         JPanel panel=new JPanel();  
  14.         panel.setLayout(null);  
  15.         panel.setPreferredSize(new Dimension(0140));  
  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.      * 创建西部面板 
  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(00120120);  
  36.           
  37.         panel.add(background);  
  38.         return panel;  
  39.     }  
  40.       
  41.     /** 
  42.      * 创建南部面板 
  43.      */  
  44.     public static JPanel CreateSouthPanel(){  
  45.         JPanel panel=new JPanel();  
  46.         panel.setLayout(null);  
  47.         panel.setPreferredSize(new Dimension(050));  
  48.         MyLineBorder myLineBorder = new MyLineBorder(new Color(192192192), 1 , true);  
  49.           
  50.         /** 
  51.          * 登录按钮 
  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.      * 创建中部面板 
  63.      */  
  64.     public static JPanel CrateCenterPanel(){  
  65.         JPanel panel=new JPanel();  
  66.         panel.setLayout(null);  
  67.         panel.setPreferredSize(new Dimension(0180));  
  68.         MyLineBorder myLineBorder = new MyLineBorder(new Color(192192192), 1 , true);  
  69.           
  70.         /** 
  71.          * 用户名框 
  72.          */  
  73.         JTextField username=new JTextField();  
  74.         username.setBounds(01517530);  
  75.         username.setBorder(myLineBorder);  
  76.   
  77.         /** 
  78.          * 密码名框 
  79.          */  
  80.         JPasswordField password=new JPasswordField(JPasswordField.LEFT);  
  81.         password.setBounds(04417530);  
  82.         password.setBorder(myLineBorder);  
  83.   
  84.           
  85.         JCheckBox rember_pwd=new JCheckBox("记住密码");  
  86.         rember_pwd.setBounds(0808020);  
  87.           
  88.         JCheckBox login_auto=new JCheckBox("自动登录");  
  89.         login_auto.setBounds(100808020);  
  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.      * 创建东部面板 
  101.      */  
  102.     public static JPanel CrateEastPanel(){  
  103.         JPanel panel=new JPanel();  
  104.         panel.setLayout(null);  
  105.         panel.setPreferredSize(new Dimension(1000));  
  106.           
  107.         JLabel regeist=new JLabel("注册账号");  
  108.         regeist.setForeground(new Color(100,149,238));  
  109.         regeist.setBounds(0136030);  
  110.         regeist.setFont(new Font("宋体",0,12));  
  111.           
  112.         JLabel regetpwd=new JLabel("找回密码");  
  113.         regetpwd.setForeground(new Color(100,149,238));  
  114.         regetpwd.setBounds(0436030);  
  115.         regetpwd.setFont(new Font("宋体",0,12));  
  116.           
  117.         panel.add(regetpwd);  
  118.         panel.add(regeist);  
  119.         return panel;  
  120.     }  
  121. }  

4.创建一个images文件夹,并且导入相关图片

5.得到结果如图:

虽然和QQ的登录界面还差太多,但是基本的样子还是出来了。自己动手做一遍才知道一个看似很简单的东西,对于初学者来说也是可以学到很多东西的,做的时候会遇到许多让自己困惑的问题,有些功能实现起来也没我们想象的那么简单。但是,相信只要慢慢摸索,终有一天会把这个界面完善到自己满意的程度。不得不说QQ的登录界面还是做得挺漂亮的!我的这个还亟待完善,日后也会慢慢补充。


6.制作过程中的一些问题的解决

     a. JTextField输入框的边框是很难看的,方方正正的,看起来有审美疲劳(个人觉得),所以我在程序中专门用了一个类MyLineBorder来实现一个圆角矩形,和用了一个浅色边框,如上图所示,自己当初做的时候有这个想法,但是不会实现,就百度查了下,借鉴了别人的方法,就直接拿来用了。

[java]  view plain  copy
  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-155);   
  24.          }    
  25.          g2.setColor(oldColor);    
  26.     }    
  27. }    

   b.  本例中在Panel中插入图片是通过定义一个JLabel实例和ImageIcon实例,然后直接把ImageIcon参数传给JLabel来实现的。

   c.  按钮也是直接将图片作为JButton的背景来实现的。

   d.  在Panel中添加组将时,将其布局设置成null了,设置成null可以根据自己的需求调整各组件的位置,添加组件的过程,实际上就是一个不断调整和修改的过程,特别是调整 位置的时候挺头疼的,由于是刚接触,也不知道有什么技巧,纯粹是在摸索。

   e.若要继续完善QQ界面的功能,大部分还需要用到监听机制(个人这么觉得)来实现,由于还没学,也没来得及完善了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值