JavaMe開發：自適應滾動顯示

作者：tandesir 2012-05-09 10:58:25

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

#p#

【分析】

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

圖1 滾動顯示效果

原文鏈接：http://blog.csdn.net/tandesir/article/details/7548518

【系列文章】

JavaMe開發：低級界面繪圖之點陣字
JavaMe開發：低級界面繪圖之菜單
JavaMe開發：也說MVC設計模式
JavaMe開發：繪制可自動換行文本
JavaMe開發：繪制文本框TextEdit
JavaM開發：自適應滾動顯示

責任編輯：林師授來源： tandesir的博客

JavaME Java