JavaMe開發自適應滾動顯示

【問題描述】

我們常看到一些滾動顯示的實例，比如UC瀏覽器中，顯示網頁的內容。當內容比較多時，採用滾動分頁顯示是合理的。在Canvas中繪圖中，多餘的內容被截斷了。如何實現滾動分頁顯示呢？

【原理】

JavaMe中有一個坐標變換的功能。當觸發相應的按鍵事件時，我們就讓其顯示相應的頁，並且使滾動條滾動到相應的位置。

【代碼清單】

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

【分析】

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所示：

圖滾動顯示效果