JavaMe开发自适应滚动显示

【问题描述】

我们常看到一些滚动显示的实例，比如UC浏览器中，显示网页的内容。当内容比较多时，采用滚动分页显示是合理的。在Canvas中绘图中，多余的内容被截断了。如何实现滚动分页显示呢？

【原理】

JavaMe中有一个坐标变换的功能。当触发相应的按键事件时，我们就让其显示相应的页，并且使滚动条滚动到相应的位置。

【代码清单】

ShowHelp.java

package com.token.view; 

import javax.microedition.lcdui.Font;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.game.GameCanvas; 

import com.token.util.StringDealMethod;
import com.token.util.UIController;
import com.token.view.components.*; 

public class ShowHelp extends GameCanvas
{
 private UIController controller;
 private Graphics graphics;
 private Font ft;
 private int width;
 private int height; 

 private Menu menu;
 private Head head;
 private BackGroud backGroud; 

 private int page = 0;
 private int currentPageIndex = 0;
 private int bodyHeight;
 private int dir = 0; 

 public ShowHelp(UIController control)
  {
  super(false);
  this.controller=control;
  setFullScreenMode(true); 

  width = getWidth();
  height = getHeight(); 

  menu = new Menu(this);
  head = new Head(this);
  backGroud = new BackGroud(this);
  } 

 public void show()
 {
  int margin = 0;
  graphics = getGraphics(); 

  graphics.clipRect(0,0, width, height);
  backGroud.drawBackGroud(this, graphics);
  head.drawHead(this, graphics, "帮助");
  menu.drawMenu(this, graphics, "","返回");
  //flushGraphics(); 

  ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_BOLD,Font.SIZE_MEDIUM); 

  String info = "1 滚动分页显示；\n"
    +"2 滚动分页显示；\n"
    +"3 滚动分页显示；\n"
    +"4 滚动分页显示；\n"
    +"5 滚动分页显示；\n"
    +"6 滚动分页显示；\n"
    +"7 滚动分页显示；\n"
    +"8 滚动分页显示；\n"
    +"9 滚动分页显示；\n"
    +"10 滚动分页显示；\n"
    +"11 滚动分页显示；\n"
    +"12 滚动分页显示；\n"
    +"13 滚动分页显示；\n"
    +"14 滚动分页显示；\n"
    +"15 滚动分页显示；\n"
    +"16 滚动分页显示；\n"
    +"17 滚动分页显示；\n"
    +"18 滚动分页显示；\n"
    +"19 滚动分页显示；\n"
    +"20 滚动分页显示；\n"
    +"21 滚动分页显示；\n"
    +"22 滚动分页显示；\n"
    +"23 滚动分页显示；\n"
    +"24 滚动分页显示；\n"
    +"25 滚动分页显示；\n"
    +"26 滚动分页显示；\n"
    +"27 滚动分页显示；\n"
    +"28 滚动分页显示；\n"
    +"29 滚动分页显示；\n"
    +"30 滚动分页显示；\n"
    +"31 滚动分页显示；\n"
    +"32 滚动分页显示；\n"
    +"33 滚动分页显示；\n"
    +"34 滚动分页显示；\n"; 

  String info_wrap1[] = StringDealMethod.format(info, width-15, ft); 

  page = info_wrap1.length*ft.getHeight()/(height-head.menuHeight-menu.menuHeight-2*margin)+1;
  bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();
  margin = (height-head.menuHeight-menu.menuHeight-bodyHeight)/2; 

  graphics.setFont(ft);
  graphics.setColor(Color.text);
  graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight);
  graphics.translate(0, dir*currentPageIndex*bodyHeight); 

  for(int i=0; i<info_wrap1.length;i++)
  {
   graphics.drawString(info_wrap1[i],5, i * ft.getHeight()+head.menuHeight+margin, Graphics.TOP|Graphics.LEFT);
  } 

  graphics.translate(0, -dir*currentPageIndex*bodyHeight); 

  drawScrollBar();
  flushGraphics(); 

  //System.out.println(graphics.getTranslateY()); 

 } 

 private void drawScrollBar()
 {
  int barHeight = height-head.menuHeight-menu.menuHeight; 

  graphics.setColor(Color.menuFrame);
  graphics.fillRect(width-3, head.menuHeight, 2, barHeight);
  graphics.setColor(Color.selectBg);
  graphics.fillRect(width-4, head.menuHeight+(currentPageIndex)*barHeight/page, 4, barHeight/page);
 } 

 protected void keyPressed(int keyCode)
 {
  //System.out.println(keycode);
  switch(keyCode)
  {
   case KeyID.SOFT_RIGHT:
   {
    String flag = "0";
    Object [] args = {flag,""};
    controller.handleEvent(UIController.EventID.EVENT_MAIN_SCREEN,args);
    break;
   }
   default:
     ;
  } 

  keyCode = getGameAction(keyCode);
  //System.out.println(page); 

  switch(keyCode)
  { 

   case UP:
   {
    dir = -1; 

    if(currentPageIndex>0)
    {
     currentPageIndex--;
    }
    else
    {
     //dir = 0;
    } 

    show();
    break; 

   }
   case DOWN:
   {
    dir = -1;
    if(currentPageIndex<page-1)
    {
     currentPageIndex++;
    }
    else
    {
     //dir = 0;
    } 

    show();
    break;
   }
  }
 } 

} 

*UIController请参考JavaMe连载(3)-也说MVC设计模式，此处不再赘述。

【分析】

1 字符串拆分

String info_wrap1[] = StringDealMethod.format(info, width-15, ft);
具体请参考JavaMe连载(4)-绘制可自动换行文本

2 避免字截断

如何在指定的区域内绘制整行文本，而不会因为字体或屏幕高度的改变使文本出现截断的问题，使文本出现“半截字”的问题呢？

bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();
经过上述处理后，滚动区域的高度bodyHeight总会是字体高度的整数倍，这样就不会出现上述字截断的问题了。

3 绘制文本

for(int i=0; i<info_wrap1.length;i++)
{
 graphics.drawString(info_wrap1[i],5, i * ft.getHeight()+head.menuHeight+margin, Graphics.TOP|Graphics.LEFT);
}

4 坐标变换

graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight);
graphics.translate(0, dir*currentPageIndex*bodyHeight);

文本绘制完成后，将坐标变换回来。

graphics.translate(0, -dir*currentPageIndex*bodyHeight);

5 绘制滚动条

private void drawScrollBar()
{
 int barHeight = height-head.menuHeight-menu.menuHeight; 

 graphics.setColor(Color.menuFrame);
 graphics.fillRect(width-3, head.menuHeight, 2, barHeight);
 graphics.setColor(Color.selectBg);
 graphics.fillRect(width-4, head.menuHeight+(currentPageIndex)*barHeight/page, 4, barHeight/page);
}

6 事件处理

当检测到按键事件后，进行翻页操作。

protected void keyPressed(int keyCode)
{
 //System.out.println(keycode);
 switch(keyCode)
 {
  case KeyID.SOFT_RIGHT:
  {
   String flag = "0";
   Object [] args = {flag,""};
   controller.handleEvent(UIController.EventID.EVENT_MAIN_SCREEN,args);
   break;
  }
  default:
   ;
 } 

 keyCode = getGameAction(keyCode);
 //System.out.println(page); 

 switch(keyCode)
 { 

  case UP:
  {
   dir = -1; 

   if(currentPageIndex>0)
   {
    currentPageIndex--;
   }
   else
   {
    //dir = 0;
   } 

   show();
   break; 

  }
  case DOWN:
  {
   dir = -1;
   if(currentPageIndex<page-1)
   {
    currentPageIndex++;
   }
   else
   {
    //dir = 0;
   } 

   show();
   break;
  }
 }
} 

本例方法能自适应的检测屏幕的宽度和长度，依据字体的大小，对文本进行分页，滚动显示，实现效果如图1所示：

图 滚动显示效果