一、效果圖

二、支持功能 本地與網絡圖片 可用于各大圖片加載框架（Fresco，Glide，Picasso） 圖片縮放 放大后的圖片慣性滑動 下拉縮小退出三、核心實現方法3.1 縮放 Matrix.postScale(float sx, float sy, float px, float py)

參數解析：

sx: 目標寬度 / 現有寬度 sy: 目標高度 / 現有高度 (px,py): 縮放焦點坐標

使用示例：

/** * 縮放手勢監聽 */private ScaleGestureDetector.OnScaleGestureListener mOnScaleGestureListener = new ScaleGestureDetector.SimpleOnScaleGestureListener() { @Override public boolean onScale(ScaleGestureDetector detector) { float scaleFactor = detector.getScaleFactor(); float wantScale = mScale * scaleFactor; if (wantScale >= MIN_SCALE) { mScale = wantScale; focusX = detector.getFocusX(); focusY = detector.getFocusY(); mMatrix.postScale(scaleFactor, scaleFactor, focusX, focusY); invalidate(); } return true; }};3.2 移動 Matrix.postTranslate(float dx, float dy)

參數解析：

dx: 目標位置X坐標 - 當前位置X坐標 sy: 目標位置Y坐標 - 當前位置Y坐標

使用示例：

/** * 簡單手勢監聽 */private GestureDetector.SimpleOnGestureListener mOnGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { if (!isAlwaysSingleTouch) { return true; } mMatrix.postTranslate(-distanceX, -distanceY); invalidate(); return false; } ...};3.3 將Matrix的操作關聯到ImageView上

View提供onDraw的方法，可以操作到Canvas，Canvas提供concat的方法來關聯Matrix。每次針對Matrix有操作之后調用invalidate()刷新一下onDraw()即可。這就是個操作配置，而且是View早就提供好了的配置。

調用示例：

@Overrideprotected void onDraw(Canvas canvas) { int saveCount = canvas.save(); canvas.concat(mMatrix); super.onDraw(canvas); canvas.restoreToCount(saveCount);}3.4 慣性滑動

OverScroller.fling(int startX, int startY, int velocityX, int velocityY,int minX, int maxX, int minY, int maxY)

參數解析：

(startX, startY): 初始位置坐標 (velocityX, velocityY): XY方向的初始速度 (minX, maxX, minY, maxY): 限定了移動后的位置邊界

使用示例：

/** * 慣性滑動工具類 * 使用fling方法開始滑動 * 使用stop方法停止滑動 */private class FlingUtil implements Runnable { private int mLastFlingX = 0; private int mLastFlingY = 0; private OverScroller mScroller; private boolean mEatRunOnAnimationRequest = false; private boolean mReSchedulePostAnimationCallback = false; /** * RecyclerView使用的慣性滑動插值器 * f(x) = (x-1)^5 + 1 */ private final Interpolator sQuinticInterpolator = new Interpolator() { @Override public float getInterpolation(float t) { t -= 1.0f; return t * t * t * t * t + 1.0f; } }; public FlingUtil() { mScroller = new OverScroller(getContext(), sQuinticInterpolator); } @Override public void run() { disableRunOnAnimationRequests(); final OverScroller scroller = mScroller; if (scroller.computeScrollOffset()) { final int y = scroller.getCurrY(); int dy = y - mLastFlingY; final int x = scroller.getCurrX(); int dx = x - mLastFlingX; mLastFlingY = y; mLastFlingX = x; constrainScrollBy(dx, dy); postOnAnimation(); } enableRunOnAnimationRequests(); } public void fling(int velocityX, int velocityY) { mLastFlingX = 0; mLastFlingY = 0; mScroller.fling(0, 0, velocityX, velocityY, Integer.MIN_VALUE, Integer.MAX_VALUE, Integer.MIN_VALUE, Integer.MAX_VALUE); postOnAnimation(); } public void stop() { removeCallbacks(this); mScroller.abortAnimation(); } private void disableRunOnAnimationRequests() { mReSchedulePostAnimationCallback = false; mEatRunOnAnimationRequest = true; } private void enableRunOnAnimationRequests() { mEatRunOnAnimationRequest = false; if (mReSchedulePostAnimationCallback) { postOnAnimation(); } } void postOnAnimation() { if (mEatRunOnAnimationRequest) { mReSchedulePostAnimationCallback = true; } else { removeCallbacks(this); ViewCompat.postOnAnimation(ZoomImageView.this, this); } }}

Scroller只提供在基于已有位置和已有速度下的位置計算，需要主動調用scroller.getCurrY()和scroller.getCurrX()方法去獲取位置信息。這里使用的是RecyclerView中的慣性滑動的實現方式。

四、三個必要的細節處理

在有了上面的4個方法，基本上一個可縮放的ImageView所需要的功能都可以實現了。但是，一些細節方面的問題也不可忽視，比如說：

移動不能超過圖片的邊緣

在ImageView的ScaleType為FIT_CENTER時，獲取真實的圖片內容的寬高，畢竟需要縮放的是圖片的內容

圖片是否移動到最左側或最右側，用于ViewPager中的滑動判斷

4.1 邊緣處理

在移動前，校驗此次的移動是否會造成圖片內容是否會移動超出邊界。Canvas關聯的Matrix是針對整個ImageView的，我們需要知道ImageView中圖片部分在ImageView中的初始位置信息,如圖：

在得到圖片內容在初始狀態下的展示區域Rect(a,b,c,d)后，使用Matrix提供的Matrix.mapRect(Rect)方法，可以得到經歷縮放后的展示區域。得到內容縮放后的展示區域后，與ImageView的展示區域Rect(0,0,W,H)作比較便可得出是否超出邊界。

示例方法：

/** * 獲得縮放移動后的圖片內容的位置區域 * * @param matrix * @return RectF */private RectF getScaledRect(Matrix matrix) { RectF rectF = new RectF(mImageRectF); //轉化為縮放后的相對位置 matrix.mapRect(rectF); return rectF;}/** * 針對邊緣問題，約束移動 * * @param dx * @param dy */private void constrainScrollBy(float dx, float dy) { RectF rectF = getScaledRect(mMatrix); float scaleImageWidth = rectF.width(); float scaleImageHeight = rectF.height(); if (scaleImageWidth > mWidth) { //right if (rectF.right + dx < mWidth) { dx = -rectF.right + mWidth; } //left if (rectF.left + dx > 0) { dx = -rectF.left; } } else { //center dx = -rectF.left + ((float) mWidth - scaleImageWidth) / 2; } if (scaleImageHeight > mHeight) { //bottom if (rectF.bottom + dy < mHeight) { dy = -rectF.bottom + mHeight; } //top if (rectF.top + dy > 0) { dy = -rectF.top; } } else { //center dy = -rectF.top + ((float) mHeight - scaleImageHeight) / 2; } mMatrix.postTranslate(dx, dy); invalidate(); checkBorder();}4.2 獲取ImageView中內容的寬高

針對不同的網絡加載框架有不同的操作方式，這里一Fresco位示例：PipelineDraweeControllerBuilder提供setControllerListener方法，可以設置一個圖片加載的監聽。

示例代碼：

private ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() { @Override public void onFinalImageSet(String id, @Nullable ImageInfo imageInfo, @Nullable Animatable anim) { if (imageInfo == null) { return; } int preWidth = imageInfo.getWidth(); int preHeight = imageInfo.getHeight(); if (preWidth != mWidth || preHeight != mHeight) { //獲取到最新的圖片內容的寬高 mWidth = preWidth; mHeight = preHeight; } } @Override public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) { Log.d('zhufeng', 'Intermediate image received'); } @Override public void onFailure(String id, Throwable throwable) { throwable.printStackTrace(); }};public void loadImage(int resizeX, int resizeY, Uri uri) { ImageRequest request = ImageRequestBuilder .newBuilderWithSource(uri) .setResizeOptions(new ResizeOptions(resizeX, resizeY)) .build(); PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder().setControllerListener(controllerListener).setOldController(getController()).setImageRequest(request).build(); setController(controller);}4.3 處理與ViewPager的滑動沖突

需要明確：

左滑時，當圖片內容到達右側邊界，進行圖片切換的處理（事件交由ViewPager處理）

右滑時，當圖片內容到達左側邊界，進行圖片切換的處理（事件交由ViewPager處理）

剩下的ImageView自己處理

ImageView中的處理：在約束移動的時候標記圖片是否已經觸及左右邊界。并提供方法：

/** * 用于ViewPager滑動攔截 * * @param direction * @return */public boolean canScroll(int direction) { return !((direction < 0 && isRightSide()) || (direction > 0 && isLeftSide()));}

ViewPager中的處理：在canScroll方法中進行狀態判斷。重寫ViewPager：

/** * 相冊ViewPager * * @author zhufeng on 2017/10/22 */public class AlbumViewPager extends ViewPager { ... @Override protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) { if (v instanceof ZoomImageView) { return ((ZoomImageView) v).canScroll(dx) || super.canScroll(v, checkV, dx, x, y); } return super.canScroll(v, checkV, dx, x, y); } ...}

源碼地址：

https://github.com/zhufeng1222/Gallery

到這里就結束啦.

以上就是Android實現圖片查看功能的詳細內容，更多關于Android 圖片查看功能的資料請關注好吧啦網其它相關文章！