23 Java 图形化编程
图形用户界面（Graphical User Interface，简称 GUI）编程对于某种语言来说非常重要。Java的应用主要方向是基于Web浏览器的应用，用户界面主要是HTML、CSS和JavaScript等基于Web的技术，这些介绍要到Java EE阶段才能学习到。
而本章介绍的Java图形用户界面技术是基于Java SE 的 Swing，事实上它们在实际应用中使用不多，因此本章的内容只做了解。
Java图形用户界面技术
- AWT AWT（Abstract Window Toolkit）是抽象窗口工具包，AWT是Java 程序提供的建立图形用户界面最基础的工具集。AWT支持图形用户界面编程的功能包括：用户界面组件（控件）、事件处理模型、图形图像处理（形状和颜色）、字体、布局管理器和本地平台的剪贴板来进行剪切和粘贴等。AWT是Applet和Swing技术的基础。 AWT在实际的运行过程中是调用所在平台的图形系统，因此同样一段AWT程序在不同的操作系统平台下运行所看到的样式不同的。
- Applet Applet称为Java小应用程序，Applet基础是AWT，但它主要嵌入到HTML代码中，由浏览器加载和运行，由于存在安全隐患和运行速度慢等问题，已经很少使用了。
- Swing Swing是Java主要的图形用户界面技术，Swing提供跨平台的界面风格，用户可以自定义Swing的界面风格。Swing提供了比AWT更完整的组件，引入了许多新的特性。Swing API是围绕着实现AWT各个部分的API构筑的。Swing是由100%纯Java实现的，Swing组件没有本地代码，不依赖操作系统的支持，这是它与AWT组件的最大区别。本章重点介绍Swing技术。
- JavaFX JavaFX是开发丰富互联网应用程序（Rich Internet Application，缩写RIA）的图形用户界面技术，JavaFX期望能够在桌面应用的开发领域与Adobe公司的AIR、微软公司的Silverlight相竞争。传统的互联网应用程序基于Web的，客户端是浏览器。而丰富互联网应用程序试图打造自己的客户端，替代浏览器。
Swing技术基础
AWT是Swing的基础，Swing事件处理和布局管理都是依赖于AWT，AWT内容来自java.awt包，Swing内容来自javax.swing包。AWT和Swing作为图形用户界面技术包括了4个主要的概念：组件（Component）、容器（Container）、事件处理和布局管理器（LayoutManager），下面将围绕这些概念展开。
Swing类层次结构
容器和组件构成了Swing的主要内容，下面分别介绍一下Swing中容器和组件类层次结构。 图所示是Swing容器类层次结构，Swing容器类主要有：JWindow、JFrame和JDialog，其他的不带“J”开头都是AWT提供的类，在Swing中大部分类都是以“J”开头。
Swing容器类层次结构
Swing组件类层次结构
事件处理模型
图形界面的组件要响应用户操作，就必须添加事件处理机制。Swing采用AWT的事件处理模型进行事件处理。在事件处理的过程中涉及三个要素：
- 事件：是用户对界面的操作，在Java中事件被封装称为事件类 java.awt.AWTEvent 及其子类，例如按钮单击事件类是 java.awt.event.ActionEvent。
- 事件源：是事件发生的场所，就是各个组件，例如按钮单击事件的事件源是按钮（Button）。
- 事件处理者：是事件处理程序，在Java 中事件处理者是实现特定接口的事件对象。
事件类型和事件监听器接口
使用适配器
事件监听器都是接口，在Java中接口中定义的抽象方法必须全部是实现，哪怕你对某些方法并不关心。为此 Java 还提供了一些与监听器相配套的适配器。监听器是接口，命名采用XXXListener，而适配器是类，命名采用XXX Adapter。在使用时通过继承事件所对应的适配器类，覆盖所需要的方法，无关方法不用实现。
this.addWindowListener(new WindowAdapter(){
@Override
public void windowClosing(WindowEvent e) {
// 退出系统
System.exit(0);
}
});可见代码非常的简洁。事件适配器提供了一种简单的实现监听器的手段，可以缩短程序代码。但是，由于Java的单一继承机制，当需要多种监听器或此类已有父类时，就无法采用事件适配器了。
并非所有的监听器接口都有对应的适配器类，一般定义了多个方法的监听器接口，例如WindowListener有多个方法对应多种不同的窗口事件时，才需要配套的适配器，主要的适配器如下：
- ComponentAdapter：组件适配器。
- ContainerAdapter：容器适配器。
- FocusAdapter：焦点适配器。
- KeyAdapter：键盘适配器。
- MouseAdapter：鼠标适配器。
- MouseMotionAdapter：鼠标运动适配器。
- WindowAdapter：窗口适配器。
布局管理
Java为了实现图形用户界面的跨平台，并实现动态布局等效果，Java 将容器内的所有组件布局交给布局管理器管理。布局管理器负责，如组件的排列顺序、大小、位置，当窗口移动或调整大小后组件如何变化等。
Java SE提供了7种布局管理器包括：FlowLayout、BorderLayout、GridLayout、BoxLayout、CardLayout、SpringLayout 和 GridBagLayout，其中最基础的是 FlowLayout、BorderLayout 和GridLayout 布局管理器。下面重点介绍这三种布局。
FlowLayout
主要的构造方法如下：
- FlowLayout(int align, int hgap, int vgap)：创建一个 FlowLayout 对象，它具有指定的对齐方式以及指定的水平和垂直间隙，hgap 参数是组件之间的水平间隙，vgap 参数是组件之间的垂直间隙，单位是像素。
- FlowLayout(int align)：创建一个FlowLayout对象，指定的对齐方式，默认的水平和垂直间隙是5个单位。
- FlowLayout()：创建一个FlowLayout对象，它是居中对齐的，默认的水平和垂直间隙是5个单位。
上述参数align是对齐方式，它是通过FlowLayout的常量指定的，这些常量说明如下：
- FlowLayout.CENTER：指示每一行组件都应该是居中的。
- FlowLayout.LEADING：指示每一行组件都应该与容器方向的开始边对齐，例如，对于从左到右的方向，则与左边对齐。
- FlowLayout.LEFT：指示每一行组件都应该是左对齐的。
- FlowLayout.RIGHT：指示每一行组件都应该是右对齐的。
- FlowLayout.TRAILING：指示每行组件都应该与容器方向的结束边对齐，例如，对于从左到右的方向，则与右边对齐。
BorderLayout布局
BorderLayout布局是窗口的默认布局管理器。 BorderLayout 是 JWindow、JFrame 和 JDialog 的默认布局管理器。BorderLayout 布局管理器把容器分成5个区域：North、South、East、West 和 Center，如图所示每个区域只能放置一个组件。
BorderLayout主要的构造方法如下：
- BorderLayout(int hgap, int vgap)：创建一个 BorderLayout 对象，指定水平和垂直间隙，hgap参数是组件之间的水平间隙，vgap参数是组件之间的垂直间隙，单位是像素。
- BorderLayout()：创建一个BorderLayout对象，组件之间没有间隙。
BorderLayout 布局有5个区域，为此BorderLayout中定义了5个约束常量，说明如下：
- BorderLayout.CENTER：中间区域的布局约束（容器中央）。
- BorderLayout.EAST：东区域的布局约束（容器右边）。
- BorderLayout.NORTH：北区域的布局约束（容器顶部）。
- BorderLayout.SOUTH：南区域的布局约束（容器底部）。
- BorderLayout.WEST：西区域的布局约束（容器左边）。
GridLayout 布局
GridLayout布局以网格形式对组件进行摆放，容器被分成大小相等的矩形，一个矩形中放置一个组件。 GridLayout布局主要的构造方法如下：
- GridLayout()：创建具有默认值的GridLayout对象，即每个组件占据一行一列。
- GridLayout(int rows, int cols)：创建具有指定行数和列数的GridLayout对象。
- GridLayout(int rows, int cols, int hgap, int vgap)：创建具有指定行数和列数的GridLayout对象，并指定水平和垂直间隙。
图形化编程知识
- Java图形坐标 从左向右 x轴 从上到下 y轴
- Graphics类的图形绘制方法, 可以认为是🖌类 绘制 • drawLine(int x1, int y1, int x2, int y2) • drawRect(int x, int y, int width, int height) • drawOval(int x, int y, int width, int height) • drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) • drawPolygon(int[] xPoints, int[] yPoints, int nPoints) 绘制对编写 • drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) 绘制圆角矩形 • drawString(String s,int x,int y)
填充
- fillOval(int x, int y, int width, int height)
- fillRect(int x, int y, int width, int height)
- fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
- fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)
- 字体控制
- Font myFont = new Font("宋体", Font.BOLD, 12); 定义字体为宋体，大小为12号，粗体。
- Font.PLAIN，Font.ITALIC，Font.BOLD分别表示普通、斜体和粗体。
- 如果要同时兼有几种风格可以通过"+"号连接。 例如：
new Font("TimesRoman", Font.BOLD + Font.ITALIC, 28);给图形对象或GUI部件设置字体 • 利用Graphics类的setFont()方法确定使用定义的字体 g.setFont(myFont); • 给某个GUI部件设定字体可以使用该部件的setFont()方法。例如： Button btn = new Button("确定"); btn.setFont(myFont); • 使用getFont()方法返回当前的Graphics对象或GUI部件使用的字 体。
- 颜色控制 Color类构造方法 • public Color(int Red, int Green, int Blue) 每个参数的取值范围在0～255之间 • public Color(float Red, float Green, float Blue) 每个参数的取值范围在0.0～1.0之间 • public Color(int RGB) 类似HTML网页中用数值设置颜色。
颜色处理常用方法 画笔提供了如下方法: • setColor(Color.blue) ---将画笔定为兰色 • getColor( )--获取当前的绘图颜色。
Component类中定义方法 • setBackground(Color.red)----设置组件的背景色为红色 • setForeground(Color.white) ----设置组件的前景色为白色 • getBackground( ) ---获取背景色 • getForeground() ---获取前景色
思考：设置一个红色按钮，上面写黄色字如何实现？
Button btn = new Button("确定");
btn.setBackground(Color.red);
btn.setForeground(Color.yellow);- Java绘图模式
(1) 覆盖模式：绘制图形像素覆盖屏幕上已有像素信息。缺省的绘图
模式为覆盖模式。
(2) 异或模式：绘制图形像素与屏幕上像素信息进行异或运算，以运
算结果作为显示结果。
• 异或模式由Graphics类的setXORMode()方法来设置
setXORMode(Color c)其中，参数c用于指定XOR颜色。 - 绘制图像 (1) 图像的获取 Toolkit tool = getToolkit(); Image img = tool.getImage( "images\img1.gif"); (2) 图像绘制 public void drawImage(Image, x, y, imageObserver)
Java 2D图形绘制步骤
- 获得一个Graphics2D类的对象; • Graphics2D g2d=(Graphics2D)g; • 定义2D图形对象(java.awt.geom包)； • 绘制(draw)或者填充(fill)图形。 • 使用setPaint方法来设置填充着色方式; • 使用setStroke方法来设置画笔线条特征; • 使用transform方法，设置图形变换方式;
- 绘制图形 • void fill(Shape s)：绘制一个填充的图形。 • void draw(Shape s)：绘制图形的边框
3．指定填充图案 • 用setPaint(Paint)方法指定填充方式 以下几个类均实现了Paint接口。 • Color：单色填充。 • GradientPaint：渐变填充。 • TexturePaint：纹理填充。
- 设置画笔 可以通过setStroke()方法并用BasicStroke对象作为参数，可设置绘制图形线条 的宽度和连接形状。 • BasicStroke(float width)。 • BasicStroke(float width, int cap, int join)。 • BasicStroke(float width, int cap, int join, float miterlimit, float[] dash, float dash_ phase)。 以上参数中： • width表示线宽； • cap决定线条端点的修饰样式，取值在BasicStroke的3个常量中选择： CAP_BUTT(无端点)、CAP_SQUARE(方形端点) 、CAP_ROUND(圆形端 点) ； • join代表线条的连接点的样式，取值在BasicStroke的3个常量中选择： JOIN_BEVEL（扁平角）、JOIN_MITER（尖角）、JOIN_ ROUND（圆 角） 。 • 最后一个构造方法可设定虚线方式。
- 图形绘制的坐标变换 (1) 创建AffineTransform对象 AffineTransform trans= new AffineTransform( ); (2) 设置变换形式 AffineTransform提供了如下方法实现3种最常用的图形变换操作。 • translate(double a,double b)：将图形坐标偏移到a，b处；绘制图形时，按 新原点确定坐标位置。 • scale(double a,double b)：将图形在X轴方向缩放a倍，Y轴方向缩放b倍。 • rotate(double angle,double x,double y)：将图形按(x,y)为轴中心旋转 angle个弧度。 (3) 将Graphics2D“画笔”对象设置为采用该变换。 g2d.setTransform(trans);
习题
编写窗体应用，窗体中安排2个按钮，按钮上面的标签分别为“改背景”、“关闭”，点击“改背景”按钮，用随机产生的颜色更改窗体的背景，点击“关闭”按钮可关闭窗体。
采用流式布局 添加按钮 注册监听
package newfile;
import java.awt.Button;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.Frame;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class Test3 {
public static void main(String[] args) {
new MyFrame();
}
static class MyFrame extends Frame {
public MyFrame() {
setTitle("测试");
Button btn = new Button("改背景");
Font f = new Font("黑体", Font.BOLD, 22);
btn.setFont(f);
btn.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
setBackground(new Color((int)(Math.random() * 0xFFFFFF)));
}
});
setLayout(new FlowLayout());
add(btn);
btn = new Button("关闭");
btn.setFont(f);
btn.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
dispose();
}
});
add(btn);
super.setSize(400, 200);
super.setVisible(true);
}
}
}设有一批英文单词存放在一个数组中，编制一个图形界面程序浏览单词。在界面中安排一个标签显示单词，另有“上一个”、“下一个”两个按钮实现单词的前后翻动。
package newfile;
import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.Frame;
import java.awt.Label;
import java.awt.Panel;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class Test3 {
public static void main(String[] args) {
MyFrame myFrame = new MyFrame();
String[] strs = {"welcome", "element", "target", "term", "modify", "yellow"};
myFrame.setContent(strs);
myFrame.setVisible(true);
}
static class MyFrame extends Frame {
private String[] strs;
private int index;
private Label label = new Label();
public MyFrame() {
setSize(400, 200);
setTitle("单词卡片");
Panel panel = new Panel(new FlowLayout());
this.label.setFont(new Font("宋体", Font.PLAIN, 28));
this.label.setAlignment(Label.CENTER);
add("Center", this.label);
add("South", panel);
Button btn = new Button("上一个");
panel.add(btn);
Font f = new Font("黑体", Font.PLAIN, 20);
btn.setFont(f);
btn.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
preWord();
}
});
btn = new Button("下一个");
panel.add(btn);
btn.setFont(f);
btn.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
nextWord();
}
});
}
public void setContent(String[] strs) {
this.strs = strs;
this.index = 0;
this.label.setText(strs[index]);
}
public void preWord() {
if (this.index <= 0) {
this.index = this.strs.length - 1;
} else {
this.index = --this.index % this.strs.length;
}
this.label.setText(strs[index]);
}
public void nextWord() {
if (index >= 0) {
this.index = ++this.index % this.strs.length;
} else {
this.index = 0;
}
this.label.setText(this.strs[this.index]);
}
}
}