Android通過自定義ImageView控件實(shí)現(xiàn)圖片的縮放和拖動的實(shí)現(xiàn)代碼
概述:通過自定義ImageView控件,在xml布局里面調(diào)用自定的組件實(shí)現(xiàn)圖片的縮放。
/** * 自定義的ImageView控制,可對圖片進(jìn)行多點(diǎn)觸控縮放和拖動 * * @author qiuwanyong */ public class MyImageView extends ImageView { /** * 初始化狀態(tài)常量 */ public static final int STATUS_INIT = 1; /** * 圖片放大狀態(tài)常量 */ public static final int STATUS_ZOOM_OUT = 2; /** * 圖片縮小狀態(tài)常量 */ public static final int STATUS_ZOOM_IN = 3; /** * 圖片拖動狀態(tài)常量 */ public static final int STATUS_MOVE = 4; /** * 用于對圖片進(jìn)行移動和縮放變換的矩陣 */ private Matrix matrix = new Matrix(); /** * 待展示的Bitmap對象 */ private Bitmap sourceBitmap; /** * 記錄當(dāng)前操作的狀態(tài),可選值為STATUS_INIT、STATUS_ZOOM_OUT、STATUS_ZOOM_IN和STATUS_MOVE */ private int currentStatus; /** * ZoomImageView控件的寬度 */ private int width; /** * ZoomImageView控件的高度 */ private int height; /** * 記錄兩指同時(shí)放在屏幕上時(shí),中心點(diǎn)的橫坐標(biāo)值 */ private float centerPointX; /** * 記錄兩指同時(shí)放在屏幕上時(shí),中心點(diǎn)的縱坐標(biāo)值 */ private float centerPointY; /** * 記錄當(dāng)前圖片的寬度,圖片被縮放時(shí),這個(gè)值會一起變動 */ private float currentBitmapWidth; /** * 記錄當(dāng)前圖片的高度,圖片被縮放時(shí),這個(gè)值會一起變動 */ private float currentBitmapHeight; /** * 記錄上次手指移動時(shí)的橫坐標(biāo) */ private float lastXMove = -1; /** * 記錄上次手指移動時(shí)的縱坐標(biāo) */ private float lastYMove = -1; /** * 記錄手指在橫坐標(biāo)方向上的移動距離 */ private float movedDistanceX; /** * 記錄手指在縱坐標(biāo)方向上的移動距離 */ private float movedDistanceY; /** * 記錄圖片在矩陣上的橫向偏移值 */ private float totalTranslateX; /** * 記錄圖片在矩陣上的縱向偏移值 */ private float totalTranslateY; /** * 記錄圖片在矩陣上的總縮放比例 */ private float totalRatio; /** * 記錄手指移動的距離所造成的縮放比例 */ private float scaledRatio; /** * 記錄圖片初始化時(shí)的縮放比例 */ private float initRatio; /** * 記錄上次兩指之間的距離 */ private double lastFingerDis; /** * ZoomImageView構(gòu)造函數(shù),將當(dāng)前操作狀態(tài)設(shè)為STATUS_INIT。 * * @param context * @param attrs */ public MyImageView(Context context, AttributeSet attrs) { super(context, attrs); currentStatus = STATUS_INIT; } /** * 將待展示的圖片設(shè)置進(jìn)來。 * * @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(); } } @SuppressLint("NewApi") @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) { // 當(dāng)有兩個(gè)手指按在屏幕上時(shí),計(jì)算兩指之間的距離 lastFingerDis = distanceBetweenFingers(event); } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_MOVE: if (event.getPointerCount() == 1) { // 只有單指按在屏幕上移動時(shí),為拖動狀態(tài) 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; // 進(jìn)行邊界檢查,不允許將圖片拖出邊界 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; } // 調(diào)用onDraw()方法繪制圖片 invalidate(); lastXMove = xMove; lastYMove = yMove; } else if (event.getPointerCount() == 2) { // 有兩個(gè)手指按在屏幕上移動時(shí),為縮放狀態(tài) centerPointBetweenFingers(event); double fingerDis = distanceBetweenFingers(event); if (fingerDis > lastFingerDis) { currentStatus = STATUS_ZOOM_OUT; } else { currentStatus = STATUS_ZOOM_IN; } // 進(jìn)行縮放倍數(shù)檢查,最大只允許將圖片放大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; } // 調(diào)用onDraw()方法繪制圖片 invalidate(); lastFingerDis = fingerDis; } } break; case MotionEvent.ACTION_POINTER_UP: if (event.getPointerCount() == 2) { // 手指離開屏幕時(shí)將臨時(shí)值還原 lastXMove = -1; lastYMove = -1; } break; case MotionEvent.ACTION_UP: // 手指離開屏幕時(shí)將臨時(shí)值還原 lastXMove = -1; lastYMove = -1; break; default: break; } return true; } /** * 根據(jù)currentStatus的值來決定對圖片進(jìn)行什么樣的繪制操作。 */ @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; } } /** * 對圖片進(jìn)行縮放處理。 * * @param canvas */ private void zoom(Canvas canvas) { matrix.reset(); // 將圖片按總縮放比例進(jìn)行縮放 matrix.postScale(totalRatio, totalRatio); float scaledWidth = sourceBitmap.getWidth() * totalRatio; float scaledHeight = sourceBitmap.getHeight() * totalRatio; float translateX = 0f; float translateY = 0f; // 如果當(dāng)前圖片寬度小于屏幕寬度,則按屏幕中心的橫坐標(biāo)進(jìn)行水平縮放。否則按兩指的中心點(diǎn)的橫坐標(biāo)進(jìn)行水平縮放 if (currentBitmapWidth < width) { translateX = (width - scaledWidth) / 2f; } else { translateX = totalTranslateX * scaledRatio + centerPointX * (1 - scaledRatio); // 進(jìn)行邊界檢查,保證圖片縮放后在水平方向上不會偏移出屏幕 if (translateX > 0) { translateX = 0; } else if (width - translateX > scaledWidth) { translateX = width - scaledWidth; } } // 如果當(dāng)前圖片高度小于屏幕高度,則按屏幕中心的縱坐標(biāo)進(jìn)行垂直縮放。否則按兩指的中心點(diǎn)的縱坐標(biāo)進(jìn)行垂直縮放 if (currentBitmapHeight < height) { translateY = (height - scaledHeight) / 2f; } else { translateY = totalTranslateY * scaledRatio + centerPointY * (1 - scaledRatio); // 進(jìn)行邊界檢查,保證圖片縮放后在垂直方向上不會偏移出屏幕 if (translateY > 0) { translateY = 0; } else if (height - translateY > scaledHeight) { translateY = height - scaledHeight; } } // 縮放后對圖片進(jìn)行偏移,以保證縮放后中心點(diǎn)位置不變 matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; currentBitmapWidth = scaledWidth; currentBitmapHeight = scaledHeight; canvas.drawBitmap(sourceBitmap, matrix, null); } /** * 對圖片進(jìn)行平移處理 * * @param canvas */ private void move(Canvas canvas) { matrix.reset(); // 根據(jù)手指移動的距離計(jì)算出總偏移值 float translateX = totalTranslateX + movedDistanceX; float translateY = totalTranslateY + movedDistanceY; // 先按照已有的縮放比例對圖片進(jìn)行縮放 matrix.postScale(totalRatio, totalRatio); // 再根據(jù)移動距離進(jìn)行偏移 matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; canvas.drawBitmap(sourceBitmap, matrix, null); } /** * 對圖片進(jìn)行初始化操作,包括讓圖片居中,以及當(dāng)圖片大于屏幕寬高時(shí)對圖片進(jìn)行壓縮。 * * @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) { // 當(dāng)圖片寬度大于屏幕寬度時(shí),將圖片等比例壓縮,使它可以完全顯示出來 float ratio = width / (bitmapWidth * 1.0f); matrix.postScale(ratio, ratio); float translateY = (height - (bitmapHeight * ratio)) / 2f; // 在縱坐標(biāo)方向上進(jìn)行偏移,以保證圖片居中顯示 matrix.postTranslate(0, translateY); totalTranslateY = translateY; totalRatio = initRatio = ratio; } else { // 當(dāng)圖片高度大于屏幕高度時(shí),將圖片等比例壓縮,使它可以完全顯示出來 float ratio = height / (bitmapHeight * 1.0f); matrix.postScale(ratio, ratio); float translateX = (width - (bitmapWidth * ratio)) / 2f; // 在橫坐標(biāo)方向上進(jìn)行偏移,以保證圖片居中顯示 matrix.postTranslate(translateX, 0); totalTranslateX = translateX; totalRatio = initRatio = ratio; } currentBitmapWidth = bitmapWidth * initRatio; currentBitmapHeight = bitmapHeight * initRatio; } else { // 當(dāng)圖片的寬高都小于屏幕寬高時(shí),直接讓圖片居中顯示 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); } } /** * 計(jì)算兩個(gè)手指之間的距離。 * * @param event * @return 兩個(gè)手指之間的距離 */ @SuppressLint("NewApi") 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); } /** * 計(jì)算兩個(gè)手指之間中心點(diǎn)的坐標(biāo)。 * * @param event */ @SuppressLint("NewApi") 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; } }
布局中調(diào)用
以上所述是小編給大家介紹的Android通過自定義ImageView控件實(shí)現(xiàn)圖片的縮放和拖動的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Android實(shí)現(xiàn)ImageView圖片縮放和拖動
- Android實(shí)現(xiàn)跟隨手指拖動并自動貼邊的View樣式(實(shí)例demo)
- Android自定義View實(shí)現(xiàn)拖動選擇按鈕
- Android實(shí)現(xiàn)單頁面浮層可拖動view的一種方法
- Android開發(fā)實(shí)現(xiàn)可拖動排序的ListView功能【附源碼下載】
- Android DragImageView實(shí)現(xiàn)下拉拖動圖片放大效果
- Android RecyclerView滑動刪除和拖動排序
- Android ViewDragHelper仿淘寶拖動加載效果
- Android自定義View圓形和拖動圓、跟隨手指拖動效果
- android實(shí)現(xiàn)可拖動的浮動view
相關(guān)文章
Android實(shí)現(xiàn)3D推拉門式滑動菜單源碼解析
這篇文章主要為大家詳細(xì)解析了Android實(shí)現(xiàn)3D推拉門式滑動菜單源碼以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。2017-11-11利用SpannableString和ImageSpan在textview中插入圖片的方法
這篇文章主要為大家詳細(xì)介紹了利用SpannableString和ImageSpan在textview中插入圖片的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android自定義View實(shí)現(xiàn)內(nèi)存清理加速球效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)內(nèi)存清理加速球的效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android studio 4.1打包失敗和插件錯(cuò)誤提示的解決
這篇文章主要介紹了Android studio 4.1打包失敗和插件錯(cuò)誤提示的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10RecyclerView仿應(yīng)用列表實(shí)現(xiàn)網(wǎng)格布局
這篇文章主要為大家詳細(xì)介紹了RecyclerView仿應(yīng)用列表實(shí)現(xiàn)網(wǎng)格布局,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09