引言
本文将讲述如何应用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的关键。中国最大的web开发资源网站及技术社区，
