Android自定義imageview可對圖片進行多點縮放和拖動
阿新 • • 發佈：2019-02-09
程式碼中的註釋寫的非常詳細了，可以根據自己專案需求進行修改package com.msstudent.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Matrix; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.widget.ImageView; /** * 自定義的ImageView控制，可對圖片進行多點觸控縮放和拖動 * */ public class ZoomImageView extends ImageView { /** * 初始化狀態常量 */ public static final int STATUS_INIT = 1; /** * 圖片放大狀態常量 */ public static final int STATUS_ZOOM_OUT = 2; /** * 圖片縮小狀態常量 */ public static final int STATUS_ZOOM_IN = 3; /** * 圖片拖動狀態常量 */ public static final int STATUS_MOVE = 4; /** * 用於對圖片進行移動和縮放變換的矩陣 */ private Matrix matrix = new Matrix(); /** * 待展示的Bitmap物件 */ private Bitmap sourceBitmap; /** * 記錄當前操作的狀態，可選值為STATUS_INIT、STATUS_ZOOM_OUT、STATUS_ZOOM_IN和STATUS_MOVE */ private int currentStatus; /** * ZoomImageView控制元件的寬度 */ private int width; /** * ZoomImageView控制元件的高度 */ private int height; /** * 記錄兩指同時放在螢幕上時，中心點的橫座標值 */ private float centerPointX; /** * 記錄兩指同時放在螢幕上時，中心點的縱座標值 */ private float centerPointY; /** * 記錄當前圖片的寬度，圖片被縮放時，這個值會一起變動 */ private float currentBitmapWidth; /** * 記錄當前圖片的高度，圖片被縮放時，這個值會一起變動 */ private float currentBitmapHeight; /** * 記錄上次手指移動時的橫座標 */ private float lastXMove = -1; /** * 記錄上次手指移動時的縱座標 */ private float lastYMove = -1; /** * 記錄手指在橫座標方向上的移動距離 */ private float movedDistanceX; /** * 記錄手指在縱座標方向上的移動距離 */ private float movedDistanceY; /** * 記錄圖片在矩陣上的橫向偏移值 */ private float totalTranslateX; /** * 記錄圖片在矩陣上的縱向偏移值 */ private float totalTranslateY; /** * 記錄圖片在矩陣上的總縮放比例 */ private float totalRatio; /** * 記錄手指移動的距離所造成的縮放比例 */ private float scaledRatio; /** * 記錄圖片初始化時的縮放比例 */ private float initRatio; /** * 記錄上次兩指之間的距離 */ private double lastFingerDis; /** * ZoomImageView建構函式，將當前操作狀態設為STATUS_INIT。 * * @param context * @param attrs */ public ZoomImageView(Context context, AttributeSet attrs) { super(context, attrs); currentStatus = STATUS_INIT; } /** * 將待展示的圖片設定進來。 * * @param bitmap * 待展示的Bitmap物件 */ public void setImageBitmap(Bitmap bitmap) { sourceBitmap = bitmap; invalidate(); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (changed) { // 分別獲取到ZoomImageView的寬度和高度 width = getWidth(); height = getHeight(); } } @Override public boolean onTouchEvent(MotionEvent event) { if (initRatio == totalRatio) { getParent().requestDisallowInterceptTouchEvent(false); } else { getParent().requestDisallowInterceptTouchEvent(true); } switch (event.getActionMasked()) { case MotionEvent.ACTION_POINTER_DOWN: if (event.getPointerCount() == 2) { // 當有兩個手指按在螢幕上時，計算兩指之間的距離 lastFingerDis = distanceBetweenFingers(event); } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_MOVE: if (event.getPointerCount() == 1) { // 只有單指按在螢幕上移動時，為拖動狀態 float xMove = event.getX(); float yMove = event.getY(); if (lastXMove == -1 && lastYMove == -1) { lastXMove = xMove; lastYMove = yMove; } currentStatus = STATUS_MOVE; movedDistanceX = xMove - lastXMove; movedDistanceY = yMove - lastYMove; // 進行邊界檢查，不允許將圖片拖出邊界 if (totalTranslateX + movedDistanceX > 0) { movedDistanceX = 0; } else if (width - (totalTranslateX + movedDistanceX) > currentBitmapWidth) { movedDistanceX = 0; } if (totalTranslateY + movedDistanceY > 0) { movedDistanceY = 0; } else if (height - (totalTranslateY + movedDistanceY) > currentBitmapHeight) { movedDistanceY = 0; } // 呼叫onDraw()方法繪製圖片 invalidate(); lastXMove = xMove; lastYMove = yMove; } else if (event.getPointerCount() == 2) { // 有兩個手指按在螢幕上移動時，為縮放狀態 centerPointBetweenFingers(event); double fingerDis = distanceBetweenFingers(event); if (fingerDis > lastFingerDis) { currentStatus = STATUS_ZOOM_OUT; } else { currentStatus = STATUS_ZOOM_IN; } // 進行縮放倍數檢查，最大隻允許將圖片放大4倍，最小可以縮小到初始化比例 if ((currentStatus == STATUS_ZOOM_OUT && totalRatio < 4 * initRatio) || (currentStatus == STATUS_ZOOM_IN && totalRatio > initRatio)) { scaledRatio = (float) (fingerDis / lastFingerDis); totalRatio = totalRatio * scaledRatio; if (totalRatio > 4 * initRatio) { totalRatio = 4 * initRatio; } else if (totalRatio < initRatio) { totalRatio = initRatio; } // 呼叫onDraw()方法繪製圖片 invalidate(); lastFingerDis = fingerDis; } } break; case MotionEvent.ACTION_POINTER_UP: if (event.getPointerCount() == 2) { // 手指離開螢幕時將臨時值還原 lastXMove = -1; lastYMove = -1; } break; case MotionEvent.ACTION_UP: // 手指離開螢幕時將臨時值還原 lastXMove = -1; lastYMove = -1; break; default: break; } return true; } /** * 根據currentStatus的值來決定對圖片進行什麼樣的繪製操作。 */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (currentStatus) { case STATUS_ZOOM_OUT: case STATUS_ZOOM_IN: zoom(canvas); break; case STATUS_MOVE: move(canvas); break; case STATUS_INIT: initBitmap(canvas); default: if (sourceBitmap != null) { canvas.drawBitmap(sourceBitmap, matrix, null); } break; } } /** * 對圖片進行縮放處理。 * * @param canvas */ private void zoom(Canvas canvas) { matrix.reset(); // 將圖片按總縮放比例進行縮放 matrix.postScale(totalRatio, totalRatio); float scaledWidth = sourceBitmap.getWidth() * totalRatio; float scaledHeight = sourceBitmap.getHeight() * totalRatio; float translateX = 0f; float translateY = 0f; // 如果當前圖片寬度小於螢幕寬度，則按螢幕中心的橫座標進行水平縮放。否則按兩指的中心點的橫座標進行水平縮放 if (currentBitmapWidth < width) { translateX = (width - scaledWidth) / 2f; } else { translateX = totalTranslateX * scaledRatio + centerPointX * (1 - scaledRatio); // 進行邊界檢查，保證圖片縮放後在水平方向上不會偏移出螢幕 if (translateX > 0) { translateX = 0; } else if (width - translateX > scaledWidth) { translateX = width - scaledWidth; } } // 如果當前圖片高度小於螢幕高度，則按螢幕中心的縱座標進行垂直縮放。否則按兩指的中心點的縱座標進行垂直縮放 if (currentBitmapHeight < height) { translateY = (height - scaledHeight) / 2f; } else { translateY = totalTranslateY * scaledRatio + centerPointY * (1 - scaledRatio); // 進行邊界檢查，保證圖片縮放後在垂直方向上不會偏移出螢幕 if (translateY > 0) { translateY = 0; } else if (height - translateY > scaledHeight) { translateY = height - scaledHeight; } } // 縮放後對圖片進行偏移，以保證縮放後中心點位置不變 matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; currentBitmapWidth = scaledWidth; currentBitmapHeight = scaledHeight; canvas.drawBitmap(sourceBitmap, matrix, null); } /** * 對圖片進行平移處理 * * @param canvas */ private void move(Canvas canvas) { matrix.reset(); // 根據手指移動的距離計算出總偏移值 float translateX = totalTranslateX + movedDistanceX; float translateY = totalTranslateY + movedDistanceY; // 先按照已有的縮放比例對圖片進行縮放 matrix.postScale(totalRatio, totalRatio); // 再根據移動距離進行偏移 matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; canvas.drawBitmap(sourceBitmap, matrix, null); } /** * 對圖片進行初始化操作，包括讓圖片居中，以及當圖片大於螢幕寬高時對圖片進行壓縮。 * * @param canvas */ private void initBitmap(Canvas canvas) { if (sourceBitmap != null) { matrix.reset(); int bitmapWidth = sourceBitmap.getWidth(); int bitmapHeight = sourceBitmap.getHeight(); if (bitmapWidth > width || bitmapHeight > height) { if (bitmapWidth - width > bitmapHeight - height) { // 當圖片寬度大於螢幕寬度時，將圖片等比例壓縮，使它可以完全顯示出來 float ratio = width / (bitmapWidth * 1.0f); matrix.postScale(ratio, ratio); float translateY = (height - (bitmapHeight * ratio)) / 2f; // 在縱座標方向上進行偏移，以保證圖片居中顯示 matrix.postTranslate(0, translateY); totalTranslateY = translateY; totalRatio = initRatio = ratio; } else { // 當圖片高度大於螢幕高度時，將圖片等比例壓縮，使它可以完全顯示出來 float ratio = height / (bitmapHeight * 1.0f); matrix.postScale(ratio, ratio); float translateX = (width - (bitmapWidth * ratio)) / 2f; // 在橫座標方向上進行偏移，以保證圖片居中顯示 matrix.postTranslate(translateX, 0); totalTranslateX = translateX; totalRatio = initRatio = ratio; } currentBitmapWidth = bitmapWidth * initRatio; currentBitmapHeight = bitmapHeight * initRatio; } else { // 當圖片的寬高都小於螢幕寬高時，直接讓圖片居中顯示 float translateX = (width - sourceBitmap.getWidth()) / 2f; float translateY = (height - sourceBitmap.getHeight()) / 2f; matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; totalRatio = initRatio = 1f; currentBitmapWidth = bitmapWidth; currentBitmapHeight = bitmapHeight; } canvas.drawBitmap(sourceBitmap, matrix, null); } } /** * 計算兩個手指之間的距離。 * * @param event * @return 兩個手指之間的距離 */ private double distanceBetweenFingers(MotionEvent event) { float disX = Math.abs(event.getX(0) - event.getX(1)); float disY = Math.abs(event.getY(0) - event.getY(1)); return Math.sqrt(disX * disX + disY * disY); } /** * 計算兩個手指之間中心點的座標。 * * @param event */ private void centerPointBetweenFingers(MotionEvent event) { float xPoint0 = event.getX(0); float yPoint0 = event.getY(0); float xPoint1 = event.getX(1); float yPoint1 = event.getY(1); centerPointX = (xPoint0 + xPoint1) / 2; centerPointY = (yPoint0 + yPoint1) / 2; } }