JavaME UI设计之滚动条

 

上一篇文章中我们介绍了在低级界面中实现文本控件，文本控件主要用于显示大段文字，具有自动换行，翻页等功能。通常还可以通过另一种方式也可以实现大量文本的处理，就是给文本添加一个滚动条，本文同样选择在低级界面中来实现，同时也方便移植到其他的移动平台，比如：android、windows mobile等。

首先看文本需要实现的效果如图3-1所示。

 

从图中可以看出，同样需要将要显示的文本拆分为适合显示区域的文本行，右边会根据文本行的多少来计算滚动条的长短和滚动条显示的位置，这里只是用于测试，滚动条将用一个矩形来显示，大家也可以使用适合应用程序风格的UI图片来实现。下面我们分析具体实现。

首先在程序中加入如下成员变量：

private int sreenWidth;    //屏幕宽度

private int sreenHeight; //屏幕高度

private int scrollHeight; //滚动条的高度

private int scrollY;         //滚动条的坐标y

private int regionY;              

private int numHeight;    //行数

其实这里的屏幕宽度和高度也将作为文本显示区域和滚动条的区域，具体绘制代码如下：

//绘制背景，颜色

g.setColor(0xFFFFFF);

g.fillRect(0, 0, this.sreenWidth, this.sreenHeight);

//将要处理的文本转换为字符数组

char[] chars = text.toCharArray();

int h = 0;

int w = 0;

//设置字体和颜色

Font font = g.getFont();

g.setColor(0x00000);

for (int i = 0; i < text.length(); i++) {

       if (w > this.sreenWidth - 18) {

              h += font.getHeight();

              w = 0;

       }

       g.drawChar(chars[i], w, h + this.regionY, Graphics.TOP | Graphics.LEFT);

       w += font.charWidth(chars[i]);

}

if (this.numHeight == 0)

       this.numHeight = h + font.getHeight();

//计算滚动条的位置

this.scrollHeight = this.sreenHeight * this.sreenHeight / numHeight;

this.scrollY = (-this.regionY) * this.sreenHeight / numHeight;

 

g.setColor(255);

g.fillRect(this.sreenWidth - 6, 0, 6, this.sreenHeight);

//绘制滚动条

g.setColor(0xFFFFFF);

g.fillRect(this.sreenWidth - 5, this.scrollY, 4, this.scrollHeight);

上面的代码中所使用的api都非常简单，这里就不一一重复介绍了，对于滚动条位置的计算需要根据文本的行数的多少和高度来计算。这里，没有将要处理的字符串筛分到向量中，而是在拆分的同时进行了绘制！拆分原理是通过将每个字符的宽度（charWidth）累加和屏幕宽度进行对比，如果满足一行时将高度加上字体高度切换到下一行显示。在绘制时使用了drawChar函数来绘制单个字符而不是使用drawString来绘制一行字符串。另外，对于滚动条的位置将在程序中动态改变，需根据具体的按键事件来确定，下面我们在按键处理函数中加入如下代码，测试滚动条的实现效果，如下：

System.out.println(keyCode);

if (keyCode == -2) {

       if (this.sreenHeight - this.regionY > this.numHeight)

              return;

       this.regionY -= 30;

} else if (keyCode == -1) {

       if (this.regionY >= 0)

              return;

       this.regionY += 30;

}

this.repaint();

实现方式为通过按键来改变绘制的位置坐标即可，最终大家同样可以将该代码整理成为一个滚动条控件，以方便在各种应用或游戏中直接使用。

上一篇文章和这一篇都是在低级界面中处理文本显示的方案，由于JavaME的高级界面并不是非常美观，通常在开发中也很少使用，因此大家可以自己通过低级界面来实现一套类似于高级界面的UI控件，当然目前也有一些开源的第三方UI库，后面我们还会陆续给大家介绍。