创建使用触摸屏的Java ME 程序
杨建强

摘要： 介绍了Canvas 类中可用于捕获触摸屏事件的方法， 创建了一个类似于iPhone 手机上的图片浏览程序。

关键词： Java ME； Canvas

1 Canvas 类

    Canvas 类位于javax.microedition.lcdui 包中， 它提供了低级屏幕和图像操作方法。该类自身是抽象类， 使用的时候需要给出具体的实现。Canvas 中最重要的方法是paint (Graphics g)，它完成图像的实际绘制。当然， 在这里paint () 方法并不是重点， 感兴趣的是其他5 个方法， 它们可用于创建使用触摸屏的Java ME 程序。这些方法包括hasPointerEvents ()、hasPointer-MotionEvents ( ) 、pointerDragged ( int x, int y) 、pointerPressed(int x, int y)， 以及pointerReleased (int x, int y)。这5 个方法最初被用于处理具有指点能力的界面———也即用户能够使用指点设备与这样的界面交互。不过， 在具有触摸功能的非指点设备上， 这些方法工作得一样好。

    当发生指点事件时， 也即按下、释放和拖动指点设备时，系统会分别调用pointerPressed (int x, int y) 、pointerReleased(int x, int y) 和pointerDragged (int x, int y) 方法， 此时， 参数x、y 中存有指点事件发生时指点所在的坐标。因此， 可以利用这些方法获得指点所在的位置， 并根据需要完成相应的操作。注意， 系统对这些方法的调用是串行的， 也即系统从不在前一个调用方法返回之前调用另一个方法。方法hasPointerEvents() 检查设备是否支持指点按下和释放事件。当has-PointerEvents () 返回true 时， 意味着设备支持pointerPressed(int x, int y) 和pointerReleased (int x, int y) 方法。方法has-PointerMotionEvents () 检查设备是否支持指点移动事件。当hasPointerMotionEvents () 返回true 时， 意味着设备支持pointerDragged(int x, int y) 方法。

2 利用Canvas 创建触摸屏图片浏览器

    有了前面的基础， 现在来创建一个类似于iPhone 手机上的触摸屏图片浏览器。首先， 让先看一下程序运行时的屏幕截图， 从而搞清楚要实现的效果是什么。如图1 显示Java ME程序启动后加载的图片， 以及稍微向左拖动或滑动该图片后的效果。

图1 刚加载的图片（左） 和向左稍微滑动之后的图片（右）
 

    顺便说一下， 使用Java ME SDK 3.0 作为测试平台， 并选用DefaultFxTouchPhone1 作为目标模拟器。因此， 给出的屏幕截图来自于电脑上运行的模拟器。当然， 在模拟器只能使用鼠标来代替手指。

    选择的图片比屏幕的尺寸要宽一些， 为的是创造出图片滚动的效果。在实际设备上， 当手指在屏幕上左右滑动时， 程序会根据滑动的距离显示出当前图片的剩余部分， 或者显示出前一幅或下一幅图片。图片刚加载时剩余部分位于屏幕右侧。程序是这样设置的， 如果水平滑动的距离少有20 个点（像素），将显示出当前图片的剩余部分。如果滑动的距离超过20 个点，则显示前一幅或下一幅图片（分别对应向左、向右滑动）， 如图2 所示。要达到的效果就是通过手指的滑动来逐个显示图片库中的图片。

图2 刚加载的图片（左） 和向左（或向右）滑动超过20 个点之后的图片（右）
 

    知道了想要的结果， 现在来看一看完成上述任务的Canvas类的代码。

public class BrowseImageCanvas extends Canvas {
private boolean scroll = false;
private int currentImage = 0;
private Image[] images; // 存放多个图片，相当于图片库
private int pressX, releaseX, dragX = 0;
public BrowseImageCanvas() {
// 启动时加载图片，这里加载3 个图片
images = new Image[3];
images[0] = Image.createImage("/flower0.jpg");
images[1] = Image.createImage("/flower1.jpg");
images[2] = Image.createImage("/flower2.jpg");
}
protected void paint(Graphics g) {
g.setGrayScale(255);
g.fillRect(0, 0, getWidth(), getHeight()); // 清屏
if (scroll) { // 滚动当前图片
g.drawImage(images[currentImage], -dragX, 0,
Graphics.LEFT | Graphics.TOP);
scroll = false;
return;
}
if (pressX < releaseX) { // 向右滑动，显示下一幅图片
currentImage++;
if (currentImage == images.length) currentImage = 0;
}
if (pressX > releaseX) { // 向左滑动，显示前一幅图片
currentImage--;
if (currentImage < 0) currentImage = (images.length - 1);
}
// 绘制新的图片
g.drawImage (images [currentImage], 0, 0, Graphics.
LEFT | Graphics.TOP);
}
protected void pointerPressed(int x, int y) { // 记下
//开始触摸的水平位置
pressX = x;
}
// 记下触摸释放的水平位置，判断滑动的距离决定是否加
//载新图片
protected void pointerReleased(int x, int y) {
if (scroll) return;
releaseX = x;
if (Math.abs(releaseX - pressX) > 20) { // 滑动距离超
//过20 个点加载新图片
repaint();
}
}
protected void pointerDragged(int x, int y) { //在这里
//决定是否滚动图片
int deltaX = pressX - x;
if (Math.abs(deltaX) <= 20) { // 滑动距离少于20 个点
//滚动当前图片
int imageWidth = images[currentImage].getWidth();
if (imageWidth > getWidth()) {
dragX += deltaX;
if (dragX < 0) dragX = 0;
else if (dragX + getWidth() > imageWidth) dragX
= imageWidth - getWidth();
}
scroll = true;
repaint();
}
}
}

    程序中， pointerPressed ( ) 、pointerReleased ( ) 、pointer-Dragged () 方法设置各种参数， paint () 利用这些参数来决定是否滚动当前图片或显示新图片。在pointerPressed () 方法中，保存了用户触摸位置的x 轴坐标， 然后， 在pointerReleased ()和pointerDragged () 方法中确定用户手指沿水平方向移动的距离大小（deltaX）。如果移动超过20 点， 则显示新图片， 否则就沿x 轴方向卷动图片。可以左右两个方向移动。当然， 为了简化问题， 程序忽略了沿y 轴方向的移动。

3 结语

    自Java ME 诞生以来， 它就已经具备了满足触摸屏界面的能力， 只是那些提供Java ME 实现的设备制造商没有跟上步伐。介绍了Canvas 类中的能够捕获触摸屏上指点运动的接口，并以一个类似于iPhone 手机上的图片浏览程序来演示其使用方法。希望能够起到抛砖引玉的作用， 启发读者写出更加实用的触摸屏Java 程序。