JPanel

JPanel容器类组件是一种轻量级的容器。它可以在上面添加其他的组件，并且设置组件在JPanel上的布局,JPanel默认是流式布局。可以创建多个JPanel，将JPanel放入顶级容器JFrame中时，再在JFrame设置多个JPanel的布局。这样就可以做到一些较为复杂的布局了。

实例：基于JPanel的登录界面。登录界面如下：

总观整个布局，其实是网格布局（3*1），而三个JPanel又是流式布局。代码如下：

*
 *作者：光羽住一
 *作用：基于Jpanel的用户登录界面 
 * 
 */
//1.引包、继承
import java.awt.*;
import javax.swing.*;
public class GUII extends JFrame{
	//2.声明需要用到的组件作为成员变量
	JPanel jp1,jp2,jp3;
	JButton jb1,jb2;
	JLabel jl1,jl2;
	JTextField jtf;
	JPasswordField jpf;
	
	//3.构造函数
	public GUII() {
		
		//4.构造组件
		jp1=new JPanel();
		jp2=new JPanel();
		jp3=new JPanel();
		
		jl1=new JLabel("用户名");
		jl2=new JLabel("密    码");
		
		jb1=new JButton("确定");
		jb2=new JButton("取消");
		
		jtf=new JTextField(15);
		jpf=new JPasswordField(15);
		
		//5.设置布局
		this.setLayout(new GridLayout(3,1));//三行一列的网格布局
		
		//6.添加组件
		jp1.add(jl1);
		jp1.add(jtf);
		
		jp2.add(jl2);
		jp2.add(jpf);
		
		jp3.add(jb1);
		jp3.add(jb2);
		
		//添加时对Jpanel面板组件再设置布局
		this.add(jp1);
		this.add(jp2);
		this.add(jp3);
		
		//7.设置窗体
		this.setTitle("用户登录界面");
		this.setLocation(200, 200);
		this.setSize(400, 200);
		this.setDefaultCloseOperation(this.EXIT_ON_CLOSE);
		this.setResizable(false);
		this.setVisible(true);			
	}

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		GUII guii=new GUII();

	}

}

JSplitPane

JSplitPane称为分割面板，支持水平、垂直切分。JSplitPane也是容器类组件。可以将多个JPanel放入其中进行分割，分割后再设置每个界面的比例等等。生活中比较常见的应用就是电子词典，百度文、文档导读框库等等。这里简单的举例一个资料卡片。

/*
 * 作者：光羽住一
 * 作用：基于JSplitPane的用户界面
 * 
 */

//1.引包、继承
import java.awt.*;
import javax.swing.*;
public class GUIII extends JFrame{
	//2.声明需要用到的组件作为成员变量
	JList jl;
	JLabel jb1;
	JPanel jpl;
	JSplitPane jp;
	
	//3.构造函数
	public GUIII() {
		//4.构造组件
		String data[]= {"姓名：金雪炫","出生日期：1995.01.03","概况：167cm，47kg，A型","职业：歌手，演员"};
		jl=new JList(data);
		
		jb1=new JLabel(new ImageIcon("image/shine.jpg"));
		
		jpl=new JPanel();
		jpl.add(jb1);
				
		jp=new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,jl,jpl);
		jp.setOneTouchExpandable(true);
		
		//5.设置布局（默认） 	
		
		//6.添加组件
		this.add(jp);
		
		//7.设置窗体
		this.setTitle("资料卡片");
		this.setLocation(200, 200);
		this.setSize(800, 600);
		this.setDefaultCloseOperation(this.EXIT_ON_CLOSE);
		this.setResizable(false);
		this.setVisible(true);
		
		jp.setDividerLocation(0.3);
		
	}

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		GUIII gi=new GUIII();

	}

}

JTabbedPane

JTabbedPane是分隔窗体，属于容器类组件，可以实现在一个界面上打开不同的子界面。生活中的实例比如浏览器的多窗格，聊天工具的多选择登陆窗格。这里我们做一个简易的qq登陆界面去应用JTabbedPane



/*
 * 作者：光羽住一
 * 作用：模仿qq的简易登录界面
 */
//1.引包、继承
import java.awt.*;
import javax.swing.*;
public class qqLogin extends JFrame {
	//2.声明组件作为成员变量
	
	//北部区域
	JLabel jl1;
	//南部区域
	JButton jb1,jb2,jb3;
	JPanel jp1;
	//中间区域
	JTabbedPane jtp;//选项卡窗格
	JPanel jp2,jp3,jp4;//每个窗格的内容放进单独的JPanel
	JLabel jl2,jl3,jl4,jl5,jl6,jl7,jl8,jnull;
	JTextField jtf,jtf2,jtf3;
	JPasswordField jpf;
	JCheckBox jcb1,jcb2;
	
	//3.构造函数
	public qqLogin() {
		//4.创建组件
		//北部区域
		jl1=new JLabel(new ImageIcon("image/qqup.PNG"));
		
		//南部区域
		jp1=new JPanel();
		jb1=new JButton(new ImageIcon("image/login.png"));
		
		//中间区域
		jtp=new JTabbedPane();
		jp2=new JPanel();
		jp3=new JPanel();
		jp4=new JPanel();
		jnull=new JLabel(" ");
		
		//账号密码登录界面jp2
		jl2=new JLabel("QQ账号：",JLabel.CENTER);
		jl3=new JLabel("QQ密码：",JLabel.CENTER);
		jl4=new JLabel("忘记密码",JLabel.CENTER);
		jl5=new JLabel("<html><a href='www.baidu.com'>密码保护</a></html>");
		//对jl4进行字体的设置
		jl4.setFont(new Font("宋体",Font.PLAIN,16));//字体样式
		jl4.setForeground(Color.BLUE);//字体颜色
		jl4.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));//鼠标动态变化
		
		jtf=new JTextField(10);
		jpf=new JPasswordField(10);
		
		jcb1=new JCheckBox("自动登录");
		jcb2=new JCheckBox("记住密码");
		
		//手机号码登录界面
		jp3=new JPanel();
		jl6=new JLabel("请输入手机号",JLabel.CENTER);
		jtf2=new JTextField(10);
		jl7=new JLabel("获取验证码");
		jl7.setFont(new Font("宋体",Font.PLAIN,16));//字体样式
		jl7.setForeground(Color.BLUE);//字体颜色
		jl7.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));//鼠标动态变化
		jl8=new JLabel("请输入验证码",JLabel.CENTER);
		jtf3=new JTextField(10);
		
		
		
		//5.设置布局
		jp2.setLayout(new GridLayout(3,3));//对账号登录界面的布局
		jp3.setLayout(new GridLayout(2,3));//手机号码登陆页面的布局
		
		//6.添加组件
		jp1.add(jb1);
		//jp2按照3*3网格添加元素
		jp2.add(jl2);
		jp2.add(jtf);
		jp2.add(jnull);
		
		jp2.add(jl3);
		jp2.add(jpf);
		jp2.add(jl4);
		
		jp2.add(jcb1);
		jp2.add(jcb2);
		jp2.add(jl5);
		
		jp3.add(jl6);
		jp3.add(jtf2);
		jp3.add(jl7);
		
		jp3.add(jl8);
		jp3.add(jtf3);
		
		//将面板添加到选项窗格上
		jtp.add("QQ账号",jp2);
		jtp.add("手机号码", jp3);
		//对整个窗体的布局
		this.add(jl1,BorderLayout.NORTH);
		this.add(jtp,BorderLayout.CENTER);
		this.add(jp1,BorderLayout.SOUTH);
		
		//7.设置窗体
		ImageIcon icon=new ImageIcon("image/qq.gif");
		this.setIconImage(icon.getImage());
		this.setLocation(300, 300);
		this.setTitle("腾讯QQ");
		this.setSize(430, 350);
		this.setDefaultCloseOperation(this.EXIT_ON_CLOSE);
		this.setResizable(false);
		this.setVisible(true);
	}
	
	
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		qqLogin qq=new qqLogin();

	}

}

基于java中JFrame/JPanel/JSplitPane/JTabbedPane的图形界面

JPanel

JSplitPane

JTabbedPane

猜你喜欢