android 自定義ImageView實現圖片手勢滑動，多點觸控放大縮小效果

yangxi_001發表於2014-01-02
AndroidView

首先呢，還是一貫作風，我們先來看看眾多應用中的示例：(這種效果是很常見的，可以說應用的必須品.)

              

             搜狐客戶端                                    百度新聞客戶端                              新浪微博                              鳳凰新聞客戶端

也許大家對這些客戶端並不陌生，但是不知道大家有沒有注意到這些不足之處呢，這裡我就叨嘮嚇這些不人性化的地方.

首先搜狐：她的圖片放大後（未鋪滿螢幕）可以上下來回拖動，這點肯定是不允許的.感慨搜狐你在移動新聞界這麼有名氣，莫非是故意如此嗎？

百度客戶端：你看她的圖片不用我多說了吧，其實我還可以繼續在縮，這裡我要狠狠批判一下百度，因為你那麼牛叉的公司，為什麼這點bug就查不出來，使用者體驗相當不好.

新浪微博：她的圖片可以縮放到這個程度，沒有回縮動畫，我個人感覺最好有回縮動畫的，畢竟使用者不可能看你家圖的時候將之縮放成小圖看吧.（或許使用者在放大後想縮回原先圖片而此時縮回頭了，所以我們應該弄一個回縮動畫.）

鳳凰新聞客戶端: 這家應用更離譜，就沒有放大縮小等操作，就一個傻傻的圖片呆在那，更離譜的是我(無意)觸碰一下圖片就返回了.（我要是使用者的話，就先不說你家沒有放大縮小等操作吧，倘若我想仔細觀看這張美圖的話，我手指不小心觸碰一下，你Y的就給我關閉.大失雅興，還有就是我點選文章圖片切換到瀏覽圖片頁面時，你的載入頁面太醜了，我簡直看不下去，所以果斷卸掉.）

其實網上也有幾個做的比較好的，我沒有上圖,例如：騰訊微博，網易客戶端，新浪微博等.做的都相當不錯。

哈哈.說的有點過了，就叨嘮到此，下面我們看下應該如何實現這種效果.說之前我在絮叨一下，這篇文章本來是打算2012.12.31釋出的留個紀念，誰知這玩意我弄了一天沒有弄出來,後來放棄了，長時間沒有弄出來心情也沒有了，直到2013.01.04也就是昨天又接著弄了將近一天，到晚上11點了還沒有解決.一怒之下CF玩到1點睡覺去了.該死的破玩意想留個紀念也不讓.今天下午有時間就又接著搞.功夫不負有心人啊.沒想到解決了.我鬱悶了個去.所以這篇文章來之不易啊，如果看到該文章並且對你有幫助的話，記得贊一個.

網上文章雖多，但是這種效果少之又少.我真誠的獻上以供同根生的苦逼程式設計師.


實現原理：自定義ImageView對此控制元件進行相應的layout(動態佈局).


這裡你要明白幾個方法執行的流程： 首先ImageView是繼承自View的子類.

onLayout方法：是一個回撥方法.該方法會在在View中的layout方法中執行，在執行layout方法前面會首先執行setFrame方法.

setFrame方法：判斷我們的View是否發生變化，如果發生變化，那麼將最新的l，t，r，b傳遞給View，然後重新整理進行動態更新UI. 並且返回ture.沒有變化返回false.

在介紹自定義控制元件之前，我們先要明白我們要獲取哪些資料:螢幕的寬度，螢幕的高度.(這裡其實你也可以對LinerLayout進行ViewTreeObserver監聽獲取其寬高度.),原始圖片本身的寬度及高度.以及我們縮放的最大最小值.


首先我們要重寫setImageBitmap方法.作用：獲取圖片的寬高，求出縮放極限值.

[java] view plaincopy
  1. /*** 
  2.      * 設定顯示圖片 
  3.      */  
  4.     @Override  
  5.     public void setImageBitmap(Bitmap bm) {  
  6.         super.setImageBitmap(bm);  
  7.         /** 獲取圖片寬高 **/  
  8.         bitmap_W = bm.getWidth();  
  9.         bitmap_H = bm.getHeight();  
  10.   
  11.         MAX_W = bitmap_W * 3;  
  12.         MAX_H = bitmap_H * 3;  
  13.   
  14.         MIN_W = bitmap_W / 2;  
  15.         MIN_H = bitmap_H / 2;  
  16.   
  17.     }  

接著我們在onLayout方法中我們獲取最初的l,t,r,b.

[java] view plaincopy
  1. @Override  
  2.     protected void onLayout(boolean changed, int left, int top, int right,  
  3.             int bottom) {  
  4.         super.onLayout(changed, left, top, right, bottom);  
  5.         if (start_Top == -1) {  
  6.             start_Top = top;  
  7.             start_Left = left;  
  8.             start_Bottom = bottom;  
  9.             start_Right = right;  
  10.         }  
  11.   
  12.     }  

下面我們說下重點Touch方法.其實原來大家都明白，要說難的話估計就是邏輯實現了.

說之前大家要明白單點與多點的區別：

單手指操作：ACTION_DOWN---ACTION_MOVE----ACTION_UP

多手指操作：ACTION_DOWN---ACTION_POINTER_DOWN---ACTION_MOVE--ACTION_POINTER_UP---ACTION_UP.

上面只是簡單說下流程，詳細請大家自行研究，這裡只是講解如果運用.

[java] view plaincopy
  1. /*** 
  2.      * touch 事件 
  3.      */  
  4.     @Override  
  5.     public boolean onTouchEvent(MotionEvent event) {  
  6.         /** 處理單點、多點觸控 **/  
  7.         switch (event.getAction() & MotionEvent.ACTION_MASK) {  
  8.         case MotionEvent.ACTION_DOWN:  
  9.             onTouchDown(event);  
  10.             break;  
  11.         // 多點觸控  
  12.         case MotionEvent.ACTION_POINTER_DOWN:  
  13.             onPointerDown(event);  
  14.             break;  
  15.   
  16.         case MotionEvent.ACTION_MOVE:  
  17.             onTouchMove(event);  
  18.             break;  
  19.         case MotionEvent.ACTION_UP:  
  20.             mode = MODE.NONE;  
  21.             break;  
  22.   
  23.         // 多點鬆開  
  24.         case MotionEvent.ACTION_POINTER_UP:  
  25.             mode = MODE.NONE;  
  26.             /** 執行縮放還原 **/  
  27.             if (isScaleAnim) {  
  28.                 doScaleAnim();  
  29.             }  
  30.             break;  
  31.         }  
  32.   
  33.         return true;  
  34.     }  
這裡的實現我都分開寫了，利於大家的觀看，在這裡我順便說一下自定義控制元件返回值:如果對於沒有孩子的控制元件，如果要對Touch處理最好return true.這樣也是遊戲開發中經常用的，如果該控制元件有孩子的話，可不要這麼弄，不然孩子會監聽不到Touch事件.

下面我們一個一個方法的看:

onTouchDown：獲取手指點選時候的起始座標.

[java] view plaincopy
  1. /** 按下 **/  
  2.     void onTouchDown(MotionEvent event) {  
  3.         mode = MODE.DRAG;  
  4.   
  5.         current_x = (int) event.getRawX();  
  6.         current_y = (int) event.getRawY();  
  7.   
  8.         start_x = (int) event.getX();  
  9.         start_y = current_y - this.getTop();  
  10.   
  11.     }  
這裡大家也要明白 event.getRawX()和event.getX(),不過我相信大家都明白的，我前面那篇ListView拖拽也提到過.一個相對螢幕，一個相對父控制元件.

onPointerDown：兩手指之間的距離.

[java] view plaincopy
  1. /** 兩個手指 只能放大縮小 **/  
  2.     void onPointerDown(MotionEvent event) {  
  3.         if (event.getPointerCount() == 2) {  
  4.             mode = MODE.ZOOM;  
  5.             beforeLenght = getDistance(event);// 獲取兩點的距離  
  6.         }  
  7.     }  
onTouchMove:移動的處理.

[java] view plaincopy
  1. /** 移動的處理 **/  
  2. void onTouchMove(MotionEvent event) {  
  3.     int left = 0, top = 0, right = 0, bottom = 0;  
  4.     /** 處理拖動 **/  
  5.     if (mode == MODE.DRAG) {  
  6.   
  7.         /** 在這裡要進行判斷處理，防止在drag時候越界 **/  
  8.   
  9.         /** 獲取相應的l，t,r ,b **/  
  10.         left = current_x - start_x;  
  11.         right = current_x + this.getWidth() - start_x;  
  12.         top = current_y - start_y;  
  13.         bottom = current_y - start_y + this.getHeight();  
  14.   
  15.         /** 水平進行判斷 **/  
  16.         if (isControl_H) {  
  17.             if (left >= 0) {  
  18.                 left = 0;  
  19.                 right = this.getWidth();  
  20.             }  
  21.             if (right <= screen_W) {  
  22.                 left = screen_W - this.getWidth();  
  23.                 right = screen_W;  
  24.             }  
  25.         } else {  
  26.             left = this.getLeft();  
  27.             right = this.getRight();  
  28.         }  
  29.         /** 垂直判斷 **/  
  30.         if (isControl_V) {  
  31.             if (top >= 0) {  
  32.                 top = 0;  
  33.                 bottom = this.getHeight();  
  34.             }  
  35.   
  36.             if (bottom <= screen_H) {  
  37.                 top = screen_H - this.getHeight();  
  38.                 bottom = screen_H;  
  39.             }  
  40.         } else {  
  41.             top = this.getTop();  
  42.             bottom = this.getBottom();  
  43.         }  
  44.         if (isControl_H || isControl_V)  
  45.             this.setPosition(left, top, right, bottom);  
  46.   
  47.         current_x = (int) event.getRawX();  
  48.         current_y = (int) event.getRawY();  
  49.   
  50.     }  
  51.     /** 處理縮放 **/  
  52.     else if (mode == MODE.ZOOM) {  
  53.   
  54.         afterLenght = getDistance(event);// 獲取兩點的距離  
  55.   
  56.         float gapLenght = afterLenght - beforeLenght;// 變化的長度  
  57.   
  58.         if (Math.abs(gapLenght) > 5f) {  
  59.             scale_temp = afterLenght / beforeLenght;// 求的縮放的比例  
  60.   
  61.             this.setScale(scale_temp);  
  62.   
  63.             beforeLenght = afterLenght;  
  64.         }  
  65.     }  
  66.   
  67. }  
處理的邏輯比較繁多，但上訴程式碼大部分都已註釋,我相信大家都看得懂,大家可以掌握原理後可以進行自己的邏輯處理.

下面我們看下縮放處理，因為考慮到越界與否.

setScale方法：

[java] view plaincopy
  1. /** 處理縮放 **/  
  2.     void setScale(float scale) {  
  3.         int disX = (int) (this.getWidth() * Math.abs(1 - scale)) / 4;// 獲取縮放水平距離  
  4.         int disY = (int) (this.getHeight() * Math.abs(1 - scale)) / 4;// 獲取縮放垂直距離  
  5.   
  6.         // 放大  
  7.         if (scale > 1 && this.getWidth() <= MAX_W) {  
  8.             current_Left = this.getLeft() - disX;  
  9.             current_Top = this.getTop() - disY;  
  10.             current_Right = this.getRight() + disX;  
  11.             current_Bottom = this.getBottom() + disY;  
  12.   
  13.             this.setFrame(current_Left, current_Top, current_Right,  
  14.                     current_Bottom);  
  15.             /*** 
  16.              * 此時因為考慮到對稱，所以只做一遍判斷就可以了。 
  17.              */  
  18.             if (current_Top <= 0 && current_Bottom >= screen_H) {  
  19.                 Log.e("jj", "螢幕高度=" + this.getHeight());  
  20.                 isControl_V = true;// 開啟垂直監控  
  21.             } else {  
  22.                 isControl_V = false;  
  23.             }  
  24.             if (current_Left <= 0 && current_Right >= screen_W) {  
  25.                 isControl_H = true;// 開啟水平監控  
  26.             } else {  
  27.                 isControl_H = false;  
  28.             }  
  29.   
  30.         }  
  31.         // 縮小  
  32.         else if (scale < 1 && this.getWidth() >= MIN_W) {  
  33.             current_Left = this.getLeft() + disX;  
  34.             current_Top = this.getTop() + disY;  
  35.             current_Right = this.getRight() - disX;  
  36.             current_Bottom = this.getBottom() - disY;  
  37.             /*** 
  38.              * 在這裡要進行縮放處理 
  39.              */  
  40.             // 上邊越界  
  41.             if (isControl_V && current_Top > 0) {  
  42.                 current_Top = 0;  
  43.                 current_Bottom = this.getBottom() - 2 * disY;  
  44.                 if (current_Bottom < screen_H) {  
  45.                     current_Bottom = screen_H;  
  46.                     isControl_V = false;// 關閉垂直監聽  
  47.                 }  
  48.             }  
  49.             // 下邊越界  
  50.             if (isControl_V && current_Bottom < screen_H) {  
  51.                 current_Bottom = screen_H;  
  52.                 current_Top = this.getTop() + 2 * disY;  
  53.                 if (current_Top > 0) {  
  54.                     current_Top = 0;  
  55.                     isControl_V = false;// 關閉垂直監聽  
  56.                 }  
  57.             }  
  58.   
  59.             // 左邊越界  
  60.             if (isControl_H && current_Left >= 0) {  
  61.                 current_Left = 0;  
  62.                 current_Right = this.getRight() - 2 * disX;  
  63.                 if (current_Right <= screen_W) {  
  64.                     current_Right = screen_W;  
  65.                     isControl_H = false;// 關閉  
  66.                 }  
  67.             }  
  68.             // 右邊越界  
  69.             if (isControl_H && current_Right <= screen_W) {  
  70.                 current_Right = screen_W;  
  71.                 current_Left = this.getLeft() + 2 * disX;  
  72.                 if (current_Left >= 0) {  
  73.                     current_Left = 0;  
  74.                     isControl_H = false;// 關閉  
  75.                 }  
  76.             }  
  77.   
  78.             if (isControl_H || isControl_V) {  
  79.                 this.setFrame(current_Left, current_Top, current_Right,  
  80.                         current_Bottom);  
  81.             } else {  
  82.                 this.setFrame(current_Left, current_Top, current_Right,  
  83.                         current_Bottom);  
  84.                 isScaleAnim = true;// 開啟縮放動畫  
  85.             }  
  86.   
  87.         }  
  88.   
  89.     }  
首先我們先看下放大方法：這裡面我們要時時監聽水平或垂直是否已經鋪滿（該其實應說成佈局），如果鋪滿或超過那麼對應的水平或垂直方向就可以進行託移.程式碼註釋很清晰大家可以看上面註釋.

接下來我們看下縮小，這個相對複雜了一點。首先我們要考慮到放大後的託移，這樣的話我們在進行縮小的時候肯定l,t,r,b她們不會同時縮到螢幕邊界，因此此時就要進行處理，如果一方先縮到螢幕邊界的話，那麼你就停下來等等你的對面（記住此時你對面縮放的速率是原來的2倍，不然圖片會變形的.大家自己想想看是不是），等到你對面也縮到螢幕邊界的話，此時要關閉監聽.然後你們兩個在一起縮.原理就是這樣.

不太明白的話，大家可以看上訴程式碼，我相信大家都看的明白.

最後我們還要實現縮放回縮效果（比較人性化.）

剛開始我想到了ScaleAnimation，可是實現一半問題出現了，我回縮動畫完畢後她又自動回到最初大小，也許你會說你少加了setFillAfter(true); 可是加了後會出現詭異現象：又會重新覆蓋一層，原因不明，大家可以試試看.既然API給的動畫實現不了，那我就自己做吧.下面看具體實現.

MyAsyncTask非同步類.

[java] view plaincopy
  1. /*** 
  2.      * 回縮動畫執行 
  3.      */  
  4.     class MyAsyncTask extends AsyncTask<Void, Integer, Void> {  
  5.         private int screen_W, current_Width, current_Height;  
  6.   
  7.         private int left, top, right, bottom;  
  8.   
  9.         private float scale_WH;// 寬高的比例  
  10.   
  11.         /** 當前的位置屬性 **/  
  12.         public void setLTRB(int left, int top, int right, int bottom) {  
  13.             this.left = left;  
  14.             this.top = top;  
  15.             this.right = right;  
  16.             this.bottom = bottom;  
  17.         }  
  18.   
  19.         private float STEP = 5f;// 步伐  
  20.   
  21.         private float step_H, step_V;// 水平步伐，垂直步伐  
  22.   
  23.         public MyAsyncTask(int screen_W, int current_Width, int current_Height) {  
  24.             super();  
  25.             this.screen_W = screen_W;  
  26.             this.current_Width = current_Width;  
  27.             this.current_Height = current_Height;  
  28.             scale_WH = (float) current_Height / current_Width;  
  29.             step_H = STEP;  
  30.             step_V = scale_WH * STEP;  
  31.         }  
  32.   
  33.         @Override  
  34.         protected Void doInBackground(Void... params) {  
  35.   
  36.             while (current_Width <= screen_W) {  
  37.   
  38.                 left -= step_H;  
  39.                 top -= step_V;  
  40.                 right += step_H;  
  41.                 bottom += step_V;  
  42.   
  43.                 current_Width += 2 * step_H;  
  44.   
  45.                 left = Math.max(left, start_Left);  
  46.                 top = Math.max(top, start_Top);  
  47.                 right = Math.min(right, start_Right);  
  48.                 bottom = Math.min(bottom, start_Bottom);  
  49.   
  50.                 onProgressUpdate(new Integer[] { left, top, right, bottom });  
  51.                 try {  
  52.                     Thread.sleep(10);  
  53.                 } catch (InterruptedException e) {  
  54.                     e.printStackTrace();  
  55.                 }  
  56.             }  
  57.   
  58.             return null;  
  59.         }  
  60.   
  61.         @Override  
  62.         protected void onProgressUpdate(final Integer... values) {  
  63.             super.onProgressUpdate(values);  
  64.             mActivity.runOnUiThread(new Runnable() {  
  65.                 @Override  
  66.                 public void run() {  
  67.                     setFrame(values[0], values[1], values[2], values[3]);  
  68.                 }  
  69.             });  
  70.   
  71.         }  
  72.   
  73.     }  
這個我就不詳細講解了，大家要注意的是水平和垂直方向的速率.

最後我們看下佈局，呼叫也相當簡單，也有助於我們新增輔助UI，千萬不要忘記寫 android:scaleType="fitXY"這句話，不然有時候會出現詭異現象.

[java] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:gravity="center" >  
  6.   
  7.     <com.jj.drag.DragImageView  
  8.         android:id="@+id/div_main"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"   
  11.         android:scaleType="fitXY"  
  12.         />  
  13.   
  14. </LinearLayout>  

在Acitivity中呼叫：

[java] view plaincopy
  1. /** 測量狀態列高度 **/  
  2.         viewTreeObserver = dragImageView.getViewTreeObserver();  
  3.         viewTreeObserver  
  4.                 .addOnGlobalLayoutListener(new OnGlobalLayoutListener() {  
  5.   
  6.                     @Override  
  7.                     public void onGlobalLayout() {  
  8.                         if (state_height == 0) {  
  9.                             // 獲取狀況欄高度  
  10.                             Rect frame = new Rect();  
  11.                             getWindow().getDecorView()  
  12.                                     .getWindowVisibleDisplayFrame(frame);  
  13.                             state_height = frame.top;  
  14.                             dragImageView.setScreen_H(window_height-state_height);  
  15.                             dragImageView.setScreen_W(window_width);  
  16.                         }  
  17.   
  18.                     }  
  19.                 });  


以上就是全部實現.最後我們看下實現的效果吧.

                      

            原圖大小                                    放大後拖拽到左上角                      縮小後（鬆開會回縮）                   （長大於寬的圖片）


感覺執行的效果還行，和騰訊新浪的差不多.至於輔助UI元素，大家可以自行修改新增，這裡我只是把這種形式的實現獻給大家.


在這裡我將原始碼上傳，如有不明白之處，你可以下載執行檢視，我相信大家都能夠明白的.如有不足之處，大家自行修改。切記分享!


原始碼下載

相關文章