Android實現大圖的滾動顯示

問題:

       我有一張比較大的圖片,比如長寬都是屏幕的兩倍大小,我想實現的功能是首先將圖片居中顯示,由於圖片太大顯然隻能顯示一部分,然後可以通過拖動,實現圖片的平滑滾動(既看不出來滾動刷新痕跡)。

       就像google地圖一樣,如果用mapView這個控件,那麼可以在屏幕上拖動整個地圖,但是由於地圖信息量太大,如果一次拖動過快,那麼屏幕會暫時顯示出一些刷新痕跡(灰白的格子)。

       想使用mapView來加載已有圖片,但是沒有成功,後來也使用瞭Srollview控件,和最常用的imageView,還是沒有成功。

 

解決:

       經過大量查資料,使用imageView配合onTouch事件,可以解決。

關鍵代碼:

       佈局文件中imageView控件如下

[html] <span style="font-size:16px;"><ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/img" 
    android:scaleType="center" 
    android:background="#fff" 
    android:src="@drawable/picName" 
/> 
</span> 
<span style="font-size:16px;"><ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/img"
    android:scaleType="center"
    android:background="#fff"
    android:src="@drawable/picName"
/>
</span>

 

       Activity文件中主要代碼如下

 

[java] <span style="font-size:16px;">@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
 
    setContentView(R.layout.xml_name_layout); 
 
    final ImageView switcherView = (ImageView) this.findViewById(R.id.img); 
 
    switcherView.setOnTouchListener(new View.OnTouchListener() { 
 
        public boolean onTouch(View arg0, MotionEvent event) { 
 
            float curX, curY; 
 
            switch (event.getAction()) { 
 
                case MotionEvent.ACTION_DOWN: 
                    mx = event.getX(); 
                    my = event.getY(); 
                    break; 
                case MotionEvent.ACTION_MOVE: 
                    curX = event.getX(); 
                    curY = event.getY(); 
                    switcherView.scrollBy((int) (mx – curX), (int) (my – curY)); 
                    mx = curX; 
                    my = curY; 
                    break; 
                case MotionEvent.ACTION_UP: 
                    curX = event.getX(); 
                    curY = event.getY(); 
                    switcherView.scrollBy((int) (mx – curX), (int) (my – curY)); 
                    break; 
            } 
 
            return true; 
        } 
    }); 
 

</span> 
<span style="font-size:16px;">@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.xml_name_layout);

    final ImageView switcherView = (ImageView) this.findViewById(R.id.img);

    switcherView.setOnTouchListener(new View.OnTouchListener() {

        public boolean onTouch(View arg0, MotionEvent event) {

            float curX, curY;

            switch (event.getAction()) {

                case MotionEvent.ACTION_DOWN:
                    mx = event.getX();
                    my = event.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    curX = event.getX();
                    curY = event.getY();
                    switcherView.scrollBy((int) (mx – curX), (int) (my – curY));
                    mx = curX;
                    my = curY;
                    break;
                case MotionEvent.ACTION_UP:
                    curX = event.getX();
                    curY = event.getY();
                    switcherView.scrollBy((int) (mx – curX), (int) (my – curY));
                    break;
            }

            return true;
        }
    });

}
</span>

 

實現效果如下:

  原圖
 

 
模擬器裡效果
 

 

 

摘自 北京大學-Google Android實驗室
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。