網上文章雖多,但是這種效果少之又少,我真誠的獻上以供大家參考
實現原理:自定義ImageView對此控件進行相應的layout(動態布局).
這里你要明白幾個方法執行的流程:
首先ImageView是繼承自View的子類.
onLayout方法:是一個回調方法.該方法會在在View中的layout方法中執行,在執行layout方法前面會首先執行setFrame方法.
setFrame方法:判斷我們的View是否發生變化,如果發生變化,那么將最新的l,t,r,b傳遞給View,然后刷新進行動態更新UI. 并且返回ture.沒有變化返回false.
在介紹自定義控件之前,我們先要明白我們要獲取哪些數據:屏幕的寬度,屏幕的高度.(這里其實你也可以對LinerLayout進行ViewTreeObserver監聽獲取其寬高度.),原始圖片本身的寬度及高度.以及我們縮放的最大最小值.
首先我們要重寫setImageBitmap方法.作用:獲取圖片的寬高,求出縮放極限值.
/*** * 設置顯示圖片 */ @Override public void setImageBitmap(Bitmap bm) { super.setImageBitmap(bm); /** 獲取圖片寬高 **/ bitmap_W = bm.getWidth(); bitmap_H = bm.getHeight(); MAX_W = bitmap_W * 3; MAX_H = bitmap_H * 3; MIN_W = bitmap_W / 2; MIN_H = bitmap_H / 2; }接著我們在onLayout方法中我們獲取最初的l,t,r,b.
@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (start_Top == -1) { start_Top = top; start_Left = left; start_Bottom = bottom; start_Right = right; } } 下面我們說下重點Touch方法.其實原來大家都明白,要說難的話估計就是邏輯實現了.
說之前大家要明白單點與多點的區別:
單手指操作:ACTION_DOWN---ACTION_MOVE----ACTION_UP
多手指操作:ACTION_DOWN---ACTION_POINTER_DOWN---ACTION_MOVE--ACTION_POINTER_UP---ACTION_UP.
上面只是簡單說下流程,詳細請大家自行研究,這里只是講解如果運用.
/*** * touch 事件 */ @Override public boolean onTouchEvent(MotionEvent event) { /** 處理單點、多點觸摸 **/ switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: onTouchDown(event); break; // 多點觸摸 case MotionEvent.ACTION_POINTER_DOWN: onPointerDown(event); break; case MotionEvent.ACTION_MOVE: onTouchMove(event); break; case MotionEvent.ACTION_UP: mode = MODE.NONE; break; // 多點松開 case MotionEvent.ACTION_POINTER_UP: mode = MODE.NONE; /** 執行縮放還原 **/ if (isScaleAnim) { doScaleAnim(); } break; } return true; } 這里的實現我都分開寫了,利于大家的觀看,在這里我順便說一下自定義控件返回值:如果對于沒有孩子的控件,如果要對Touch處理最好return true.這樣也是游戲開發中經常用的,如果該控件有孩子的話,可不要這么弄,不然孩子會監聽不到Touch事件.
下面我們一個一個方法的看:
onTouchDown:獲取手指點擊時候的起始坐標.
/** 按下 **/ void onTouchDown(MotionEvent event) { mode = MODE.DRAG; current_x = (int) event.getRawX(); current_y = (int) event.getRawY(); start_x = (int) event.getX(); start_y = current_y - this.getTop(); } 這里大家也要明白 event.getRawX()和event.getX(),不過我相信大家都明白的,我前面那篇ListView拖拽也提到過.一個相對屏幕,一個相對父控件.
onPointerDown:兩手指之間的距離.
/** 兩個手指 只能放大縮小 **/ void onPointerDown(MotionEvent event) { if (event.getPointerCount() == 2) { mode = MODE.ZOOM; beforeLenght = getDistance(event);// 獲取兩點的距離 } } onTouchMove:移動的處理.
/** 移動的處理 **/ void onTouchMove(MotionEvent event) { int left = 0, top = 0, right = 0, bottom = 0; /** 處理拖動 **/ if (mode == MODE.DRAG) { /** 在這里要進行判斷處理,防止在drag時候越界 **/ /** 獲取相應的l,t,r ,b **/ left = current_x - start_x; right = current_x + this.getWidth() - start_x; top = current_y - start_y; bottom = current_y - start_y + this.getHeight(); /** 水平進行判斷 **/ if (isControl_H) { if (left >= 0) { left = 0; right = this.getWidth(); } if (right <= screen_W) { left = screen_W - this.getWidth(); right = screen_W; } } else { left = this.getLeft(); right = this.getRight(); } /** 垂直判斷 **/ if (isControl_V) { if (top >= 0) { top = 0; bottom = this.getHeight(); } if (bottom <= screen_H) { top = screen_H - this.getHeight(); bottom = screen_H; } } else { top = this.getTop(); bottom = this.getBottom(); } if (isControl_H || isControl_V) this.setPosition(left, top, right, bottom); current_x = (int) event.getRawX(); current_y = (int) event.getRawY(); } /** 處理縮放 **/ else if (mode == MODE.ZOOM) { afterLenght = getDistance(event);// 獲取兩點的距離 float gapLenght = afterLenght - beforeLenght;// 變化的長度 if (Math.abs(gapLenght) > 5f) { scale_temp = afterLenght / beforeLenght;// 求的縮放的比例 this.setScale(scale_temp); beforeLenght = afterLenght; } } } 處理的邏輯比較繁多,但上訴代碼大部分都已注釋,我相信大家都看得懂,大家可以掌握原理后可以進行自己的邏輯處理.
下面我們看下縮放處理,因為考慮到越界與否.
setScale方法:
/** 處理縮放 **/ void setScale(float scale) { int disX = (int) (this.getWidth() * Math.abs(1 - scale)) / 4;// 獲取縮放水平距離 int disY = (int) (this.getHeight() * Math.abs(1 - scale)) / 4;// 獲取縮放垂直距離 // 放大 if (scale > 1 && this.getWidth() <= MAX_W) { current_Left = this.getLeft() - disX; current_Top = this.getTop() - disY; current_Right = this.getRight() + disX; current_Bottom = this.getBottom() + disY; this.setFrame(current_Left, current_Top, current_Right, current_Bottom); /*** * 此時因為考慮到對稱,所以只做一遍判斷就可以了。 */ if (current_Top <= 0 && current_Bottom >= screen_H) { Log.e("jj", "屏幕高度=" + this.getHeight()); isControl_V = true;// 開啟垂直監控 } else { isControl_V = false; } if (current_Left <= 0 && current_Right >= screen_W) { isControl_H = true;// 開啟水平監控 } else { isControl_H = false; } } // 縮小 else if (scale < 1 && this.getWidth() >= MIN_W) { current_Left = this.getLeft() + disX; current_Top = this.getTop() + disY; current_Right = this.getRight() - disX; current_Bottom = this.getBottom() - disY; /*** * 在這里要進行縮放處理 */ // 上邊越界 if (isControl_V && current_Top > 0) { current_Top = 0; current_Bottom = this.getBottom() - 2 * disY; if (current_Bottom < screen_H) { current_Bottom = screen_H; isControl_V = false;// 關閉垂直監聽 } } // 下邊越界 if (isControl_V && current_Bottom < screen_H) { current_Bottom = screen_H; current_Top = this.getTop() + 2 * disY; if (current_Top > 0) { current_Top = 0; isControl_V = false;// 關閉垂直監聽 } } // 左邊越界 if (isControl_H && current_Left >= 0) { current_Left = 0; current_Right = this.getRight() - 2 * disX; if (current_Right <= screen_W) { current_Right = screen_W; isControl_H = false;// 關閉 } } // 右邊越界 if (isControl_H && current_Right <= screen_W) { current_Right = screen_W; current_Left = this.getLeft() + 2 * disX; if (current_Left >= 0) { current_Left = 0; isControl_H = false;// 關閉 } } if (isControl_H || isControl_V) { this.setFrame(current_Left, current_Top, current_Right, current_Bottom); } else { this.setFrame(current_Left, current_Top, current_Right, current_Bottom); isScaleAnim = true;// 開啟縮放動畫 } } } 首先我們先看下放大方法:這里面我們要時時監聽水平或垂直是否已經鋪滿(該其實應說成布局),如果鋪滿或超過那么對應的水平或垂直方向就可以進行托移.代碼注釋很清晰大家可以看上面注釋.
接下來我們看下縮小,這個相對復雜了一點。首先我們要考慮到放大后的托移,這樣的話我們在進行縮小的時候肯定l,t,r,b她們不會同時縮到屏幕邊界,因此此時就要進行處理,如果一方先縮到屏幕邊界的話,那么你就停下來等等你的對面(記住此時你對面縮放的速率是原來的2倍,不然圖片會變形的.大家自己想想看是不是),等到你對面也縮到屏幕邊界的話,此時要關閉監聽.然后你們兩個在一起縮.原理就是這樣.
不太明白的話,大家可以看上述代碼,我相信大家都看的明白.
最后我們還要實現縮放回縮效果(比較人性化.)
剛開始我想到了ScaleAnimation,可是實現一半問題出現了,我回縮動畫完畢后她又自動回到最初大小,也許你會說你少加了setFillAfter(true); 可是加了后會出現詭異現象:又會重新覆蓋一層,原因不明,大家可以試試看.既然API給的動畫實現不了,那我就自己做吧.下面看具體實現.
MyAsyncTask異步類.