Ja1511第12章图形界面设计

1、第 12 章 图形界面设计1本章主要内容2图形用户界面工具包图形用户界面工具包SwingSwing组件分类组件分类Swing容器的内部结构容器的内部结构创建组件创建组件窗口的布局管理设计窗口的布局管理设计1212.1.1图图形用形用户户界面界面概概述述图形用户界面图形用户界面(Graphics User Interface，GUI） 用图形的方式，借助菜单。按钮等标准界面元用图形的方式，借助菜单。按钮等标准界面元素和鼠标操作，帮助用户方便地向计算机系统素和鼠标操作，帮助用户方便地向计算机系统发出指令、启动操作，并将系统运行的结果同发出指令、启动操作，并将系统运行的结果同样以图形方式显示给用户的

2、技术。样以图形方式显示给用户的技术。Java的的GUI程序设计是程序设计是Java程序设计的基础。程序设计的基础。34图形界面编程的三个要素：图形界面编程的三个要素：q 图形界面对象及其框架（图形界面对象之间的包含关系）q 图形界面对象的布局（图形界面对象之间的位置关系）q 图形界面对象上的事件响应（图形界面对象上的动作）5面向对象的图形用户界面面向对象的图形用户界面：基于“面向对象面向对象”的思想互相交换信息，即尽可能在屏幕上用形象的图标和窗口等来代表有用的资源和可启用的对象。图形界面对象：图形界面对象：代表特定的软件、命令、过程、资源、提示信息等q 图标（Icon）q 窗口（Window）

3、q 菜单（Menu）/菜单项（Menu Item）q 按钮（Button）、文本框（Label）、列表框（List）q Java提供的两个处理图形用户界面的类库提供的两个处理图形用户界面的类库 java. awt包包 和和 javax. swing包包 5抽象窗口抽象窗口工具集工具集awt的扩展，根据的扩展，根据给定环境调整外观给定环境调整外观和感觉。和感觉。6Swing与AWT之间的关系Swing诞生之前，Java中用来进行图形用户界面开发的工具包为AWT。AWT是“Abstract Window Toolkit”的缩写，又称为“抽象窗体工具包”。AWT是随早期Java一起发布的GUI工具包

4、，是所有Java版本中都包含的基本GUI工具包，其中不仅提供了基本的控件，并且还提供了丰富的事件处理接口。Swing是继AWT之后Sun推出的又一款GUI工具包。Swing建立在AWT 1.1基础上的，也就是说，AWT是Swing大厦的基石。7关于Swing与AWT控件的混用由于AWT中提供的控件，均依赖本地系统实现，而Swing控件属于轻量级控件，是由纯Java编写的，使用基本图形元素直接在屏幕上绘制，因此在搭建界面时，如果将二者同时使用，就有可能会出现遮挡的现象。8AWT(Abstract Window Toolkit)组件组件 java.awt及相关包中包含了一个完整的类集类集以支持GU

5、I程序的设计，其中的类及相互关系可以用下图来描述（重量级构件）：事件类字体类GraphicsComponent颜色类布局管理类java.lang.ObjectCheckboxContainerButtonWindowPanelAppletDialogFrameList图象类菜单类9 AWT使用Container类来定义最基本的组件容器，它有两个常用的子类：Window类和Panel类。Window类还有两个子类： 定义对话框，用Dialog子类。Java还提了一个Dialog的子类FileDialog，用它生成文件对话框。 定义一般意义的窗口，用Frame类。 Frame可以用其构造方法Fam

6、e(String)来生成，其标题由String参数指定。一个Frame刚被创建后，其初始大小为（0，0），而且是不可见的，所以为了使Frame显示出来，必须在程序中显式地设置一下它的大小。AWT组件组件10 Panel可以使程序员更方便地组织自己的组件，得到赏心悦目的布局。 Panel可以使用构造方法Panel()生成，当一个Panel对象被创建后，必须放在必须放在Window和和Frame中才能可见中才能可见。使用add()方法就可以将Panel添加到其他容器中。 Applet是Panel的子类，因此在小应用程序里可以直接加入构件，而一般的应用程序必须先定义构件容器。小应用程序在浏览器中所显

7、示的区域就是Panel，所占的尺寸就是缺省的Panel尺寸（浏览器本身也可以看作是一个容器）。AWT组件组件11 图形用户界面程序的主体框架是Window类及其子类（Frame、Dialog、FileDialog），一个Window类及其子类的实例，是不能包含其他Window类及其子类的实例，但它可以弹出其他的Window类及其子类的实例（弹出新窗口）。 Panel是一个不可见的组件容器，它可以容纳不同的组件，包括Panel本身（即可以嵌套包含）。但最顶层的Panel必须放在一个窗口容器中，包含在其中的所有可见组件才能显示出来。Panel的主要作用就是为了更好地的主要作用就是为了更好地进行图形

8、界面对象的布局进行图形界面对象的布局。AWT组件组件12列表列表按钮按钮弹出菜单弹出菜单Container另一个另一个 PanelPanelContainerComponent窗口及其子类窗口及其子类按钮按钮菜单菜单Container弹出弹出13图形界面设计的步骤图形界面设计的步骤 创建组件创建组件(Component)(Component)：创建组成界面的各种元：创建组成界面的各种元素，如按钮、文本框等。素，如按钮、文本框等。 指定布局指定布局(Layout)(Layout)：根据具体需要排列界面上各：根据具体需要排列界面上各元素的位置关系。元素的位置关系。 响应事件响应事件(Event)(

9、Event)：定义图形用户界面的事件和：定义图形用户界面的事件和各界面元素对不同事件的响应，从而实现图形用各界面元素对不同事件的响应，从而实现图形用户界面与用户的交互功能。户界面与用户的交互功能。14import java.awt.*;import java.awt.event.*;public class MyFrame extends Frame public MyFrame(String str) super(str); addWindowListener( new WindowAdapter() public void windowClosing(WindowEvent e) Syst

10、em.exit(0); ); public void showDialog() FileDialog fd = new FileDialog(this, FileDialog); fd.setVisible(true); public static void main(String args) MyFrame fr = new MyFrame(Frame and FileDialog Test); fr.setSize(500,500); fr.setBackground(Color.blue); fr.setVisible(true); fr.showDialog(); MyFrame.ja

11、va弹出新窗口弹出新窗口15public class MyPanelInFrame extends Framepublic class MyPanelInFrame extends Frame public MyPanelInFrame(String str) public MyPanelInFrame(String str) super(str); super(str); addWindowListener( new WindowAdapter() addWindowListener( new WindowAdapter() public void windowClosing(WindowE

12、vent e) public void windowClosing(WindowEvent e) System.exit(0); System.exit(0); ); ); public static void main(String args) public static void main(String args) MyPanelInFrame fr = new MyPanelInFrame(Panel in Frame); MyPanelInFrame fr = new MyPanelInFrame(Panel in Frame); Panel pan = new Panel(); Pa

13、nel pan = new Panel(); fr.setSize(500,500); fr.setSize(500,500); fr.setBackground(Color.green); fr.setBackground(Color.green); fr.setLayout(null); fr.setLayout(null); pan.setSize(200,200); pan.setSize(200,200); pan.setBackground(Color.yellow); pan.setBackground(Color.yellow); pan.setLocation(100,100

14、); pan.setLocation(100,100); Button b1 = new Button(Help); Button b1 = new Button(Help); Button b2 = new Button(Test); Button b2 = new Button(Test); pan.add(b1); pan.add(b1); pan.add(b2); pan.add(b2); fr.add(pan); fr.setVisible(true); MyPanelInFrame.java窗口中包含窗口中包含Panel1212.2.2图图形用形用户户界面工具包界面工具包Swing

15、Swing16组件组件：构成图形用户界面的各种元素。：构成图形用户界面的各种元素。构建图形用户界面的类可以分成三组：容器类构建图形用户界面的类可以分成三组：容器类(container class)(container class)、辅助类、辅助类(helper class)(helper class)和组件和组件类类(component class)(component class)。容器类容器类 容器又分为两种：顶层容器和非顶层容器。顶层容器又分为两种：顶层容器和非顶层容器。顶层容器是可以独立的窗口，容器是可以独立的窗口，SwingSwing的顶层容器有的顶层容器有JFrameJFrame、

16、JAppletJApplet和和JDialogJDialog等；非顶层容器，不等；非顶层容器，不是独立的窗口，它们必须位于窗口之内，非顶层是独立的窗口，它们必须位于窗口之内，非顶层容器包括容器包括JPanelJPanel及及JScrollPanelJScrollPanel等。等。17辅助类辅助类辅助类是用来描述组件属性的，辅助类通常包含在辅助类是用来描述组件属性的，辅助类通常包含在java.awtjava.awt包中包中。组件类组件类所有所有Swing GUISwing GUI组件类（除组件类（除JFrameJFrame、JAppletJApplet和和JDialogJDialog）都是）都是

17、JComponentJComponent类的子类，例如，类的子类，例如，JButtonJButton、JTextFieldJTextField、JTextAreaJTextArea、JComboBoxJComboBox、JListJList、JRadioButtonJRadioButton和和JMenuJMenu等。等。18njavax.swing包中包含了存java的完整的类集以支持GUI程序的设计（轻量级构件）njava.lang.Objectnjava.awt.Componentnjava.awt.Containernjavax.swing.JComponentn.1212.2.1 .2

18、.1 SwingSwing组件组件nJLabel显示一行文字，可带图标nJTextField 用户让用户输入一行文字的构件nJButton用于点击执行命令nJCheckBox标记状态nJRadioButton 标记多状态nJCombox下拉列表框供选取nJList一组列表项供选择19 Java中所有的中所有的Swing控件都继承自控件都继承自javax.swing.Jcomponent 类，类，而而JComponent类则继承自类则继承自java.awt.Container类，因此所有的类，因此所有的Swing控件都具有控件都具有 AWTAWT容器容器 的功能。的功能。列表列表按钮按钮菜单菜单

19、JContainer另一个窗口另一个窗口窗口，对话框窗口，对话框JContainerJComponentSwingSwing容器的层次关系容器的层次关系一般的一般的SwingSwing窗口，实际上包含几个窗口，实际上包含几个“层次层次”。框架类框架类JFrameJFrame它是它是JavaJava应用程序的顶层容器。应用程序的顶层容器。面板类面板类JpanelJpanel面板是一种没有标题栏、没有边框的中间层容器，面板是一种没有标题栏、没有边框的中间层容器，面板不是顶层容器，必须放到其他容器内，也面板不是顶层容器，必须放到其他容器内，也可以放入另一个面板内。可以放入另一个面板内。20例例12.

20、1例例12.2211212.2.2 .2.2 颜颜色色类类、字体、字体类与图标类类与图标类颜色类颜色类ColorColor 属于属于java.awtjava.awt 每种颜色均看作是由红每种颜色均看作是由红(R)(R)、绿、绿(G)(G)、蓝、蓝(B)(B)三色组成。三色组成。 构造方法：构造方法： Color (int r, int g, int b)Color (int r, int g, int b) 颜色变量颜色变量字体类字体类FontFont 用来规范组件所用的字体样式、大小与字形等。用来规范组件所用的字体样式、大小与字形等。 构造方法：构造方法： Font (String font

21、_name, int style, int size) Font (String font_name, int style, int size)字体名称字体名称字形样式：字形样式：PLAIN、BOLD、ITALIC字号大小字号大小22图像图标类图像图标类ImageIconImageIconJavaJava语言使用语言使用javax.swing.ImageIconjavax.swing.ImageIcon类表类表示图标。示图标。ImageIconImageIcon类的常用构造方法类的常用构造方法( (表表12.12)12.12)，ImageIconImageIcon类的常用方法类的常用方法( (

22、表表12.13) 12.13) 。231212.3 .3 创创建建组组件件1 12.3.1 2.3.1 创建标签创建标签1 12.3.2 2.3.2 创建命令按钮创建命令按钮1 12.3.3 2.3.3 创建文本编辑组件创建文本编辑组件1 12.3.4 2.3.4 创建复选框组件创建复选框组件241212.3.1 .3.1 标签标签JLabelJLabelJLabel JLabel （javax.swingjavax.swing） 标签用来在窗口中显示文字的控件标签用来在窗口中显示文字的控件 构造方法及常用方法构造方法及常用方法表表12.1412.14、12.1512.15 例例12.312.

23、3、12.412.425JButton JButton （ javax.swing javax.swing ） 用户用鼠标单击它来控制程序运行的流程。用户用鼠标单击它来控制程序运行的流程。 JButtonJButton创建后通过容器的创建后通过容器的add()add()将其放入容器。将其放入容器。 构造方法及常用方法构造方法及常用方法( (表表12.1612.16、12.17)12.17)1212.3.2 .3.2 命令按命令按钮钮、复选复选框和框和单选单选按按钮钮26import javax.swing.*; public class App12_5 extends JFrame publi

24、c static void main(String args) App12_5 jfrm=new App12_5(); jfrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ImageIcon ic=new ImageIcon(中国灯笼.jpg); JButton btn=new JButton(灯笼,ic); jfrm.setLayout(null); jfrm.setSize(200,180); jfrm.setTitle(按钮类窗口); btn.setBounds(50,45,100,40); btn.setToolTipText(我是

25、按钮); jfrm.add(btn); jfrm.setVisible(true); 例例12.512.527JCheckBoxJCheckBox和和JRadioButtonJRadioButton（ javax.swingjavax.swing ） JCheckBoxJCheckBox可以单独使用，而单选按钮必须可以单独使用，而单选按钮必须配合配合javax.swingjavax.swing包中的包中的ButtonGroupButtonGroup类将其类将其组成单选按钮组来使用组成单选按钮组来使用 构造方法及常用方法见构造方法及常用方法见( (表表12.18)12.18) 例例12.612.

26、6复选复选框和框和单选单选按按钮钮281212.3.3 .3.3 文本文本编辑组编辑组件件与滚动与滚动窗格窗格文本文本行行组件组件JTextFieldJTextField主要用于主要用于接收用户键盘接收用户键盘输入的文本输入的文本密码文本行组件密码文本行组件JPasswordFieldJPasswordField主要用于输入主要用于输入密码密码文本区组件文本区组件JTextArea JTextArea 通常与通常与滚动窗格滚动窗格组件组件JScrollPaneJScrollPane一起使用一起使用 组件类的构造方法及常用方法组件类的构造方法及常用方法( (表表12.2012.24)12.201

27、2.24) 例例12.712.729import javax.swing.*; public class App12_7 extends JFrame JTextField jtf=new JTextField(该文本框不可编辑,30); static JPasswordField jpf=new JPasswordField (太空人3号,30); public App12_7(String str) super(str); jtf.setBounds(20,40,140,20); jtf.setEditable(false); add(jtf); public static void ma

28、in(String args) 例例12.7 - 112.7 - 130 public static void main(String args) App12_7 frm=new App12_7(文本编辑功能窗口文本编辑功能窗口); JTextArea jta=new JTextArea (您好您好,10,30); JScrollPane jsp=new JScrollPane(jta); frm.setLocation(200,150); frm.setSize(240,220); frm.setLayout(null); jsp.setBounds(20,70,160,100); jpf.

29、setBounds(20,10,140,20); frm.add(jpf); frm.add(jsp); char password=jpf.getPassword(); String str=new String(password); System.out.println(今天口令是：今天口令是：+ password + 转换成文本后是转换成文本后是：+str); frm.setVisible(true); frm.setResizable(false); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 例例12.7-212.7-231

30、1212.3.4 .3.4 选项选项窗格窗格组组件件选项窗格选项窗格JTabbedPaneJTabbedPaneJTabbedPaneJTabbedPane组件中允许包含多个选组件中允许包含多个选项卡项卡, ,每个选项卡包含若干每个选项卡包含若干组件组件。JTabbedPaneJTabbedPane类的构造方法及常用方类的构造方法及常用方法法（表（表12.2512.25、12.2612.26） 例例12.812.8321212.4 .4 布局管理器布局管理器布局管理即页面管理。页面管理（布局管理即页面管理。页面管理（layoutlayout）：）：指窗指窗口上的组件遵循一定的规则来排列，并会随

31、着窗口口上的组件遵循一定的规则来排列，并会随着窗口大小的变化来改变组件大小与位置的一种布局方式。大小的变化来改变组件大小与位置的一种布局方式。自动布局：当为一个容器指定一个布局管理器后，自动布局：当为一个容器指定一个布局管理器后，将一个组件加入该容器中时，布局管理器就能自动将一个组件加入该容器中时，布局管理器就能自动设置该组件的大小和位置。设置该组件的大小和位置。java.awtjava.awt包中共定义了五种布局管理器，每个布局包中共定义了五种布局管理器，每个布局管理器对应一种布局策略，分别是：流式布局管理管理器对应一种布局策略，分别是：流式布局管理器器FlowLayoutFlowLayou

32、t、边界式布局管理器、边界式布局管理器BorderLayoutBorderLayout、卡片式布局管理器卡片式布局管理器CardLayoutCardLayout、网格式布局管理器、网格式布局管理器GridLayoutGridLayout和网袋布局管理器和网袋布局管理器GridBagLayoutGridBagLayout。331212.4.1 .4.1 流式布局管理器流式布局管理器FlowLayoutFlowLayout布局策略布局策略 组件按照加入容器的先后顺序从左向右排列；组件按照加入容器的先后顺序从左向右排列； 一行排满后就自动地转到下一行继续从左向右一行排满后就自动地转到下一行继续从左向

33、右排列；排列； 每一行中的组件都居中排列。每一行中的组件都居中排列。FlowLayoutFlowLayout布局管理器是布局管理器是PanelPanel、AppletApplet和和JPanelJPanel默认的布局管理方式。默认的布局管理方式。布局管理器的容器中的组件大小不随容器大布局管理器的容器中的组件大小不随容器大小的变化而改变小的变化而改变. .FlowLayoutFlowLayout构造方法及常用方法构造方法及常用方法表表12.2712.2712.2912.293434例例12.912.9import java.awt.*; import javax.swing.*;public c

34、lass App12_9 extends JFrame static JFrame frm=new JFrame(流式布局设置管理器FlowLayout); public static void main(String args) FlowLayout flow=new FlowLayout (FlowLayout.CENTER,5,10); JButton but=new JButton(按钮); JLabel lab=new JLabel(我是一个标签); frm.setLayout(flow); frm.setSize(260,150); frm.add(but); frm.add(la

35、b); frm.add(new JTextField(流式布局策略FlowLayout,18); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frm.setVisible(true); 351212.4.2 .4.2 边边界式布局管理器界式布局管理器BorderLayoutBorderLayout将显示区域按地理方位分为东将显示区域按地理方位分为东(East)(East)、西、西(West)(West)、 南南(South)(South)、北、北(North)(North)、中、中(Center)(Center)五个区域五个区域。将组

36、件加入容器中，若没有指定区域，则默认为将组件加入容器中，若没有指定区域，则默认为 中间；若将组件加入到已被占用的位置，将会中间；若将组件加入到已被占用的位置，将会取代原先的组件。取代原先的组件。利用利用add()add()添加组件时必须指出组件的摆放位置。添加组件时必须指出组件的摆放位置。构造方法及常用方法构造方法及常用方法表表12.3012.3012.3212.3236import java.awt.*; import javax.swing.*;public class App12_10 extends JFrame static JFrame frm=new JFrame(边界式布局管理

37、器BorderLayout); public static void main(String args) BorderLayout border=new BorderLayout (5,10); frm.setLayout(border); frm.setSize(330,200); frm.add(new JButton(上北), BorderLayout.NORTH); frm.add(new JButton(下南), BorderLayout.SOUTH); frm.add(new JButton(左西), BorderLayout.WEST); frm.add(new JButton(

38、右东), BorderLayout.EAST); frm.add(new JButton(中央), BorderLayout.CENTER); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frm.setVisible(true); 例例12.1012.10371212.4.3 .4.3 网网格式布局管理器格式布局管理器GridLayoutGridLayout提供的页面布局规则是将容器的空间划分成若干行与列的网格提供的页面布局规则是将容器的空间划分成若干行与列的网格形式，在容器上添加组件时，它们会按从左到右、从上到下的形式，在容器上添加

39、组件时，它们会按从左到右、从上到下的顺序在网格中顺序在网格中均匀均匀排列。排列。网格的行数和列数可以在创建网格的行数和列数可以在创建GridLayoutGridLayout对象的构造方法里指对象的构造方法里指定。若控件数正好是行定。若控件数正好是行列，则按行、列数放置；若控件数超列，则按行、列数放置；若控件数超过了行过了行列，则先满足行。列，则先满足行。利用利用GridLayoutGridLayout布局策略时，容器中各组件的宽度相同，所有布局策略时，容器中各组件的宽度相同，所有组件的高度也相同，当容器尺寸发生变化时，各组件的相对位组件的高度也相同，当容器尺寸发生变化时，各组件的相对位置不变。置不变。构造方法及常用方法构造方法及常用方法表表12.3312.33、12.3412.34例例12.1112.11通过行列、间距来通过行列、间距来用网格分割，把组用网格分割，把组件放入网格中，先件放入网