JavaMe開發(fā)自適應(yīng)滾動顯示

更新時間：2015年09月27日 14:27:16 投稿：lijiao

我們?？吹揭恍L動顯示的實例，比如UC瀏覽器中，顯示網(wǎng)頁的內(nèi)容。當內(nèi)容比較多時，采用滾動分頁顯示是合理的。在Canvas中繪圖中，多余的內(nèi)容被截斷了。如何實現(xiàn)滾動分頁顯示呢？

【問題描述】

我們?？吹揭恍L動顯示的實例，比如UC瀏覽器中，顯示網(wǎng)頁的內(nèi)容。當內(nèi)容比較多時，采用滾動分頁顯示是合理的。在Canvas中繪圖中，多余的內(nèi)容被截斷了。如何實現(xiàn)滾動分頁顯示呢？

【原理】

JavaMe中有一個坐標變換的功能。當觸發(fā)相應(yīng)的按鍵事件時，我們就讓其顯示相應(yīng)的頁，并且使?jié)L動條滾動到相應(yīng)的位置。

【代碼清單】

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設(shè)計模式，此處不再贅述。

【分析】

1 字符串拆分

String info_wrap1[] = StringDealMethod.format(info, width-15, ft);
具體請參考JavaMe連載(4)-繪制可自動換行文本

2 避免字截斷

如何在指定的區(qū)域內(nèi)繪制整行文本，而不會因為字體或屏幕高度的改變使文本出現(xiàn)截斷的問題，使文本出現(xiàn)“半截字”的問題呢？

bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();
經(jīng)過上述處理后，滾動區(qū)域的高度bodyHeight總會是字體高度的整數(shù)倍，這樣就不會出現(xiàn)上述字截斷的問題了。

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; 
  } 
 } 
}

本例方法能自適應(yīng)的檢測屏幕的寬度和長度，依據(jù)字體的大小，對文本進行分頁，滾動顯示，實現(xiàn)效果如圖1所示：