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

2019-11-26 14:58:01

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

【問題描述】

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

【原理】

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

【代碼清單】

ShowHelp.javapackage 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所示：