`
lazyee
  • 浏览: 15079 次
社区版块
存档分类
最新评论

QQ界面和计算器界面

    博客分类:
  • java
阅读更多
在前面简单登录界面实现的基础上更进一步,尝试实现QQ登录界面。
首先打开新版QQ的登陆界面,可以发现它有着典型的边框布局特点。一整块的背景,我们暂时不能实现,可当成是北边的部分;西边是我们的头像显示;中央为账号密码输入框及两个复选框;南边是一个登录按钮。
由于目前水平有限,暂时采取截图的方法实现,尽量与QQ保持一致。
北边与西边类似,可用一个JLabel对象来显示一张图片,但是在这之前要先实例化一个ImageIcon对象(ImageIcon类可以实现一些有关图像的操作)。例如:
//实例化一个ImageIcon对象
ImageIcon image = new ImageIcon(“图片在工程包下的路径”);
//实例化一个标签对象,用来显示图片
JLabel jb = new JLable(image);
//调整标签大小
jb.setPreferredSize(new  java.awt.Dimension(宽,高));
//将标签放置在窗体北边
jf.add(jb,BorderLayout.NORTH);
中央部分与之前简单登录界面差不多,只需添加两种对象:下拉框和复选框。
南边,为了保证按钮位置及大小固定,最好实例化一个面板对象,将按钮放置在面板中。
具体代码如下:
package practise;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;

import javax.swing.ImageIcon;
import javax.swing.JCheckBox;
import javax.swing.JComboBox;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;

public class LoginTwo {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// 实例化Login类的对象l
		LoginTwo lg = new LoginTwo();
		//调用显示窗体界面的方法
		lg.initUI();
	}
	//显示窗体界面的方法
	public void initUI(){
		//实例化一个JFrame窗体对象
		javax.swing.JFrame jf = new javax.swing.JFrame();
		//设置窗体标题
		jf.setTitle("简单登录界面");
		//设置窗体居中显示
		jf.setLocationRelativeTo(null);
		//设置窗口大小
		jf.setSize(370,280);
			
		//设置边框布局
		java.awt.BorderLayout bl = new java.awt.BorderLayout();
		jf.setLayout(bl);
		
		/***************************北边**************************/
		//实例化一个ImageIcon的对象
		ImageIcon image = new ImageIcon("images/qq.jpg");
		//实例化一个标签对象,用来显示一个图标
		JLabel lbImage = new JLabel(image);
		lbImage.setPreferredSize(new java.awt.Dimension(370,110));
		//将标签设置显示在窗体北边
		jf.add(lbImage,BorderLayout.NORTH);
		/***************************北边**************************/
		
		/***************************西边**************************/
		//实例化一个ImageIcon的对象
		javax.swing.ImageIcon image2 = new javax.swing.ImageIcon("images/q.jpg");
		//实例化一个标签对象,用来显示一个图标
		javax.swing.JLabel lbImage2 = new javax.swing.JLabel(image2);
		//调整标签大小
		lbImage2.setPreferredSize(new java.awt.Dimension(100,80));
		//将标签设置显示在窗体北边
		jf.add(lbImage2,BorderLayout.WEST);
		/***************************西边**************************/
		
		/***************************中央**************************/
		//实例化一个面板容器
		JPanel panel = new JPanel();
		//实例化一个流体布局对象,放在面板中间
		FlowLayout fl = new java.awt.FlowLayout(FlowLayout.LEFT);
		//设置窗体的布局方式
		panel.setLayout(fl);
			
		
		//实例化账号下拉框对象
		JComboBox jcb = new JComboBox();
		//设置下拉框大小
		jcb.setPreferredSize(new Dimension(190,25));
		//设置下拉框可编辑
		jcb.setEditable(true);
		//添加jcb到面板
		panel.add(jcb);
		//实例化标签对象
		JLabel jlOne = new JLabel("注册账号");
		//将对象添加到窗体上
		panel.add(jlOne);
		
		//实例化密码输入框
		JPasswordField pwf = new JPasswordField();
		//设置密码输入框大小
		pwf.setPreferredSize(new Dimension(190,25));
		panel.add(pwf);
		//实例化密码标签
		JLabel jlTwo = new JLabel("忘记密码");
		panel.add(jlTwo);
		
		//实例化一个复选框
		JCheckBox check= new JCheckBox("记住密码");
		panel.add(check);
		JCheckBox check2= new JCheckBox("自动登录");
		panel.add(check2);
		
		//将panel对象放在窗体中央
		jf.add(panel,BorderLayout.CENTER);
		/***************************中央**************************/
		
		/***************************南边**************************/
		//实例化一个面板容器
		JPanel panel2 = new JPanel();
		//实例化一个流体布局对象,放在面板中间
		FlowLayout fl2 = new java.awt.FlowLayout(FlowLayout.CENTER);
		//设置窗体的布局方式
		panel2.setLayout(fl2);
		panel2.setPreferredSize(new java.awt.Dimension(0,42));
		
		//实例化一个ImageIcon的对象
		ImageIcon image3 = new ImageIcon("images/login.jpg");
		//实例化一个按钮,用来显示一个图标
		javax.swing.JButton jb = new javax.swing.JButton(image3);
		jb.setPreferredSize(new java.awt.Dimension(177,31));
		//将按钮添加到panel2面板上
		panel2.add(jb);
		
		//将panel2对象放在窗体南边
		jf.add(panel2,BorderLayout.SOUTH);
		
		/***************************南边**************************/
		//设置窗体可见
		jf.setVisible(true);				
	}
}
程序运行结果为:


接下来来实现计算器界面(以XP系统为例):
XP系统中的计算器如下图:


从上图中,我们可以看到第一行按钮的大小与其他按钮不同,第一列按钮与其他按钮间的间距不同。由此,自然可以想到边框布局。北边放置结果显示框;西边放置下陷按钮和第一列按钮;中央放置其他按钮,并用条件语句判断其是否为第一行的按钮。
具体代码如下:
package practise;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Calculator {

	/**
	 * 程序的入口主函数
	 */
	public static void main(String[] args) {
		// 实例化一个Calculator类的对象
		Calculator cl =new Calculator();
		//调用计算器界面
		cl.show();
	}
	
	//定义显示计算器界面方法
	public void show(){
		//实例化一个JFrame窗体对象
		JFrame jf = new JFrame();
		jf.setTitle("计算器");//设置标题
		jf.setSize(260,245);//设置窗体大小
		jf.setDefaultCloseOperation(3);//关闭时退出程序
		jf.setLocationRelativeTo(null);//设置窗体位于屏幕中央
		jf.setResizable(false);//禁止用户修改大小
		
		//实例化一个边框布局
		BorderLayout bl = new BorderLayout();
		jf.setLayout(bl);
		
		/**************************北边输入框******************************/
		//实例化一个面板
		JPanel jp = new JPanel();
		//实例化一个流式布局
		FlowLayout fl = new FlowLayout(FlowLayout.CENTER);
		jp.setLayout(fl);
		//实例化一个文本输入框
		JTextField tf = new JTextField();
		tf.setPreferredSize(new Dimension(239,21));
		//将tf对象添加到面板上
		jp.add(tf);
		//将jp面板添加到窗体北边
		jf.add(jp,BorderLayout.NORTH);
		/**************************北边输入框******************************/
		
		/**************************西边输入框******************************/
		//实例化二面板
		JPanel jp2 = new JPanel();
		//实例化一个流式布局
		FlowLayout fl2 = new FlowLayout(FlowLayout.LEFT);
		jp2.setLayout(fl2);
		//设置jp2大小
		jp2.setPreferredSize(new Dimension(45,0));
		
		//实例化一个按钮,用来显示一个下陷图标
		javax.swing.JButton jb2 = new javax.swing.JButton();
		jb2.setPreferredSize(new java.awt.Dimension(27,24));
		jb2.setEnabled(false);
		jp2.add(jb2);
		
		//定义一个字符串数组,用来存放西边按钮图片路径
		String[] path={"images/Calculator/mc.jpg","images/Calculator/mr.jpg",
						"images/Calculator/ms.jpg","images/Calculator/m+.jpg"};
		//遍历数组,创建按钮对象
		for (int i=0;i<path.length;i++){
			//实例化一个ImageIcon对象
			ImageIcon icon = new ImageIcon(path[i]);
			//实例化一个按钮
			JButton jb = new JButton(icon);
			//设置按钮大小
			jb.setPreferredSize(new Dimension(36,27));
			//将按钮添加到二面板上
			jp2.add(jb);
		}
		//将面板添加到窗体西边
		jf.add(jp2,BorderLayout.WEST);
		/**************************西边输入框******************************/
		
		/**************************中央输入框******************************/
		//实例化三面板
		JPanel jp3 = new JPanel();
		jp3.setLayout(new FlowLayout());
		

		//定义一个字符串数组,用来存放西边按钮图片路径
		String[] path2={"images/Calculator/bs.jpg",
				"images/Calculator/ce.jpg","images/Calculator/c.jpg",
				"images/Calculator/7.jpg","images/Calculator/8.jpg",
				"images/Calculator/9.jpg","images/Calculator/chu.jpg",
				"images/Calculator/sqrt.jpg","images/Calculator/4.jpg",
				"images/Calculator/5.jpg","images/Calculator/6.jpg",
				"images/Calculator/chen.jpg","images/Calculator/qu.jpg",
				"images/Calculator/1.jpg","images/Calculator/2.jpg",
				"images/Calculator/3.jpg","images/Calculator/-.jpg",
				"images/Calculator/1x.jpg","images/Calculator/0.jpg",
				"images/Calculator/+-.jpg","images/Calculator/d.jpg",
				"images/Calculator/+.jpg","images/Calculator/=.jpg"};
		//遍历数组,创建按钮对象
		for (int i=0;i<path2.length;i++){
			//实例化一个ImageIcon对象
			ImageIcon icon = new ImageIcon(path2[i]);
			//实例化一个按钮
			JButton jb = new JButton(icon);
			if (path2[i].equals("images/Calculator/bs.jpg")){
				jb.setPreferredSize(new Dimension(63,27));
			}else if(path2[i].equals("images/Calculator/ce.jpg")){
				jb.setPreferredSize(new Dimension(62,27));
			}else if(path2[i].equals("images/Calculator/c.jpg")){
				jb.setPreferredSize(new Dimension(62,27));
			}else{
				//设置按钮大小
				jb.setPreferredSize(new Dimension(36,27));
			}
			//将按钮添加到二面板上
			jp3.add(jb);
		}
		//将面板添加到窗体中央
		jf.add(jp3,BorderLayout.CENTER);
		/**************************中央输入框******************************/
		jf.setVisible(true);
	}
}
程序运行结果为:


注意:要添加的按钮数较多,若一个个地添加必然费时费力。因此,在这里采用数组来存储图片路径,然后在进行遍历的方法。
equals()方法用来比较内容。
  • 大小: 30 KB
  • 大小: 11.7 KB
  • 大小: 19.8 KB
  • 大小: 18.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics