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();
}
}