java图形界面之 山寨QQ登陆界面

    要山寨出QQ登陆界面，首先要对java的图形界面有一定的了解。在jdk1.4之前，图形界面所用到的所有类和接口都在javax.awt之下，在其之后就都在javax.swing里了。

关于图形界面的开发其实就类似于搭积木的过程，我们把所需要的控件一个一个的摆放到窗口里面我们所需要的位置，一个图形界面就算基本完成了。下面我们就拿QQ的登陆界面做一个示范。

   首先我们先了解一下图形界面中所用到的一些基本的控件，这些都在Javax.swing内：

  JFrame（JApplet）                  图形中的*容器
  JPanel                                      最灵活的容器
  JTextField                                文本输入框
  JComboBox                              下拉框类
  JPasswordField                        密码输入框
  JCheckBox                               复选框，多选框
  JLabel                                      标签
  JButton                                    按钮

其次就是布局方式，这关系到我们怎么样把积木摆放到我们想要的位置：

  BorderLayout                        边框布局  将容器分为上北下南左西右东中间
  FlowLayout                           流式布局  类似word文档
  null                                        空布局，绝对布局 控件必须要指定起始坐标和宽度高度

下面我们就来看下实现QQ界面开发的步骤

1.定义一个QQFrame，让该类继承自JFrame。
 2.在QQFrame类中定义主函数和初始化界面的方法。
 3.在主函数中实例化QQFrame类的对象，调用初始化界面的方法。
 4.在初始化界面的方法中，设置窗体的属性值（标题，大小，位置，大小调整，布局，关闭，可见,...）
 5.设置窗体的背景图（单独定义方法进行设置），这里我们会用到添加图片的方法
 6.创建容器或者元素控件添加到JFrame上。
  1.创建北边区域的方法，设置标签
  2.创建西边区域的方法，创建容器，添加标签显示图片
  3.创建中间区域的方法，创建容器，添加账号，密码，标签，复选框控件
  4.创建南边区域的方法，创建容器，添加按钮，标签控件。

7. 5.在主函数中实例化QQFrame类的对象，调用初始化界面的方法。

 

下面就在代码中说说我所遇到的问题，也请大家留意这些问题不要再犯

//初始化界面方法

      

    public void initUI(){

           //标题  大小显示位置布局方式。。。

           this.setTitle("QQFrame");

           this.setSize(371,290);

           this.setLocationRelativeTo(null);//让窗口显示位置居屏幕中间

           this.setResizable(false);//不可随意调整大小

           this.setLayout(new BorderLayout());//设置布局方式尤其要注意默认的布局方式就是框架布局   所以这行代码写不写无所谓

           this.setDefaultCloseOperation(3);//关闭窗体时退出程序

               this.setUndecorated(true);//去掉窗口外面的边框但这时没有了关闭按钮，所以我们还得在界面上添加按钮，点击后可以关闭界面，关闭界面的代码很简单System.exit(0)；就是这一行。

          

          

           //调用添加窗体背景图的方法

           addBackGround();

          

          

   

           //由于我们采用框架布局，将界面分为东西南北中五块这里是调用添加窗口各个区域的方法

           creatNorth();

           creatWest();

           creatCenter();

           creatSouth();

          

           //设置窗口可见

这里要注意的是添加组件时一定要先添加最后再可视，如果先可视再添加，那么很有可能我们看不到添加的组件了。

           this.setVisible(true);

}

 

// 有时候我们会想用自己的图片来充当界面的北京下面就介绍添加背景的方法

    private void addBackGround(){

           我们可能会想将自己的照片设置为窗口背景，那这要怎么样做呢我们需要用到ImageIcon类帮助我们实现

           //使用imageicon加载图片   但是这样无法直接显示在窗口上

           ImageIcon image=new ImageIcon(this.getClass().getResource("haha.JPG"));//得到类得到路径，图片的格式没有要求，

           //创建jlabel对象显示图片

           JLabel j=new JLabel(image);

           //设置标签的显示起始位置和标签限时的宽度高度

           j.setBounds(0,0,image.getIconWidth(),image.getIconHeight());

           //将j添加到jlayeredpane的Default层上，Default层是最底下的一层，我们在后面给的值是MIN_VALUE最小的值，就是将标签加到了面板的最底层，这里我们必须要加在最底层上，否则显示不出来。

     this.getLayeredPane().add(j,new Integer(Integer.MIN_VALUE));

           //获取窗体的内容面板对象强制转换成JPanel对象这样我们就取到了LayeredPane面板上一层的ContentPane面板

           JPanel contentPane=(JPanel)this.getContentPane();

           //将内容面板设置为透明我们才可以看到我们想要的图片

           contentPane.setOpaque(false);

          

}     

 

 

 

下面我们以西边区域为例，讲一下每个区域的添加控件的方法

//创建西边区域

    private void creatWest(){

           //创建一个容器，我们要添加的所有组件都应是放在这个容器里的

           JPanel jp=new JPanel();

           //设置容器大小，只有窗口的大小要用setSize方法，其余的一律要用这种，因为西边区域的高度是窗口高度减去北边还有南边的高度之和，所以西边区域的高度是被动确定的，在这里些什么数字都无所谓，我们在这里写0。延伸一下，中间区域就是东西南北四个区域设置完剩下的部分，所以中间区域就不用设置大小了。

           jp.setPreferredSize(new Dimension(110,0));

           //设置容器布局为流式靠右布局

           jp.setLayout(new FlowLayout(FlowLayout.RIGHT));

           //加载图片

           ImageIcon im=new ImageIcon(this.getClass().getResource("real.jpg"));

           //创建标签对象

           JLabel j=new JLabel(im);

           //将标签加入面板中并设置面板为透明

           jp.add(j);

           jp.setOpaque(false);

           //将面板加到西边

           this.add(jp,BorderLayout.WEST);

    }

   

 

其余的区域都和西边和中间区域的添加方法一致，qq界面的所有代码我都放在了附件中，如果有兴趣大家可以看看，当然界面做的还是比较粗糙，不过里面所有的功能都已经实现，比如说链接网页，拖动窗口。后期我还要对界面进行美化。