JFC/Swing活学活用之创建自定义图像组件

引言

　　本文将讲述如何应用JFC/Swing内建的图像组件来创建完全自定义的基于图像的用户接口。

　　大多数Swing应用程序是通过标准VM提供的，或者是客户提供的外观和感觉（L&F）来获取它们的外在展示。L&F是一个完整的体系架构，VM需要做很多内在的工作，并且它还不是完全自定义的。举个例子来说吧，在基于L&F的前提下，我们可以创建一个按钮，看起来有点像交通岗上的"红灯"，随之而来的在你的应用中所有的按钮就都有了这样的"相貌"。然而有时我们所真正需要的就是一个看起来与图像完全一样的按钮，就像Web上面基于图像的按钮一样。

　　为了让大家更好的了解我们所要介绍的内容，先来看一下最终的显示效果，如下图所示：一个带面板（Panel）的窗格（Frame）包含了一个标签（Label），一个按钮（Button），一个复选框（Checkbox）。面板、标签和按钮完全由图像绘制，完全没有使用到标准的L&F。复选框是一个标准的Checkbox，但它将被设计成是透明的以搭配图像背景。







　　第一步 创建背景Panel

　　要完成这"天堂"般的工程，首先我们要做的是创建一个图像背景。因为这样的组件可重用性（reusable）很高，所以我们创建了JPanel类的一个子类，叫做ImagePanel，参考下面的代码示例：

　　示例代码1：



package com.demo.jcomponents;

import java.awt.*;
import javax.swing.*;

/**
* 创建图像面板
* @author xiazhi
*/
public class ImagePanel extends JPanel
{
　/**
　* 图形对象
　*/
　private Image img;

　/**
　* 构造函数
　*
　* @param img 图像对象
　*/
　public ImagePanel(String img)
　{
　　this(new ImageIcon(img).getImage());
　}

　/**
　* 构造函数
　*
　* @param img 图像对象
　*/
　public ImagePanel(Image img)
　{
　　this.img = img;

　　// 定义图像尺寸
　　Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
　　setPreferredSize(size);
　　setMinimumSize(size);
　　setMaximumSize(size);
　　setSize(size);

　　// 定义布局方式为空
　　setLayout(null);
　}

　/**
　* 重画画布
　*/
　public void paintComponent(Graphics g)
　{
　　g.drawImage(img, 0, 0, null);
　}
}

　　构造函数使用Image的实例作为参数，并将绘制的图像保存在变量img中以备以后使用。接着调用setSize()和setPreferredSize()方法，并以图像的尺寸作为参数。这样可以确保Panel的尺寸与图像的尺寸完全一致。接下来的操作非常重要，必须显示地指定Panel的preferred、maximum和minimum尺寸，因为Panel类的父类和子类可能不会使用绝对布局方式。

　　小提示：我们都知道，Swing是使用布局管理器（Layout Manager）来控制组件的位置，绝对布局的意思就是不使用布局管理器来控制组件的位置。（可以通过setLayout(null)方法来指定采用绝对布局方式）

　　既然这样，显示指定的尺寸和位置将会被使用（可以通过setSize()和setLocation()方法）。当使用指定的布局管理器时，preferred，minimum和maximum尺寸可能会被使用。为了适应上面所有的情况，我们只要简单的设置上面所提及的四个方法就可以了。

　　现在，Panel已经设置了适当的尺寸，我们可以通过重载paintComponent()方法来绘制图像：


public void paintComponent(Graphics g)
{
　g.drawImage(img, 0, 0, null);
}

　　小提示：在这里我们重载了paintComponent()方法，而不是paint()方法，这是很重要的一点，要不然子类将不会被重新绘制。

　　现在来测试一下我们工作的成果，我们将自定义的Panel添加到一个Frame中，然后显示该Frame，参考下面的代码示例：

　　示例代码2：


package com.demo.jcomponents;

import javax.swing.*;

/**
* 测试图像Panel组件
* @author xiazhi
*/
public class ImageTest1
{
　public static void main(String[] args)
　{

　　ImagePanel panel = new ImagePanel(createImageIcon("images/background.png").getImage());

　　JFrame frame = new JFrame("JFC/Swing：创建以图像为主题的组件");
　　frame.getContentPane().add(panel);

　　frame.pack();
　　frame.setVisible(true);
　}

　protected static ImageIcon createImageIcon(String path)
　{
　　java.net.URL imgURL = ImageTest1.class.getResource(path);
　　if (imgURL != null)
　　{
　　　return new ImageIcon(imgURL);
　　}
　　else
　　{
　　　System.err.println("不能找到指定文件: " + path);
　　　return null;
　　}
　}
}

　　程序运行后，显示效果如下：




　　第二步 创建图像Label

　　现在背景的绘制工作已经完成了。接下来要将重点转移到标签"Activate Reactor"的制作上了。这里仅仅是将一个静态的图像放置在背景的合适位置上。我们当然可以使用另外一个ImagePanel实例来实现这部分功能，但是由于"Activate Reactor"这个几个文字实际上仅仅是一个标签，所以我们创建了另外一个子类ImageLabel，参考下面的代码示例：

　　示例代码3：



package com.demo.jcomponents;

import javax.swing.*;

/**
*图像标签
* @author xiazhi
*/
public class ImageLabel extends JLabel
{
　/**
　* 构造函数
　*
　* @param img 图像对象
　*/
　public ImageLabel(String img)
　{
　　this(new ImageIcon(img));
　}

　/**
　* 构造函数
　*
　* @param icon 图像图标对象
　*/
　public ImageLabel(ImageIcon icon)
　{
　　//设置标签图标
　　setIcon(icon);
　　//设置标签图标和文本之间的间隔
　　setIconTextGap(0);
　　//设置边框
　　setBorder(null);
　　//设置文本
　　setText(null);
　　setSize(icon.getImage().getWidth(null), icon.getImage().getHeight(null));
　}
}

　　与ImagePanel类似，我们需要将Label的尺寸与图像的尺寸相匹配。这里我们只需要调用setSize()方法即可，因为Label自己会处理其它的设置。接下来，将图标设置为我们指定的图像，这样Label自己会处理图像的绘制。通过设置文本间隔为0，以及设置边框为空，设置文本为空，将会去除图像的任何额外的空间，将会使Label与背景完美的啮合在一起。setOpaque(false)方法告诉Label不要自己绘制背景。如果用图像填充Label，那么问题不大，但如果图像中含有透明区域（大部分PNG类型的图像都会这个样子），那么在透明区域背景将会显示出来。

　　现在来测试一下我们的成果吧！在上面测试的基础上添加了一个Label，参考下面的代码示例：

　　示例代码4：


ImageLabel label = new ImageLabel(createImageIcon("images/reactor.png"));
//定位Label
label.setLocation(29, 37);
//为Label增加提示信息
label.setToolTipText("看到了吗？");
//将Label添加到Panel中
panel.add(label);

　　程序运行后，显示效果如下所示：




　　第三步 创建图像Button

　　接下来是创建定制的Button。由于Button具有翻转特性和状态特性，所以绘制Button需要一些技巧。我们再次创建了一个JButton类的子类，参考下面的代码示例：

　　示例代码5：



package com.demo.jcomponents;

import java.awt.*;
import javax.swing.*;

/**
* 图像按钮
* @author xiazhi
*/
public class ImageButton extends JButton
{
　/**
　* 构造函数
　*
　* @param img 图像实例
　*/
　public ImageButton(String img)
　{
　　this(new ImageIcon(img));
　}

　/**
　* 构造函数
　*
　* @param icon 图像图标
　*/
　public ImageButton(ImageIcon icon)
　{
　　//设置图标
　　setIcon(icon);
　　//设置空白间距
　　setMargin(new Insets(0, 0, 0, 0));
　　//设置文本与图标之间的间隔
　　setIconTextGap(0);
　　//指定是否绘制边框
　　setBorderPainted(false);
　　//设置边框
　　setBorder(null);
　　//设置文本
　　setText(null);
　　setSize(icon.getImage().getWidth(null), icon.getImage().getHeight(null));
　}
}

　　这段代码几乎与前面定制显示的JLabel的代码完全一样。唯一的不同之处在于增加了setMargin()和setBorder()方法的调用。大多数L&F使用边框（Border）和边界（Margin）来指明Button是否已经被选取中。因为Label不能被选取择，所以没有上述方法。不管怎么样，我们只要将这两个属性关闭就可以了。

　　现在来测试一下我们的成果吧！在上面测试的基础上添加了一个Button，参考下面的代码示例：

　　示例代码6：


final ImageButton button = new ImageButton(createImageIcon("images/button.png"));
//定位Button
button.setLocation(60,74);
//将Button添加到Panel中
panel.add(button);

　　程序运行后，显示效果如下所示：




　　现在Button已经添加到Panel中，剩下的只要将翻转和其它状态属性添到到Button中就可以了。幸运的是，这些工作不需要我们在子类中添加任何新的代码。JButton已经提供了通过图像来表征翻转、按下、选择、失效、失效选择等属性。我们只需要使用通常的set方法来添加各种状态变量，参考下面的代码示例：


button.setPressedIcon(createImageIcon("images/button-down.png"));
button.setRolloverIcon(createImageIcon("images/button-over.png"));
button.setSelectedIcon(createImageIcon("images/button-sel.png"));
button
.setRolloverSelectedIcon(createImageIcon("images/button-sel-over.png"));
button.setDisabledIcon(createImageIcon("images/button-disabled.png"));
button
.setDisabledSelectedIcon(createImageIcon("images/button-disabled-selected.png"));

　　添加上述代码后，再次运行程序，显示效果如下所示：



选择

未选择


　　在这里我们使用了带有光圈的图像来表示Button被选中，将图像模糊化来表示Button被禁用，图像中间的矩形条用来表示Button被选中的状态，除了有颜色的改变外，还有发光的效果。

　　为了完整的演示所有的状态，我们在Button的下部增加了一个标准的JCheckBox，通常情况下，它将会绘制一个灰色的背景（或者是带条纹的背景在Mac机上），我们调用setOpaque(false)方法来强制要求它不要绘制。当父类没有使用布局管理器时，调用checkbox.setSize(checkbox.getPreferredSize())方法是必须的，这样可以使checkbox获得合适的尺寸，就像本文示例中的情形：

　　示例代码7：


final JCheckBox checkbox = new JCheckBox("Disable");
checkbox.setLocation(70, 150);
//强制要求checkbox不要绘制自己的背景
checkbox.setOpaque(false);
//设置checkbox的尺寸
checkbox.setSize(checkbox.getPreferredSize());
//添加到Panel中
panel.add(checkbox);
//添加事件监听器
checkbox.addActionListener(new ActionListener()
{
　public void actionPerformed(ActionEvent evt)
　{
　　button.setEnabled(!checkbox.isSelected());
　}
});

　　到此示例程序已经完整了，程序运行后，整体的显示效果如下所示：





　　结束语

　　至此，我们创建了完全定制的基于图像的组件，JFC/Swing有着庞大的结构，如何更好的去理解，理清组件之间的微妙关系，是学好Swing的关键。