Java布局管理器之插件(七)---JTabbedPane

今天我们主要讲一下JTabbedPane这个控件。

它是卡片布局，可以将JPanel放到卡片上面做成标签页的形式。

接下来我们展示一个Demo以QQ2008界面为例子。(想做那个QQ界面都是可以的)

首先我们看下JTabbedPane是继承自哪个类的：

然后我们看下Java API对这个类的说明：

接下来我们直接上代码，看下QQ登录界面如何实现的：

/**
 * QQ 登录界面
 * 分三块，北面，中间，南面。
 * 其中北面是QQ图片
 * 南面是登录、取消、注册向导
 * 中间是由三个卡片布局
 * 每个卡片是用3x3的网格布局
 */
package com.shunping;

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

public class Demo8_11 extends JFrame{
	//定义控件
	JPanel jp1 = null; //北面
	JPanel jp2 = null; //中间
	JPanel jp3 = null; //南面
	JPanel jp4 = null; //卡片2
	JPanel jp5 = null; //卡片3
	
//	JLabel jlb_jp4 = null;
//	JLabel jlb_jp5 = null;
	
	//北面---QQ图片
	JLabel jlb1 = null;
	
	//南面---三个按钮(登录、取消、注册向导)
	JButton btn1 = null;
	JButton btn2 = null;
	JButton btn3 = null;
	
	//中间---卡片布局
	JTabbedPane jtp1 = null;
	JLabel jbl2 = null;
	JLabel jbl3 = null;
	JLabel jbl4 = null;
	JLabel jbl5 = null;
	
	JTextField jtf1 = null;      //输入QQ号
	JPasswordField jpf1 = null;  //输入QQ密码
	JButton btn4 = null;		 //清空账号
	JCheckBox jcb1 = null;		 //隐身登录
	JCheckBox jcb2 = null;       //记住密码
	
	
	
	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		Demo8_11 demo8_11 = new Demo8_11(320, 220);

	}
	
	public Demo8_11(int x_dispSize, int y_dispSize)
	{
		jp1 = new JPanel(); //北面
		jp2 = new JPanel(); //中间
		jp3 = new JPanel(); //南面
		
		jp4 = new JPanel(); //这里需要新建两个JPanel 否则卡片切到这里的时候，没有界面
		jp5 = new JPanel();
		
				
		//北面
		jlb1 = new JLabel(new ImageIcon("images/QQLoginPic.png"));
		//jp1.add(jlb1, BorderLayout.CENTER);
		
		//南面 (JPanel 默认流式布局)
		btn1 = new JButton("登   录");
		btn2 = new JButton("取   消");
		btn3 = new JButton("注册向导");
		jp3.add(btn1);
		jp3.add(btn2);
		jp3.add(btn3);
		
		//中间
		jtp1 = new JTabbedPane();
		
		jbl2 = new JLabel("QQ  号码", JLabel.CENTER);
		jbl3 = new JLabel("QQ  密码", JLabel.CENTER);
		jbl4 = new JLabel("忘记密码", JLabel.CENTER);
		//设置jbl4的字体和字号大小
		jbl4.setFont(new Font("宋体", Font.PLAIN, 16));
		//设置jbl4的字体颜色
		jbl4.setForeground(Color.BLUE);
		
		//jbl5是申请密码保护的超链接
		jbl5 = new JLabel(" 申请密码保护 ");
		//当鼠标移动到该位置的时候，自动变成小手
		jbl5.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
		
		jtf1 = new JTextField();      		//输入QQ号
		jpf1 = new JPasswordField();  		//输入QQ密码
		btn4 = new JButton("清除号码");  	//清空账号
		jcb1 = new JCheckBox("隐身登录");	//隐身登录
		jcb2 = new JCheckBox("记住密码");    //记住密码
	
		//设置中间的卡片为3x3布局
		jp2.setLayout(new GridLayout(3, 3, 10, 5));
		//第一行
		jp2.add(jbl2);
		jp2.add(jtf1);
		jp2.add(btn4);
		//第二行
		jp2.add(jbl3);
		jp2.add(jpf1);
		jp2.add(jbl4);
		//第三行
		jp2.add(jcb1);
		jp2.add(jcb2);
		jp2.add(jbl5);
		
		//添加卡片到jp2, JTabbedPane测试
		jtp1.add("QQ  号码", jp2);
		jtp1.add("手机号码", jp4);
		jtp1.add("电子邮箱", jp5);
		
		//把三个JPanel添加到主控界面
		/**
		 * 这里要注意，直接添加JLabel既可以，
		 * 不要先加到JPanel再把Jpanel添加到主窗口，
		 * 因为那样的话，图片和窗口之间会有间隙
		 */
		this.add(jlb1, BorderLayout.NORTH); 
		
		this.add(jtp1, BorderLayout.CENTER);
		this.add(jp3, BorderLayout.SOUTH);
		
		
		//设置左上角logo
		this.setIconImage(new ImageIcon("images/QQicon.png").getImage());
		
		//设置窗体大小
		this.setSize(x_dispSize, y_dispSize);
		
		//设置窗体显示位置
		//this.setLocation(300, 400);
		this.setLocationRelativeTo(null); //居中显示
		
		//禁止用户改变窗体大小
		this.setResizable(false);
		
		//设置窗体名字
		this.setTitle("QQ登录");
		
		//设置关闭窗体的时候，自动关闭虚拟机
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		
		//设置窗体为visible
		this.setVisible(true);
		
	}

}

运行后的UI如下图：

注:这里我们只实现了 QQ号码这个标签页，所以后面两个标签页是空白的。