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; i0) 
    { 
     currentPageIndex--; 
    } 
    else 
    { 
     //dir = 0; 
    } 
     
    show(); 
    break; 
     
   } 
   case DOWN: 
   { 
    dir = -1; 
    if(currentPageIndex 
 

*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 
 

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 
 

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

 

图 滚动显示效果