计算器界面的设计

1、计算器界面的设计,主讲教师：翟芸 单位：软件工程学院,一、教学目标,理解并掌握Java中的类、对象等概念； 掌握常用布局管理器BorderLayout、FlowLayout、GridLayout的布局方式； 理解并掌握JFrame、JButton、JTextField等组件类和面板JPanel类； 了解组件尺寸的设置方式Dimension类的应用。,二、教学重点,掌握布局管理器BorderLayout、 FlowLayout、GridLayout的布局方式 能实际应用JFrame、JButton、JTextField、JPanel等类,三、教学难点,面板类JPanel的应用 布局管理器的综合应

2、用,四、教学内容,1、计算器界面,2、设计思路,（1）创建窗体，窗体采用BorderLayout 布局（默认）； （2）创建显示器面板，采用FlowLayout布局，其中包含一个文本框组件； （3）创建按钮面板，采用GridLayout布局，其中包含16个按钮组件； （4）在窗体的左侧、右侧分别添加一个标签组件，目的是使按钮和边框之间存在一定的距离。,（1）创建窗体,import javax.swing.*; public class Jsq1 extends JFrame public Jsq1() setTitle(计算器); setBounds(100,100,230,230); set

3、Visible(true); public static void main(String args) Jsq1 f=new Jsq1(); ,（2）创建显示面板,JPanel p1=new JPanel(); JTextField t=new JTextField(“0”); p1.setLayout(new FlowLayout(); t.setHorizontalAlignment(JTextField.RIGHT); t.setColumns(18); t.setEditable(false); p1.add(t); add(p1,North);,（3）创建按钮面板,JPanel p2

4、=new JPanel(); GridLayout l2=new GridLayout(4,4); p2.setLayout(l2); l2.setHgap(10); l2.setVgap(10); b1=new JButton(1); b2=new JButton(2); b3=new JButton(3); b4=new JButton(+); b5=new JButton(4); b6=new JButton(5); b7=new JButton(6);,b8=new JButton(-); b9=new JButton(7); b10=new JButton(8); b11=new J

5、Button(9); b12=new JButton(*); b13=new JButton(.); b14=new JButton(0); b15=new JButton(=); b16=new JButton(/);,p2.add(b1); p2.add(b2); p2.add(b3); p2.add(b4); p2.add(b5); p2.add(b6); p2.add(b7); p2.add(b8); p2.add(b9); p2.add(b10); p2.add(b11); p2.add(b12); p2.add(b13); p2.add(b14); p2.add(b15); p2.

6、add(b16); add(p2,Center);,（4）创建左右空白标签,JLabel left=new JLabel(); JLabel right=new JLabel(); left.setPreferredSize(new Dimension(10,0); right.setPreferredSize(new Dimension(10,0); add(left,West); add(right,East);,3、代码：,import javax.swing.*; import java.awt.*; public class Jsq extends JFrame JButton b1

7、,b2,b3,b4,b5,b6,b7,b8,b9,b10,b11,b12,b13,b14,b15,b16; JTextField t; JLabel l1,l2; JPanel p1,p2; BorderLayout layout1; GridLayout layout2; public Jsq() setTitle(计算器); setBounds(100,100,230,230);,layout1=new BorderLayout(); setLayout(layout1); p1=new JPanel(); t=new JTextField(); t.setEditable(false);

8、 t.setColumns(18); p1.add(t); add(p1,North); p2=new JPanel(); layout2=new GridLayout(4,4); p2.setLayout(layout2); layout2.setHgap(10); layout2.setVgap(10);,b1=new JButton(1); b2=new JButton(2); b3=new JButton(3); b4=new JButton(+); b5=new JButton(4); b6=new JButton(5); b7=new JButton(6); b8=new JBut

9、ton(-); b9=new JButton(7); b10=new JButton(8); b11=new JButton(9); b12=new JButton(*); b13=new JButton(.); b14=new JButton(0); b15=new JButton(=); b16=new JButton(/);,p2.add(b1); p2.add(b2); p2.add(b3); p2.add(b4); p2.add(b5); p2.add(b6); p2.add(b7); p2.add(b8); p2.add(b9); p2.add(b10); p2.add(b11);

10、 p2.add(b12); p2.add(b13); p2.add(b14); p2.add(b15); p2.add(b16); add(p2,Center);,l1=new JLabel(); l1.setPreferredSize(new Dimension(10,0); add(l1,West); l2=new JLabel(); l2.setPreferredSize(new Dimension(10,0); add(l2,East); public static void main(String args) Jsq f=new Jsq(); f.setVisible(true);

11、,BorderLayout -边界布局管理器,Java中设置布局的类叫布局管理器。布局管理器负责管理组件在容器中的排列方式。 由BorderLayout类实现的布局管理器称为边界布局管理器，它的布局方式是将容器划分为5个部分，其布局格式如下图所示。,注意：当某个位置未加入组件时，其它位置的组件会把此位置占掉。 例如：容器的下方没有放任何组件：,如何设置窗体的布局为边界布局？,窗体JFrame的默认布局为BorderLayout 布局，故在此不需要设置。,如何将组件添加到容器中相应的位置？,add(Component comp, Object constraints) 该方法的第一个参数为欲添加

12、的组件对象，第二个参数为组件的显示位置，如下表所示。,例如，添加按钮对象b到窗体的顶部： add(b,BorderLayout.NORTH); 或者 add(b,”North”); setHgap(int hgap) 设置组件的水平间距,例如： l1.setHgap(10)；/设置组件之间的水平间隔为10像素 setVgap(int vgap) 设置组件的垂直间距，例如: l1.setVgap(10)；/设置组件之间的垂直间隔为10像素,GridLayout-网格布局管理器,由GridLayout类实现的布局管理器称为网格布局管理器，它的布局方式是将容器按照用户的设置平均划分成若干网，如下图所

13、示。,如何设置窗体的布局为网格布局？,首先创建GridLayout布局对象，代码如下： GridLayout l2=new GridLayout(4,4); /l2表示此网格布局为4行4列 接着设置面板p2的布局为4行4列的网格布局 p2.setLayout(l2); 设置网格布局中各组件之间的间距 setHgap(int hgap) 设置组件的水平间距,例如:l2. setHgap(10) setVgap(int vgap) 设置组件的垂直间距,例如:l2. setHgap(10),JPanel面板的应用,（1）一个界面中的所有组件只能采用一种布局方式，这样很难得到一个美观的界面； （2）有些布局方式只能管理有限个组件，例如JFrame窗体默认的BorderLayout布局管理器，最多只能管理5个组件。 针对上面这两个问题，通过使用JPanel面板就可以解决，首先将面板和组件添加到JFrame窗体中，然后再将子面板和组件添加