JAVA第一课——qq登录界面的开发

近期刚学了JAVA编程，觉得还是很好玩的，觉得JAVA编程和c++很相似，但是比c++更简洁，同样是面向对象，只是JAVA太面向对象了，但是c++你还可以根据兴趣添加点c也就是面向过程的东西，好了废话不多说，还是主要说一下我的JAVA第一课——qq登录界面的开发。

      说到qq大家都不陌生，但是大家想过qq的登录界面是怎么实现的吗？想不想自己实现一个登录界面？哈哈，其实也不难，就是简单的逻辑实现。但是大家前提要掌握基本的JAVA的语法规则。

    其实java编程的基本单元就是类了，就算是我们熟悉的主函数（main）也要放在一个单独的类中，这是需要首先明确的一点；其次要知道，我们所看的一切的界面都是画出来的，那么这就是说，我们如果想看到一个qq的登录界面就需要画出这个界面，在此提出一个概念——图形界面。

      java中包括AWT和SWING这两个图形界面组件类。两个的区别是AWT是重量级组件，而SWING是轻量级组件。简单说一下，AWT是依赖于操作系统的绘图机制来实现的组件，SWING是基于AWT的基础上构建的一套新的轻量级组件。如果还不懂的话就自行百度吧。那么有哪些常用的组件类呢？？

1.容器组件类：能添加容器组件或者元素组件的类就是容器组件类。

JFrame:这是窗体容器组件类，是顶级容器。当我们看到一个界面的时候，一般可以看到边框，这很好理解，如果我们想制作一个界面，那么首先要有一个容器让我们可以在里面添加元素以达到我们需要的界面的效果。那么这个容器就是JFrame。

2.元素组件类：一般是用来显示文字、图片或接收输入(键盘、鼠标)的组件类就是元素组件类。

JLabel：标签元素组件类，用来显示文字或图片。 

JTextField：文本输入框元素组件类，接收用户的输入，直接显示输入信息。

JPasswordField:密码输入框元素组件类，接受用户的输入，以某个符号（*）代替。

JCheckBox：复选框元素组件类，提供选择框，还可以显示文字或者图片。

JButton：按钮元素组件类，用来显示文字或图片，还有点击的效果。

在此提个醒，上述的容器组件和元素组件类都是SWING的组件类。那么你在使用的时候记得要加上包名。例如：javax.swing.JFrame。

3.辅助类：用来帮助某一个组件实现功能的类。

java.awt.FlowLayout：流式布局类布局类，是针对容器组件的，流式布局类似于word文档。

java.awt.Dimension：封装组件大小的类，可以设置组件的宽度和高度（单位是像素，目前我碰到的长度单位都是像素）。

javax.swing.ImageIcon： 图标类，加载磁盘上的图片文件到程序中。

******************************************************************************************************

好了，以上说了这么多是因为首次接触JAVA，所以把一些必要的东西说了一下，那么现在进入这次要谈论的主题——写qq登录界面。

首先，我们需要建立一个窗体，之后才可以添加东西是吧。

<span style="white-space:pre">		</span>JFrame frame=new JFrame();//首先new一个窗体
		frame.setSize(400,350);//设置大小
		frame.setTitle("QQ登录");//设置标题
		frame.setLocationRelativeTo(null);//这个表示当运行时，窗体在屏幕的中央
		frame.setDefaultCloseOperation(3);//这个表示关闭时就直接关闭了

那么窗体就已经完成了，那么接下来就要开始添加东西。问题来了，懂电脑的人都清楚，电脑其实是很笨的，你想把某个东西放在哪个位置你必须和计算机说，否则他就不知道怎么放。在这里引出一个布局概念——流式布局。就是word一样，填完一行就可以填下一行了。qq界面的实现需要用到流式布局。在这里写出代码。

//设置布局
		java.awt.FlowLayout f1=new java.awt.FlowLayout(java.awt.FlowLayout.LEFT);//设置左对齐
		frame.setLayout(f1);//在窗体上设置布局。

布局设置好了之后我们就要在窗体上添加东西了，首先我们要把qq的图片放在登录界面上，为什么这样做，大家打开电脑的qq就知道了。（就是下面这张图片）

怎么把这张图片放在窗体上呢，这就用到了辅助类：javax.swing.ImageIcon。贴出代码：

<span style="white-space:pre">		</span>javax.swing.ImageIcon image=new ImageIcon(this.getClass().getResource("qq.png"));//首先加载图片
		JLabel labelImage = new JLabel(image);//创建一个JLabel组件类
		frame.add(labelImage);//将这个组件类放在窗体上，那么图片就可以显示出来了

之后呢就是添加一个账号输入框（JTextField）和一个密码输入框（JPasswordField）。贴出代码：

	<span style="white-space:pre">	</span>//the accout number
		JLabel labelName1 = new JLabel("账号：");
		frame.add(labelName1);
		JTextField textName = new JTextField();
		Dimension dim1 = new Dimension(325,25);//设置大小
		textName.setPreferredSize(dim1);
		frame.add(textName);
		//the password 
		JLabel labelName2 = new JLabel("密码：");
		frame.add(labelName2);
		JPasswordField password=new JPasswordField();
		Dimension dim2 = new Dimension(325,25);
		password.setPreferredSize(dim2);
		frame.add(password);

之后还有一个“记住密码”和“自动登录”，用到了JCheckBox组件类：

<span style="white-space:pre">		</span>JCheckBox cb1 = new JCheckBox("自动登录");
		frame.add(cb1);

<span style="white-space:pre">		</span>JCheckBox cb2 = new JCheckBox("记住密码");
		frame.add(cb2);

最后添加一个按钮“登录”就好了，用到了JButton组件类：

<span style="white-space:pre">		</span>javax.swing.JButton button = new javax.swing.JButton("登录");
		java.awt.Dimension dim4 = new java.awt.Dimension(200,20);
		button.setPreferredSize(dim4);
		frame.add(button);

那么这个界面就算是完成了，一个简易版的登录界面。我会把全部的代码贴出，需要声明的是，只是我第一次写的代码，之后还改动了很多，仔细看一下就知道有些地方很啰嗦，而且不怎么完善，一看就是一个菜鸟写的，但是我还是想把最原始的贴出来，觉得比较好玩。细心的人可以看到运行的时候，界面中少了一部分，就是密码框和账号框左边的那个头像，因为当时这个我解决不了，用的是流式布局嘛，懂得。如果想解决这个问题，就要用到JPanel这个“小容器”。这个呢，我们之后再讲。那么现在贴出整体的代码：

package yankun2016;

import javax.swing.*;
import java.awt.*;

public class login {
	public static void main(String[] args)
	{
		login Login=new login();
		Login.init();
	}
	public void init()
	{
		JFrame frame=new JFrame();
		frame.setSize(400,350);
		frame.setTitle("QQ登录");
		frame.setLocationRelativeTo(null);
		frame.setDefaultCloseOperation(3);
		//设置布局
		java.awt.FlowLayout f1=new java.awt.FlowLayout(java.awt.FlowLayout.LEFT);
		frame.setLayout(f1);
		//其他元素组件
		javax.swing.ImageIcon image=new ImageIcon(this.getClass().getResource("qq.png"));
		JLabel labelImage = new JLabel(image);
		frame.add(labelImage);
		//the accout number
		JLabel labelName1 = new JLabel("账号：");
		frame.add(labelName1);
		JTextField textName = new JTextField();
		Dimension dim1 = new Dimension(325,25);
		textName.setPreferredSize(dim1);
		frame.add(textName);
		//the password 
		JLabel labelName2 = new JLabel("密码：");
		frame.add(labelName2);
		JPasswordField password=new JPasswordField();
		Dimension dim2 = new Dimension(325,25);
		password.setPreferredSize(dim2);
		frame.add(password);
		
		javax.swing.JLabel blank1 = new javax.swing.JLabel("                               ");
		frame.add(blank1); 
		
		JCheckBox cb2 = new JCheckBox("记住密码");
		frame.add(cb2);
		
		javax.swing.JLabel blank2 = new javax.swing.JLabel("             ");
		frame.add(blank2); 
	
		
		JCheckBox cb1 = new JCheckBox("自动登录");
		frame.add(cb1);
		
		javax.swing.JLabel blank3 = new javax.swing.JLabel("                ");
		frame.add(blank3);
		
		javax.swing.JLabel blank4 = new javax.swing.JLabel("                             ");
		frame.add(blank4);

		//String s = "登录";
		javax.swing.JButton button = new javax.swing.JButton("登录");
		java.awt.Dimension dim4 = new java.awt.Dimension(200,20);
		button.setPreferredSize(dim4);
		frame.add(button);
		
		frame.setVisible(true);
		
//		Loginlistener ll = new Loginlistener(frame);
//		button.addActionListener(ll);
	}
}