2013.07.10
上课内容:swing界面
java主要有两个图形界面,一个是awt,一个是swing
awt产生的比较早,而swing是在最近几个jdk版本中才有的,所以相对而言要比awt完善一些。
我们可以观察自己所打开的每一个窗口,例如eclipse,我的电脑等,这些窗口都有很多共同的特性:
是一个由外边框,菜单栏,然后到内部布局的一个窗口。
在java界面的开发中,窗口是由组件组成的,组件主要有两大类:
一个是容器组件:
容器组件主要有窗体和面板
窗体JFrame是最顶级的容器,在其中可以放入面板,但不能在窗体中放置窗体
面板JPanel是轻量级容器,在面板中可以再放入面板,同样也不能放入窗体
还有就是菜单栏的组建JMenuBar和JMenu
一个是元素组件:
元素组建有很多,我们这里列举一些常用的:
JButton 按钮类
JLabel 标签类
JTextField 文本框类
JPasswordField 密码输入框类
JComboBox 下拉框类
JCheckBox 复选框类
JMenuItem 菜单类
这些类都可以在javax.swing包下,用法基本都相同,可以通过查找API找到并获取其用法,在练习程序中也都有涉及。
知道了窗口由哪些组件组成,但是如何将组件有规律地排列,或者是按我们自己的想法排列,这就需要进行布局
java.awt包中常用的有三种布局:
1、流体布局FlowLayout
流布局用于安排有向流中的组件,这非常类似于段落中的文本行,就是加入的组件按照文本行格式贴到面板上。
2、边框布局BorderLayout
边框布局是将容器分为五个区域:北、南、东、西、中,它可以对容器组件进行安排,并调整其大小。但要注意每个区域最多只能包含一个组件,
3、网格布局GridLayout
网格布局以矩形网格形式对容器的组件进行布置。容器被分成大小相等的矩形,一个矩形中放置一个组件。
在我们设置每个容器布局的时候,我们要注意每个容器默认的布局,这样可以帮助我们节约程序篇幅:
JFrame窗体默认的布局是边框布局,添加元素组件的时候默认添加到中间。
JPanel面板默认的布局是流体布局。
在创建一个窗口时,我们首先要分析窗体用了什么布局,假如是边框布局,我们就要再分析东西南北中每一个面板应该使用什么布局。
只有在知道布局的前提下,才能进行界面的开发,否则将事倍功半。
下面我们来简单介绍一下swing界面开发的流程:
1、创建一个MainFrame类,在类中定义主函数并且初始化一个方法
2、实例化一个窗体类对象,并设置窗体的各项属性:大小,布局,关闭按钮,是否可调节,初始位置等。
3、实例化一个布局对象并且设置窗体的布局方法,若设置的为边框布局则可以跳过此步
4、实例化对象容器或者元素组件,进行窗体的构建,并添加到窗体上
5、在主函数中调用初始化界面的方法
本节课学到设置背景的小技巧:
//实例化一个图片对象作为背景
ImageIcon backgroundImage = new ImageIcon("images/background.jpg");
//实例化一个标签,将图片放在标签上
JLabel JLbackground = new JLabel(backgroundImage);
//设置标签的绝对位置为窗体最左上端,并且宽度与高度与背景图片一致
JLbackground.setBounds(0, 0, backgroundImage.getIconWidth(), backgroundImage.getIconHeight());
//将图片标签放置在LayeredPane面板上,LayeredPane面板位于contentPane面板的下面,将上层的面板设置为透明,就可以看到下面的面板了
jf.getLayeredPane().add(JLbackground,new Integer(Integer.MIN_VALUE));
//获取content对象,由于get函数所返回的不是JPanel对象,我们进行强制转换
JPanel contentPane = (JPanel)jf.getContentPane();
//设置contentPane面板透明
contentPane.setOpaque(false);
本节的练习有两个,一个是QQ登陆界面,一个是计算器登陆界面
QQ登陆界面的开发与设计:
首先打开QQ,观察QQ的布局发现左边有一个图片对应右边有三行,所以肯定不是流体布局,因此我们这里采用边框布局。
北部为图片所在处,但考虑到该图片在下面也有,我们将其设为背景。
西部有有一个头像,我们考虑插入一个标签并将图片放到标签上。
中部则为帐号输入框、密码输入框等,这些可以设为流体布局左对齐。
南部则为登陆按钮,默认的是流体布局居中,所以直接插入按钮即可。
这样,我们的大体设计思路就出来了.
下面贴出QQ登陆界面的代码:
public class QQLogin {
public static void main(String[] args) {
// TODO Auto-generated method stub
//实例化一个QQLogin类对象
QQLogin ql=new QQLogin();
//调用初始化窗口的方法
ql.initUI();
}
public void initUI(){
//实例化一个窗体对象
JFrame jf = new JFrame();
//设置窗体的大小
jf.setSize(380,293);
//设置窗体的关闭按钮
jf.setDefaultCloseOperation(3);
//设置窗体是不可调节的
jf.setResizable(false);
//设置窗体居中
jf.setLocationRelativeTo(null);
//实例化一个图片对象作为背景
ImageIcon backgroundImage = new ImageIcon("images/background.jpg");
//实例化一个标签,将图片放在标签上
JLabel JLbackground = new JLabel(backgroundImage);
//设置标签的绝对位置为窗体最左上端,并且宽度与高度与背景图片一致
JLbackground.setBounds(0, 0, backgroundImage.getIconWidth(), backgroundImage.getIconHeight());
//将图片标签放置在LayeredPane面板上
jf.getLayeredPane().add(JLbackground,new Integer(Integer.MIN_VALUE));
//获取content对象
JPanel contentPane = (JPanel)jf.getContentPane();
//设置contentPane面板透明
contentPane.setOpaque(false);
//实例化一个bl边框布局
BorderLayout bl = new BorderLayout();
//设置窗体的布局为边框布局
jf.setLayout(bl);
//实例化在北部实例化一个面板
JPanel JPanelNorth = new JPanel();
//设置面板的大小
JPanelNorth.setPreferredSize(new Dimension(0,125));
//设置面板是透明的
JPanelNorth.setOpaque(false);
//将面板添加到窗体北部
jf.add(JPanelNorth,BorderLayout.NORTH);
//创建西边对象
JPanel JPanelWest = JPanelWest();
//设置西边面板为透明
JPanelWest.setOpaque(false);
//将面板添加到窗体的西部
jf.add(JPanelWest,BorderLayout.WEST);
//创建中间对象
JPanel JPanelCenter = JPanelCenter();
//设置中间面板透明
JPanelCenter.setOpaque(false);
//将面板添加到窗体的中部
jf.add(JPanelCenter,BorderLayout.CENTER);
//创建南部对象
JPanel JPanelSouth = JPanelSouth();
//设置南部面板透明
JPanelSouth.setOpaque(false);
//将面板添加到窗体的南部
jf.add(JPanelSouth,BorderLayout.SOUTH);
//设置窗体可见
jf.setVisible(true);
}
/**
* 创建西边面板的方法
* @return 西边面板对象
*/
public JPanel JPanelWest(){
//创建一个面板
JPanel panel = new JPanel();
//创建流体布局对象,并右对齐
FlowLayout fl=new FlowLayout(FlowLayout.RIGHT);
//设置面板的布局为流体布局
panel.setLayout(fl);
//设置面板的大小,实际是宽度,因为西部不能设置高度
panel.setPreferredSize(new Dimension(100,0));
//实例化一个图片对象
ImageIcon PortraitImage = new ImageIcon("images/portrait.jpg");
//实例化一个标签对象,并将图片添加到标签上
JLabel JLimage = new JLabel(PortraitImage);
//将标签添加到面板上
panel.add(JLimage);
//返回西边面板对象
return panel;
}
/**
* 创建中间面板的方法
* @return 中间面板对象
*/
public JPanel JPanelCenter(){
//实例化一个面板对象
JPanel panel = new JPanel();
//实例化一个布局,并且左对齐
FlowLayout fl = new FlowLayout(FlowLayout.LEFT);
//设置面板的布局流体布局
panel.setLayout(fl);
//实例化一个下拉框对象
JComboBox<String> jc = new JComboBox<String>();
//设置下拉框可编辑
jc.setEditable(true);
//初始化的下拉框内容
jc.addItem("444910865");
//设置下拉框大小
jc.setPreferredSize(new Dimension(185,25));
//将下拉框添加到面板上
panel.add(jc);
//实例化jl1对象
JLabel jl1 = new JLabel(" 注册帐号");
//实例化jl2对象
JLabel jl2 = new JLabel(" 忘记密码");
//实例化jpa对象
JPasswordField jpa = new JPasswordField();
//设置密码输入框大小
jpa.setPreferredSize(new Dimension(185,25));
//将注册帐号标签添加到面板
panel.add(jl1);
//将密码输入框添加到面板
panel.add(jpa);
//将忘记密码标签添加到面板
panel.add(jl2);
//实例化一个jch1对象
JCheckBox jch1 = new JCheckBox("记住密码");
//实例化一个jch2对象
JCheckBox jch2 = new JCheckBox("自动登陆");
//设置复选框透明
jch1.setOpaque(false);
//设置复选框透明
jch2.setOpaque(false);
//将记住密码复选框添加到面板
panel.add(jch1);
//将自动登陆复选框添加到面板
panel.add(jch2);
//返回中间面板的对象
return panel;
}
/**
* 设置南边面板的方法
* @return 南边面板对象
*/
public JPanel JPanelSouth(){
//实例化一个面板
JPanel panel = new JPanel();
//实例化jbu对象
JButton jbu = new JButton("登 录");
//设置按钮的大小
jbu.setPreferredSize(new Dimension(160,30));
//将按钮添加到面板
panel.add(jbu);
//返回南边面板
return panel;
}
}
计算器界面的开发与设计:
计算器相对比较简单,由一个文本输入框和很多的按钮组成。
首先创建窗体,设置窗体为边框,由北面和中间组成。
然后创建一个文本框,设置文本框大小,不可编辑,文字居右等。
然后就是创建很多的按钮,并设置其大小。
大体思路就是如此,下面贴出计算器界面的代码:
public class Caculator {
/**
* @author TTH
*/
public static void main(String[] args) {
// TODO Auto-generated method stub
Caculator ca = new Caculator();
ca.initUI();
}
public void initUI(){
//创建一个窗体
JFrame jf = new JFrame();
//设置窗体的标题
jf.setTitle("计算器");
//设置窗体的大小
jf.setSize(400,370);
//设置窗体的关闭按钮
jf.setDefaultCloseOperation(3);
//设置窗体不可以调节
jf.setResizable(false);
//设置窗体居中显示
jf.setLocationRelativeTo(null);
//调用北面窗体的方法
JPanel panelnorth = panelnorth();
//添加窗体至北面
jf.add(panelnorth,BorderLayout.NORTH);
//调用中间窗体的方法
JPanel panelcenter = panelcenter();
//添加窗体至中间
jf.add(panelcenter,BorderLayout.CENTER);
//设置可见
jf.setVisible(true);
}
public JPanel panelnorth(){
JPanel panel = new JPanel();
//创建文本框
JTextField tf = new JTextField("0.",33);
//设文本框大小
tf.setPreferredSize(new Dimension(50,50));
//设置不可编辑
tf.setEditable(false);
//设置右对齐
tf.setHorizontalAlignment(SwingConstants.RIGHT);
//将文本框添加至窗体
panel.add(tf);
//返回北面窗体对象
return panel;
}
public JPanel panelcenter(){
JPanel panel = new JPanel();
//定义字符串数组
String[] str1={"Backspace","CE","C"};
String[] str2={ "MC","7","8","9","/","sqrt",
"MR","4","5","6","*","%",
"MS","1","2","3","-","1/x",
"M+","0","+/-",".","+","="};
//添加上面三个大按钮按钮
for(int i=0;i<str1.length;i++){
//实例化jbu对象,并显示str1的第i个字符串
JButton jbu = new JButton(str1[i]);
//设置jbu的大小
jbu.setPreferredSize(new Dimension(120,50));
//将jbu添加到窗体上
panel.add(jbu);
}
//添加下面三个小按钮
for(int j=0;j<str2.length;j++){
//实例化jbu对象,并显示str2的第i个字符串
JButton jbu=new JButton(str2[j]);
//设置jbu的大小
jbu.setPreferredSize(new Dimension(58,50));
//将jbu添加到窗体上
panel.add(jbu);
}
//返回南面窗体对象
return panel;
}
}