饒榮慶 -- 您今天UCWEB了嗎？--http://www.ucweb.com

文章出處

http://www.3geye.net/bbs/thread-268-1-1.html

關于UI組件，上下滾動，平滑滾動的技術實現探討

關于UI組件，上下滾動，平滑滾動的技術實現探討

在我設計的UI中存在的兩個問題一直沒有解決好

1.是焦點處理機制-- 這個問題已經在前幾天我解決了。

2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。

下面我重點老討論這個問題。希望大家有什么好的想法也說下。分享下經驗，讓我少走彎路

現在來看看下面的圖

假設：圖A 為 整個Canvas可以顯示的圖， 圖B為 需要顯示的圖，

我們來看看這算適合坐滾動設計嗎。看看下面的邏輯。現在假設HA為A的高度， HB為B的高度，ScrollH表示滾動條的高度。進度條的位置為ScrollY，系統滾動的增量為regionY

1．  如果A的高度> B的高度，則不需要滾動

2．  如果A的高度

下面是算法比例ScrollH/HA = HA/HB è ScrollH=HA*HA/HB；

得到當前進度條的位置是 ScrollY/HA = regionY/HB è ScrollY=regionY*HA/HB

當調用keyPressed事件的時候處理regionY; è down：rgionY -= 30; up：region += 30；

然后自動更新ScrollY ；最后調用repaint();

上面是算法模型，現在來看下我的具體實現，希望大家對這個模型多多批評，看看還有沒有更好的算法實現。

在調式的過程中遇到一個很特別的問題，居然public void keyPressed(int keyCode)沒有任何響應。哈哈，是我眼花，原來是采用了print的方法，所以沒仔細看，看不到輸出。郁悶啊

經過測試，此路完全是走的通的，現在看看代碼是怎么實現的，我知識對字符串進行簡單的處理實現，對于更復雜的UI組件，原理差不錯。不過要做下小修改

 
import javax.microedition.lcdui.*;

/**
 *

Title:

Description:

Copyright: Copyright (c) 2007

Company:

    private String text="關關于UI組件，上下滾動，平滑滾動的視線技術探討在我設計的UI中存在的兩個問題一直沒有解決好1.是焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部 "+
                        "分問題，但是另外一部分問題又冒出來了。下面我重點老討論這個問題。希望大家有什么好的想法也說下。分享下經驗，讓我少走彎路關于UI組件，上下滾動， 平滑滾動的視線技術探討在我設計的UI中存在的兩個問題一直沒有解決好1.是焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下面 我重點老討論這個問題。希望大家有什么好的想法也說下。分享下經驗，讓我少走彎路于UI組件，上下滾動，平滑滾動的視線技術探討在我設計的UI中存在的兩 個問題一直沒有解決好1.是焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下面 我重點老討論這個問題。希望大家有什么好的想法也說下。分享下經驗，讓我少走彎路sdf" +
                        "是焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下是 焦點處理機制-- 這個問題已經在前幾天我解決了。2.就是上下滾動，平滑滾動，觸摸屏滾動，實現的不是很到。雖然是解決了一部分問題，但是另外一部分問題又冒出來了。下 ";
    private int sreenWidth;
    private int sreenHeight;
    private int scrollHeight;
    private int scrollY;
    private int regionY;

    private int numHeight;

    public TestCanvas() {
        try {

            this.setFullScreenMode(true);
            this.sreenHeight = this.getHeight();
            this.sreenWidth = this.getWidth();
       }
        catch(Exception e) {
            e.printStackTrace();
        }
    }

    protected void paint(Graphics g) {
        g.setColor(0xFFFFFF);
        g.fillRect(0,0,this.sreenWidth, this.sreenHeight);
        char[] chars = text.toCharArray();
        int h = 0;
        int w = 0;
        Font font  = g.getFont();
        g.setColor(0x00000);
        for(int i=0; i
            if(w > this.sreenWidth - 18){
                h += font.getHeight();
                w = 0;
            }
            g.drawChar(chars,w, h + this.regionY, Graphics.TOP | Graphics.LEFT);
            w += font.charWidth(chars);
        }
        if(this.numHeight == 0)
            this.numHeight = h+font.getHeight();

        this.scrollHeight = this.sreenHeight * this.sreenHeight/numHeight;
        this.scrollY = (-this.regionY)*this.sreenHeight/numHeight;

        g.setColor(255);
        g.fillRect(this.sreenWidth-6,0, 6, this.sreenHeight);

        g.setColor(0xFFFFFF);
         g.fillRect(this.sreenWidth-5,this.scrollY, 4, this.scrollHeight);
    }

     public void keyPressed(int keyCode) {
         System.out.println(keyCode);
         if(keyCode == -2){
             if(this.sreenHeight - this.regionY  > this.numHeight)
                 return;
             this.regionY -= 30;
         }
         else if (keyCode == -1){
             if(this.regionY>=0)
                 return;
             this.regionY += 30;
         }
         this.repaint();
     }