Netjava Lesson4 swing界面

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