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

你可能感兴趣的:(Useway狂人日记)