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的关键。