下载本文源代码

　　引言

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