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

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

http://dev.21tx.com 2006年04月25日 天极网 魔戒

 

引言

　　本文将讲述如何应用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的关键。