JavaMe開發：自適應滾動顯示(1)

【問題描述】

我們常看到一些滾動顯示的實例，比如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設計模式，此處不再贅述。