1、第 8 章 图形用户界面文库帮手网 免费帮下载 百度文库积分 资料本文由心迹流影贡献ppt 文档可能在 WAP 端浏览体验不佳。建议您优先选择 TXT,或下载源文件到本机查看。Java 程序设计 Java 程序设计第八章 图形用户界面叶保留 南京大学计算机科学与技术系主要内容图形用户界面概述 绘图、 绘图、图形和动画 Java 的事件处理 Java 的事件处理 GUI 标准组件 GUI 标准组件 布局管理器 容器 菜单 对话框2概述Java 设计了专门类库来生成各种标准图形界面元素 Java 设计了专门类库来生成各种标准图形界面元素 和处理图形界面的各种事件图 形 用 户 界 面 概 述
2、生成图形用户界面的类库是java.awt 包 生成图形用户界面的类库是 java.awt 包 AWT 是 AWT是 Abstract Window Toolkit(抽象窗口工具集)的缩写 Toolkit(抽象窗口工具集) AWT 类库中的各种操作被定义成在一个并不存在的 AWT 类库中的各种操作被定义成在一个并不存在的“抽 类库中的各种操作被定义成在一个并不存在的“ 象窗口” 象窗口”中进行 抽象窗口使设计的界面独立于具体的界面实现 抽象窗口使设计的界面独立于具体的界面实现 开发人员用 AWT 开发出的图形用户界面可以适用于所有 开发人员用 AWT 开发出的图形用户界面可以适用于所有 的平台系
3、统 实际上 AWT 的功能还不是很完全 Java 程序的图形用户 的功能还不是很完全, 实际上 AWT 的功能还不是很完全,Java 程序的图形用户 界面在不同的平台上(例如,在不同的浏览器中) 界面在不同的平台上(例如,在不同的浏览器中)可能会出 现不同的运行效果 如窗口大小、 如窗口大小、字体效果将发生变化等3图形用户界面的构成图形用户界面是一组图形界面成分 界面元素的有 图形用户界面是一组图形界面成分和界面元素的有 图形界面成分和 机组合图 形 用 户 界 面 概 述 成分和元素之间不但外观上有着包含、相邻、 成分和元素之间不但外观上有着包含、相邻、相交等物 理关系,内在的也有包含、 理
4、关系,内在的也有包含、调用等逻辑关系 它们互相作用、传递消息, 它们互相作用、传递消息,共同组成一个能响应特定事 件、具有一定功能的图形界面系统设计和实现图形用户界面的工作主要有两个创建组成界面的各成分和元素,指定属性和位置关系, 创建组成界面的各成分和元素,指定属性和位置关系,b 根据具体需要排列, 并根据具体需要排列,构成完整的图形用户界面外观 定义图形用户界面的事件和各界面元素对不同事件的响 应,从而实现图形用户界面与用户的交互功能。 从而实现图形用户界面与用户的交互功能。Java 中构成图形用户界面的各种元素和成分可粗略 Java 中构成图形用户界面的各种元素和成分可粗略 地被分为三类
5、:容器、控制组件和 地被分为三类:容器、控制组件和用户自定义成分4容器容器是用来组织其他界面成分和元素的单元 一般说来一个应用程序的图形用户界面首先对应于 一个复杂的容器 容器, 一个复杂的容器,如一个窗口 容器内部将包含许多界面成分和元素这些界面元素本身也可能又是一个容器, 这些界面元素本身也可能又是一个容器,这个容器再进 一步包含它的界面成分和元素 依此类推就构成一个复杂的图形界面系统图 形 用 户 界 面 概 述容器的引入有利于分解图形用户界面的复杂性当界面的功能较多时, 当界面的功能较多时,使用层层相套的容器是非常有必 要的5控制组件与容器不同,控制组件是图形用户界面的最小单位 与容器
6、不同,控制组件是图形用户界面的最小单位 之一,它里面不再包含其他的成分 之一, 控制组件的作用是完成与用户的一次交互包括接收用户的一个命令(如菜单命令) 包括接收用户的一个命令(如菜单命令) 接收用户的一个文本或选择输入 向用户显示一段文本或一个图形等图 形 用 户 界 面 概 述从某种程度上来说,控制组件是图形用户界面标准 从某种程度上来说, 化的结果, 化的结果,目前常用的控制组件有选择类的单选按钮、复选按钮、 选择类的单选按钮、复选按钮、下拉列表 文字处理类的文本框、 文字处理类的文本框、文本区域 命令类的按钮、 命令类的按钮、菜单等 其中文本框、按钮和标签是前面使用过的 GUI 组件
7、其中文本框、按钮和标签是前面使用过的GUI 组件6控制组件使用控制组件, 使用控制组件,通常需要如下的步骤图 形 用 户 界 面 概 述 创建某控制组件类的对象,指定其大小等属性 创建某控制组件类的对象, 使用某种布局策略, 使用某种布局策略,将该控制组件对象加入到某个容器 中的某指定位置处 将该组件对象注册给它所能产生的事件对应的事件监听 者 重载事件处理方法, 重载事件处理方法,实现利用该组件对象与用户交互 的功能严格说来, 严格说来,容器也是一种控制组件因为一个容器也可以被视为组件而包含在其他容器的内 部7用户自定义成分除了上述的标准图形界面元素,编程人员还可以根 除了上述的标准图形界面
8、元素, 据用户的需要设计一些用户自定义的图形界面成分图 形 用 户 界 面 概 述 例如绘制一些几何图形、 例如绘制一些几何图形、使用标志图案等用户自定义成分由于不能像标准界面元素一样被系 统识别和承认通常只能起到装饰、美化的作用, 通常只能起到装饰、美化的作用,而不能响应用户的动 作,也不具有交互功能8主要内容图形用户界面概述 绘图、 绘图、图形和动画 Java 的事件处理 Java 的事件处理 GUI 标准组件 GUI 标准组件 布局管理器 容器 菜单 对话框9基本绘制类Graphics 是 java.awt 包中一个类 Graphics 是 java.awt 包中一个类,其中包括很多绘
9、包中一个类, 制图形和文字的方法绘 图 、 图 形 和 动 画 当一个 Applet 运行时 当一个Applet 运行时,执行它的浏览器会自动为它创建 运行时, 一个Graphics 类的实例 一个 Graphics 类的实例 利用这个实例,就可以在 Applet 中随意绘制图形和文字 利用这个实例,就可以在Applet 中随意绘制图形和文字 实际上 Applet 本身就是一个图形界面的容器 实际上 Applet 本身就是一个图形界面的容器如果希望在图形界面的 Java Application 程序中绘制 如果希望在图形界面的 Java Application 程序中绘制 图形,则需要创建一个
10、 Canvas 类 图形,则需要创建一个 Canvas 类的对象加入到这个 Application 程序的图形界面容器中 Application 程序的图形界面容器中Canvas 对象也拥有一个与 Canvas 对象也拥有一个与 Applet 类的 paint( )方法相同的 对象也拥有一个与 Applet 类的 类的paint( )方法相同的 paint( )方法 利用系统传递给这个 paint( )方法的 paint( )方法,利用系统传递给这个 paint( )方法的 方法,Graphics 类参数对象就可以在 Application 程序的图形用 Graphics 类参数对象就可以在
11、Application 程序的图形用 户界面中绘制各种图形和文字10绘制图形利用 Graphics 类可绘制的图形有直线 各种矩形、 利用Graphics 类可绘制的图形有直线、各种矩形、 类可绘制的图形有直线、 多边形、圆和椭圆等 多边形、绘 图 、 图 形 和 动 画1: import java.awt.*; : 2: import java.applet.Applet; : 3: public class DrawFigures extends Applet : 4: : 5: public void paint ( Graphics g) : 6: : 7: g.drawLine(30
12、,5,40,5); /画直线 : 画直线 /画矩形框 左上角 坐标,左上角 坐标,x 轴尺寸,y 轴尺寸 画矩形框(左上角 坐标, 坐标, 轴尺寸, 轴尺寸 轴尺寸) 画矩形框 左上角 x 坐标 左上角y 坐标 轴尺寸 8: g.drawRect(40,10,50,20); : 9: g.fillRect(60,30,70,40); /画实心矩形 : 画实心矩形 10: g.drawRoundRect(110,10,130,50,30,30); /画圆角矩形框 : 画圆角矩形框 /画椭圆形框 左上角 坐标,左上角 坐标,x 轴尺寸,y 轴尺寸 ,若 x 轴尺寸与 轴 画椭圆形框(左上角 坐标,
13、 坐标, 轴尺寸, 轴尺寸 轴尺寸), 轴尺寸与 轴尺寸与 y 轴 画椭圆形框 左上角 x 坐标 左上角 y 坐标 轴尺寸 尺寸相等, 尺寸相等,则画出圆形 11: g.drawOval(150,120,70,40); :11绘制图形12: g.fillOval(190,160,70,40); /画实心椭圆 : 画实心椭圆 13: g.drawOval(90,100,50,40); /画椭圆框 : 画椭圆框 14: g.fillOval(130,100,50,40); /画实心椭圆 : 画实心椭圆 15: drawMyPolygon(g); /自定义的画多边形的方法 : 自定义的画多边形的方法
14、 16: g.drawString(They are figures!,100,220); : 17: : 18: public void drawMyPolygon( Graphics g) : 19: : /保存多边形各点 坐标的数组 保存多边形各点 x 坐标的数组 保存多边形各点 20: int xCoords = 30,50,65,119,127; : /保存多边形各点 坐标的数组 保存多边形各点 y 坐标的数组 保存多边形各点 21: int yCoords = 100, 140,127,169,201; : /画自由多边形框 画自由多边形框 22: g.drawPolygon( x
15、Coords,yCoords,5); : 23: : 24: :绘 图 、 图 形 和 动 画12绘制图形运行结果及说明绘 图 、 图 形 和 动 画 首先,需要明确希望绘制的图形是什么 首先, 其次,需要指明所绘制图形或文字的大小和位置, 其次,需要指明所绘制图形或文字的大小和位置,这 要通过相对于界面容器的二维像素坐标来决定 Java 的屏幕坐标是以像素为单位 Java 的屏幕坐标是以像素为单位,容器的左上角被确 的屏幕坐标是以像素为单位, 定为横坐标( 和纵坐标( 的起点, 定为横坐标(x 轴)和纵坐标(y 轴)的起点,向右和向下延 伸坐标值递增13显示文字Graphics 类的方法 G
16、raphics 类的方法 drawString( )可以在屏幕的指定 类的方法 drawString( )可以在屏幕的指定 位置显示一个字符串 Java 中还有一个 Font, Java 中还有一个类 Font,使用它可以获得更加丰富 中还有一个类 多彩和逼真精确的字体显示效果一个 Font 类的对象表示了一种字体显示效果 一个 Font 类的对象表示了一种字体显示效果 包括字体类型、 包括字体类型、字型和字号 下面的语句用于创建一个 Font 类的对象 下面的语句用于创建一个 Font 类的对象Font MyFont = new Font ( TimesRoman, Font.BOLD, 1
17、2 );绘 图 、 图MyFont 对应的是 磅 TimesRoman 类型的黑体字 MyFont 对应的是 12 磅 TimesRoman 类型的黑体字,其 对应的是 12 类型的黑体字,中指定字型时需要用到 Font 类的三个 类的三个常量 中指定字型时需要用到 Font 类的三个常量 14Font.PLAIN Font.BOLD Font.ITALIC显示文字如果希望使用该 Font 对象 则可以利用 Graphics 类 如果希望使用该 Font 对象,则可以利用 Graphics 类 对象, 的 setFont( )方法 setFont( )方法绘 图 、 图 g. setFont
18、( MyFont );如果希望指定控制组件, 如果希望指定控制组件,如按钮或文本框中的字体 效果,则可以使用控制组件的方法 setFont( 效果,则可以使用控制组件的方法 setFont( )如设 btn 是一个按钮对象, 如设 btn 是一个按钮对象,则语句 是一个按钮对象 btn.setFont(MyFont); btn.setFont(MyFont); 将把这个按钮上显示的标签的字体改为 12 磅的 将把这个按钮上显示的标签的字体改为 12 磅的 TimesRoman 黑体 TimesRoman 黑体字 黑体字 另外, setFont( )方法相对的 方法相对的 getFont( )方
19、法将返回当前 另外,与 setFont( )方法相对的 getFont( )方法将返回当前 Graphics 或组件对象使用的字体 Graphics 或组件对象使用的字体15显示文字AvailableFonts.java绘 图 、 图 形 和 动 画1: import java.applet.*; : 2: import java.awt.*; : 3: : 4: public class AvailableFont extends Applet : 5: : 6: 6: GraphicsEnvironment gl = GraphicsEnvironment.getLocalGraphics
20、Environment( ); 7: String FontNames = gl.getAvailableFontFamilyNames( ); : 8: : 9: public void paint(Graphics g) : 10: : 11: Font current,oldFont; : 12: : 13: oldFont = g.getFont( );: 14: for(int i=0;iFontNames.length;i+) : 15: : 16: current = new Font(FontNamesi, Font.PLAIN,10); : 17: g.setFont(cur
21、rent); :16显示文字AvailableFonts.java绘 图 、 图 形 和 动 画18: : 19: : 20: : 21: : 22: : g.drawString(current.getName( ),10+i%4*120,20+i/4*15); g.setFont(oldFont);17显示文字程序说明绘 图 、 图 第 6 句利用 java.awt 包的 GraphicsEnvironment类的静态方 句利用 java.awt 包的 包的 GraphicsEnvironment 类的静态方 法 getLocalGraphicsEnvironment( )获得代表 Jav
22、a 程序运 )获得代表 获得代表 Java 程序运 行的当前平台的图形环境的对象 gl 行的当前平台的图形环境的对象 gl 句调用 gl 对象的 对象的getAvailableFontFamilyNames( )获得 第 7 句调用 gl 对象的getAvailableFontFamilyNames( )获得 当前平台上所有可以使用的字体名字, 当前平台上所有可以使用的字体名字,返回给字符串数 FontNames 组 FontNames 该数组的每个元素是一代表字体名的字符串 13 句首先获取并保存当前缺省的字体对象 第 13 句首先获取并保存当前缺省的字体对象 14 到 19 句的循环修改当
23、前字体 句的循环修改当前字体, 第 14 到 19 句的循环修改当前字体,设置成一可用的字体 并输出该字体的名称每四个字体占用一行 其中第 16句使用 句使用 Font 类的构造函数创建新字体对象 其中第 16 句使用 Font 类的构造函数创建新字体对象 最后, 20 句把字体恢复成原来的缺省值 最后,第 20 句把字体恢复成原来的缺省值18显示文字AvailableFonts.java 运行结果 AvailableFonts.java 运行结果绘 图 、 图 形 和 动 画19控制颜色Applet 中显示的字符串或图形的颜色可以用 Applet 中显示的字符串或图形的颜色可以用 Color
24、 类 中显示的字符串或图形的颜色可以用 Color 类 的对象来控制绘 图 、 图 形 和 动 画 每个 Color 对象代表一种颜色 用户可以直接使用 Color 每个 Color 对象代表一种颜色,用户可以直接使用 Color 对象代表一种颜色, 类中定义好的颜色常量 也可以通过调配红 蓝三色的比例创建自己的 的比例创建自己的 Color 也可以通过调配红、绿、蓝三色的比例创建自己的 Color 对象 Color 类中定义有如下的三种构造函数 Color 类中定义有如下的三种构造函数 public Color(int Red, int Green, int Blue); Color(int
25、 public Color(float Red, float Green, float Blue); public Color(int RGB); Color(int20控制颜色不论使用哪个构造函数创建 Color 对象, 不论使用哪个构造函数创建 Color 对象,都需要指 对象 定新建颜色中 R 定新建颜色中R(红)、G(绿)、B(蓝)三色的比例 G(绿 B(蓝绘 图 、 图 形 和 动 画 在第一个构造函数中通过三个整型参数指定 R 在第一个构造函数中通过三个整型参数指定 R,G,B, 整型参数指定 每个参数的取值范围 取值范围在 255 之间 每个参数的取值范围在 0255 之间 第二
26、个构造函数通过三个浮点参数指定 R 浮点参数指定 第二个构造函数通过三个浮点参数指定R,G,B,每个 参数的取值范围 0.01.0 之间 取值范围在 参数的取值范围在 0.01.0 之间 第三个构造函数通过一个整型参数指明其 RGB 三色比例 整型参数指明其 第三个构造函数通过一个整型参数指明其 RGB 三色比例 这个参数的 0 比特(取值范围为 0 255)代表红色的比例 代表红色的比例, 这个参数的 07 比特(取值范围为 0255)代表红色的比例, 815 比特代表绿色的比例,1623比特代表蓝色的比例 15 比特代表绿色的比例 1623 比特代表蓝色的比例 比特代表绿色的比例, 例如下
27、面的语句创建的是蓝色 Color blueColor = new Color(0,0,255);21控制颜色调用 Graphics 对象的 调用 Graphics 对象的 setColor( )方法可把当前的缺 对象的 setColor( )方法可把当前的缺 省颜色修改成新建的颜色,使此后调用该 Graphics 省颜色修改成新建的颜色,使此后调用该 Graphics 对象完成的绘制工作如绘制图形、字符串等, 如绘制图形、字符串等,都使用这个新建颜色 g.setColor(blueColor); g.setColor(blueColor);绘 图 、 图 形 和 动 画除了创建自己的颜色,也可
28、以直接使用 Color 类中 除了创建自己的颜色,也可以直接使用 Color 类中 定义好的颜色常量, 定义好的颜色常量,如g.setColor(Color.cyan); g.setColor(Color.cyan);Color 类中共定义了 种 Color 类中共定义了 13 种静态颜色常量 类中共定义了 13包括 black,orange,pink,grey 等 包括black,orange,pink,grey 等 使用时只需以 Color 为前缀 为前缀, 使用时只需以 Color 为前缀,非常方便22控制颜色对于 GUI 的控制组件 对于 GUI 的控制组件,它们有四个与颜色有关的方
29、的控制组件, 法分别用来设置和获取组件的背景色和前景色绘 图 、 图 形 和 动 画 public void setBackground(Color c) setBackground(Color public Color getBackground( ) getBackground( public void setForeground(Color c) setForeground(Color public Color getForeground( ) getForeground(23控制颜色UseColor.java绘 图 、 图 形 和 动 画1: import java.applet.Ap
30、plet; : 2: import java.awt.*; : 3: : 4: public class UseColor extends Applet : 5: : 6: Color oldColor; : 7: String ParamName = “red”,”green”,”blue”; /三个 三个 HTML 参数的名称 : 三个 参数的名称 8: int RGBarray = new int3; /保存三色比例的数组 : 保存三色比例的数组 9: : 10: public void init( ) : 11: : 12: for(int i=0;i24控制颜色UseColor.ja
31、va绘 图 、 图 形 和 动 画15: : public void paint(Graphics g) 16: : 17: oldColor = g.getColor( ); /保存原有的缺省颜色 : 保存原有的缺省颜色 /置新颜色 置新颜色 18: g.setColor(new Color(RGBarray0,RGBarray1,RGBarray2); : 19: g.drawString(How do you think about Current color: : /用新建颜色显示该颜色的三色分量 用新建颜色显示该颜色的三色分量 20: + g.getColor( ).toString
32、( ),10,20); : 21: g.setColor(oldColor); /恢复原有颜色 : 恢复原有颜色 22: g.drawString(Back to old default color:+ : g.getColor( ).toString( ),10,40); 23: : 24: :25控制颜色UseColor.java 运行结果 UseColor.java 运行结果 绘 图 、 图 形 和 动 画此程序对应的 HTML 文件如下: 文件如下: 此程序对应的 文件如下 通过改变三个参数的数值(应在 应在 0 之间 就可以指定不同的颜色而不需要重新编译 Java Applet 程
33、之间), 通过改变三个参数的数值 应在 255 之间 ,就可以指定不同的颜色而不需要重新编译 程 序。26显示图象由于图像的数据量要远远大于图形,所以一般不在 由于图像的数据量要远远大于图形, 程序中自行绘制图像,而是把已经存在于本机硬盘 程序中自行绘制图像,而是把已经存在于本机硬盘 或网络某地的二进制图像文件直接调入内存 图像文件有多种格式, bmp文件 gif 文件 tiff 文 文件、 文件、 图像文件有多种格式,如bmp 文件、gif 文件、tiff 文 件等等,其中 gif 是 Internet 上常用的图像文件格式 件等等,其中 gif 是 Internet 上常用的图像文件格式
34、Java 中可以利用 Java 中可以利用 Graphics 类的drawImage( )方法显 中可以利用 Graphics 类的 类的 drawImage( )方法显 示图像绘 图 、 图 形 和 动 画27显示图象DrawMyImage.java绘 图 、 图 形 和 动 画1: import java.awt.*; : 2: import java.applet.Applet; : 3: public class DrawMyImage extends Applet : 4: : 5: Image myImage ; : 6: public void init( ) : 7: : 8:
35、 myImage = getImage(getDocumentBase( ), blackbrd.gif );: 9: : 10: public void paint(Graphics g) : 11: : 12: g.drawImage(myImage, 0, 0, this); : 13: : 14: :28显示图象DrawMyImage.java绘 图 、 图 形 和 动 画 上例使用了 Image 类的对象 上例使用了 Image 类的对象 myImage 来保存二进制的图像 类的对象myImage 来保存二进制的图像 数据 其中 getImage( )方法是系统为 方法是系统为 Ap
36、plet 类定义的方法 类定义的方法, 其中getImage( )方法是系统为 Applet 类定义的方法,该方 法将指定图像文件的内容加载到内存的 Image 对象中 法将指定图像文件的内容加载到内存的 Image 对象中 getImage( )方法有两个参数 getImage( )方法有两个参数 第一个是图像文件所在的 URL 地址 地址, 第一个是图像文件所在的 URL 地址,在上例中由于图 HTML 文件 像文件 HTML 文件 在 一 ,所 Applet 一个方法getDocumentBase( 一个方法 getDocumentBase( ) 有 Applet 的HTML 文件的 A
37、pplet 的 HTML 文件的 URL 地址 文件的 URL 地址 getImage( getImage( ) 的第 个参数是图像文件的文件 Java 有bmp,gif, 的图像文件 有 bmp,gif,jpeg drawImage( )是Graphics 类中用来显示图像的方法 drawImage( )是 Graphics 类中用来显示图像的方法 的 Image 第一个参数是 有图像数 的 Image 第 第 个参数是图像的 上 , 图 像在 中的 一个参数是 图像的29实现动画效果动画是 Java Applet 最吸引人的特性之一 动画是 Java Applet最吸引人的特性之一 Java 实现动画的原理与放映动画片类似 实现动画的原理与放映动画片类似, 用 Java 实现动画的原理与放映动画片类似,取若干 相关的图像或图片,顺序、连续地在屏幕上先显示, 相关的图像或图片,顺序、连续地在屏幕上先显示, 后擦除,后擦除,循环往复就可以获得动画的效果绘 图 、 图 形 和 动 画30实现动画效果ShowAnimator.java绘 图 、 图 形 和 动