第13章图形界面设计(第5版)

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

2、结果同样以图指令、启动操作，并将系统运行的结果同样以图形方式显示给用户的技术。形方式显示给用户的技术。nJava的的GUI程序设计是程序设计是Java程序设计的基础。程序设计的基础。nJava提供的两个处理图形用户界面的类库提供的两个处理图形用户界面的类库 Java. awt包包 和和 javax. swing包包 抽象窗口抽象窗口工具集工具集awt的扩展，根据的扩展，根据给定环境调整外观给定环境调整外观和感觉。和感觉。Company Logo1313.2.2图图形用形用户户界面工具包界面工具包SwingSwingnJavaJava图形用户界面的基本元素包括：用户界面组图形用户界面的基本元素包

3、括：用户界面组件（组件类）、事件处理模块（事件类）、图形件（组件类）、事件处理模块（事件类）、图形和图像工具（图形类、图像类）、布局管理器（和图像工具（图形类、图像类）、布局管理器（布局类）等。布局类）等。njavajava组件类的继承关系见教材图组件类的继承关系见教材图Company Logo1313.2.1 .2.1 Swing组件分类组件分类n组件：构成图形用户界面的各种元素。组件：构成图形用户界面的各种元素。n构建图形用户界面的类可以分成三组：容器类构建图形用户界面的类可以分成三组：容器类(container class)(container class)、辅助类、辅助类(helper

4、 class)(helper class)和组和组件类件类(component class)(component class)。SwingSwing轻型组件的分类轻型组件的分类见教材表见教材表13.113.1n容器类容器类 容器又分为两种：顶层容器和非顶层容器。顶容器又分为两种：顶层容器和非顶层容器。顶层容器是可以独立的窗口，层容器是可以独立的窗口，SwingSwing的顶层容器有的顶层容器有JFrameJFrame、JAppletJApplet和和JDialogJDialog等；非顶层容器，等；非顶层容器，不是独立的窗口，它们必须位于窗口之内，非不是独立的窗口，它们必须位于窗口之内，非顶层容

5、器包括顶层容器包括JPanelJPanel及及JScrollPanelJScrollPanel等。等。Company Logo1313.2.1 .2.1 Swing组件分类组件分类n辅助类辅助类辅助类是用来描述组件属性的，辅助类通常包含辅助类是用来描述组件属性的，辅助类通常包含在在java.awtjava.awt包中包中。n组件类组件类所有所有Swing GUISwing GUI组件类（除组件类（除JFrameJFrame、JAppletJApplet和和JDialogJDialog）都是）都是JComponentJComponent类的子类，例如，类的子类，例如，JButtonJButton

6、、JTextFieldJTextField、JTextAreaJTextArea、JComboBoxJComboBox、JListJList、JRadioButtonJRadioButton和和JMenuJMenu等。等。Company Logo1313.2.1 .2.1 Swing组件分类组件分类nSwingSwing容器的层次关系容器的层次关系一般的一般的SwingSwing窗口，实际上包含几个窗口，实际上包含几个“层次层次”，各，各个层的关系如图个层的关系如图13.213.2所示。所示。n框架类框架类JFrameJFrame它是它是JavaJava应用程序的顶层容器。应用程序的顶层容器。

7、n面板类面板类JpanelJpanel面板是一种没有标题栏、没有边框的中间层容器，面板是一种没有标题栏、没有边框的中间层容器，面板不是顶层容器，必须放到其他容器内，也可面板不是顶层容器，必须放到其他容器内，也可以放入另一个面板内。以放入另一个面板内。7见教材例见教材例13.1见教材例见教材例Company Logo1313.2.1 .2.1 Swing组件分类组件分类n非容器类非容器类 又称控制组件（控件），它里面不能包含其他又称控制组件（控件），它里面不能包含其他组件。组件。 作用：完成与用户的交互，包括接收用户的命作用：完成与用户的交互，包括接收用户的命令、接收用户输入的文本或用户的选择、

8、向用令、接收用户输入的文本或用户的选择、向用户显示文本或图形。户显示文本或图形。 常用控件：命令类、选择类、常用控件：命令类、选择类、文字处理类文字处理类等式等式Company Logo1313.2.1 .2.1 Swing组件分类组件分类n图形界面设计的步骤图形界面设计的步骤 创建组件创建组件(Component)(Component)：创建组成界面的各种元：创建组成界面的各种元素，如按钮、文本框等。素，如按钮、文本框等。 指定布局指定布局(Layout)(Layout)：根据具体需要排列界面上：根据具体需要排列界面上各元素的位置关系。各元素的位置关系。 响应事件响应事件(Event)(Ev

9、ent)：定义图形用户界面的事件和：定义图形用户界面的事件和各界面元素对不同事件的响应，从而实现图形各界面元素对不同事件的响应，从而实现图形用户界面与用户的交互功能。用户界面与用户的交互功能。Company Logo1313.2.2 .2.2 颜颜色色类类、字体、字体类与图标类类与图标类n颜色类颜色类ColorColor 属于属于java.awtjava.awt 每种颜色均看作是由红每种颜色均看作是由红(R)(R)、绿、绿(G)(G)、蓝、蓝(B)(B)三色组成。三色组成。 构造方法：构造方法： Color (int r, int g, int b)Color (int r, int g, i

10、nt b) 颜色变量见教材表颜色变量见教材表13.1013.10n字体类字体类FontFont 用来规范组件所用的字体样式、大小与字形等。用来规范组件所用的字体样式、大小与字形等。 构造方法：构造方法： Font (String font_name, int style, int size) Font (String font_name, int style, int size)字体名称字体名称字形样式：字形样式：PLAIN、BOLD、ITALIC字号大小字号大小10Company LCompany Logo1313.2.2 .2.2 颜颜色色类类、字体、字体类与图标类类与图标类n图像图标类图

11、像图标类ImageIconImageIconJavaJava语言使用语言使用javax.swing.ImageIconjavax.swing.ImageIcon类表示图类表示图标。表标。表12.1212.12给出了给出了ImageIconImageIcon类的常用构造方法，类的常用构造方法，表表12.1312.13给出了给出了ImageIconImageIcon类的常用方法。类的常用方法。11Company LCompany Logo1313.3 .3 创创建建组组件件n1 13.3.1 3.3.1 创建标签创建标签n1 13.3.2 3.3.2 创建命令按钮创建命令按钮n1 13.3.3 3

12、.3.3 创建文本编辑组件创建文本编辑组件n1 13.3.4 3.3.4 创建复选框组件创建复选框组件12Company LCompany Logo1313.3.1 .3.1 标签标签JLabelJLabelnJLabel JLabel （javax.swingjavax.swing） 标签用来在窗口中显示文字的控件标签用来在窗口中显示文字的控件 构造方法及常用方法见教材表构造方法及常用方法见教材表13.1413.14、13.1513.15 见教材例见教材例13.313.3、13Company LCompany LogonJButton JButton （ javax.swing javax.

13、swing ） 用户用鼠标单击它来控制程序运行的流程。用户用鼠标单击它来控制程序运行的流程。 JButtonJButton创建后通过容器的创建后通过容器的add()add()将其放入容器将其放入容器。 构造方法及常用方法见教材表构造方法及常用方法见教材表13.1613.16、13.1713.17 见教材例见教材例13.513.5、14Company Logo1313.3.2.3.2命令按命令按钮钮、复选复选框和框和单选单选按按钮钮Company LogonJCheckBoxJCheckBox和和JRadioButton JRadioButton （ javax.swing javax.swin

14、g ） JCheckBoxJCheckBox可以单独使用，而单选按钮必须配合可以单独使用，而单选按钮必须配合javax.swingjavax.swing包中的包中的ButtonGroupButtonGroup类将其组成单类将其组成单选按钮组来使用选按钮组来使用 构造方法及常用方法见教材表构造方法及常用方法见教材表13.1813.18 见教材例见教材例15Company Logo1313.3.2.3.2命令按命令按钮钮、复选复选框和框和单选单选按按钮钮Company Logo1313.3.3 .3.3 文本文本编辑组编辑组件件与滚动与滚动窗格窗格n文本文本行行组件组件JTextFieldJTex

15、tField主要用于主要用于接收用户键盘输接收用户键盘输入的文本入的文本n密码文本行组件密码文本行组件JPasswordFieldJPasswordField主要用于输入密主要用于输入密码码n文本区组件文本区组件JTextArea JTextArea 通常与通常与滚动窗格滚动窗格组件组件JScrollPaneJScrollPane一起使用一起使用 这几种组件类的构造方法及常用方法见教材中这几种组件类的构造方法及常用方法见教材中表表13.2013.2413.2013.24 应用见教材例应用见教材例16Company LCompany Logo1313.3.4 .3.4 选项选项窗格窗格组组件件n

16、选项窗格选项窗格JTabbedPaneJTabbedPanenJTabbedPaneJTabbedPane组件中允许包含多个选项卡。组件中允许包含多个选项卡。n用户选取项目的一种组件，用户利用该组件来表用户选取项目的一种组件，用户利用该组件来表JTabbedPaneJTabbedPane类的构造方法及常用方法见教材中表类的构造方法及常用方法见教材中表13.2513.25、13.2613.26 应用见教材例应用见教材例17Company LCompany Logo1313.4 .4 布局管理器布局管理器n布局管理即页面管理。页面管理（布局管理即页面管理。页面管理（layoutlayout）：）：

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

18、式布局管理器FlowLayoutFlowLayout、边界式布局管理器、边界式布局管理器BorderLayoutBorderLayout、卡片、卡片式布局管理器式布局管理器CardLayoutCardLayout、网格式布局管理器、网格式布局管理器GridLayoutGridLayout和网袋布局管理器和网袋布局管理器GridBagLayoutGridBagLayout。18Company LCompany Logo1313.4.1 .4.1 流式布局管理器流式布局管理器FlowLayoutFlowLayoutn布局策略布局策略 组件按照加入容器的先后顺序从左向右排列；组件按照加入容器的先后顺

19、序从左向右排列； 一行排满后就自动地转到下一行继续从左向右排列；一行排满后就自动地转到下一行继续从左向右排列； 每一行中的组件都居中排列。每一行中的组件都居中排列。nFlowLayoutFlowLayout布局管理器是布局管理器是PanelPanel、AppletApplet和和JPanelJPanel默认的布局管理方式。默认的布局管理方式。n布局管理器的容器中的组件大小不随容器大小的布局管理器的容器中的组件大小不随容器大小的变化而改变变化而改变. .n构造方法及常用方法见教材表构造方法及常用方法见教材表13.2713.2713.2913.29n见教材例见教材例19Company LCompa

20、ny Logo1313.4.2 .4.2 边边界式布局管理器界式布局管理器BorderLayoutBorderLayoutn将显示区域按地理方位分为东将显示区域按地理方位分为东(East)(East)、西、西(West)(West)、 南南(South)(South)、北、北(North)(North)、中、中(Center)(Center)五个区域五个区域。n将组件加入容器中，若没有指定区域，则默认为将组件加入容器中，若没有指定区域，则默认为 中间；若将组件加入到已被占用的位置，将会取中间；若将组件加入到已被占用的位置，将会取 代原先的组件。代原先的组件。n利用利用add()add()添加组

21、件时必须指出组件的摆放位置。添加组件时必须指出组件的摆放位置。n构造方法及常用方法见教材表构造方法及常用方法见教材表13.3013.3013.3213.32n见教材例见教材例20Company LCompany Logo1313.4.3 .4.3 网网格式布局管理器格式布局管理器GridLayoutGridLayoutn提供的页面布局规则是将容器的空间划分成若干行与列提供的页面布局规则是将容器的空间划分成若干行与列的网格形式，在容器上添加组件时，它们会按从左到右的网格形式，在容器上添加组件时，它们会按从左到右、从上到下的顺序在网格中、从上到下的顺序在网格中均匀均匀排列。排列。n网格的行数和列数

22、可以在创建网格的行数和列数可以在创建GridLayoutGridLayout对象的构造方对象的构造方法里指定。若控件数正好是行法里指定。若控件数正好是行列，则按行、列数放置列，则按行、列数放置；若控件数超过了行；若控件数超过了行列，则先满足行。列，则先满足行。n利用利用GridLayoutGridLayout布局策略时，容器中各组件的宽度相同布局策略时，容器中各组件的宽度相同，所有组件的高度也相同，当容器尺寸发生变化时，各，所有组件的高度也相同，当容器尺寸发生变化时，各组件的相对位置不变。组件的相对位置不变。n构造方法及常用方法见教材表构造方法及常用方法见教材表13.3313.33、13.34

23、13.34n见教材例见教材例21Company Logo通过行列、间距来通过行列、间距来用网格分割，把组用网格分割，把组件放入网格中，先件放入网格中，先行后列摆放组件行后列摆放组件Company Logo1313.4.4 .4.4 卡片式布局管理器卡片式布局管理器CardLayoutCardLayoutn页面布局方式是把页面布局方式是把“窗口容器窗口容器”中的所有组件如中的所有组件如同堆叠起来的一付同堆叠起来的一付“扑克牌扑克牌”，每次只能显示最，每次只能显示最上面的一张一样，这个被显示的组件将占据所有上面的一张一样，这个被显示的组件将占据所有的容器空间。的容器空间。n使用使用add()add()往窗口容器中加入组件时应为每个组往窗口容器中加入组件时应为每个组件赋予一个名字。依据这个名字利用件赋予一个名字。依据这个名字利用CardLayoutCardLayout类所提供的方法来控制其他组件是否显示。类所提供的方法来控制其他组件是否显示。n该布局方式每次仅有一个组件是可见的。该布局方式每次仅有一个组件是可见的。n构造方法及常用方法见教材表构造方法及常用方法见教材表13.3513.35、13.3613.36n见教材例见教