Android實現(xiàn)圖片查看功能
一、效果圖
二、支持功能
本地與網(wǎng)絡(luò)圖片
可用于各大圖片加載框架（Fresco，Glide，Picasso）
圖片縮放
放大后的圖片慣性滑動
下拉縮小退出
三、核心實現(xiàn)方法
3.1 縮放 Matrix.postScale(float sx, float sy, float px, float py)
參數(shù)解析：
sx: 目標寬度 / 現(xiàn)有寬度
sy: 目標高度 / 現(xiàn)有高度
(px,py): 縮放焦點坐標
使用示例：
/*** 縮放手勢監(jiān)聽*/private ScaleGestureDetector.OnScaleGestureListener mOnScaleGestureListener = new ScaleGestureDetector.SimpleOnScaleGestureListener() {@Overridepublic 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)
參數(shù)解析：
dx: 目標位置X坐標 - 當前位置X坐標
sy: 目標位置Y坐標 - 當前位置Y坐標
使用示例：
/*** 簡單手勢監(jiān)聽*/private GestureDetector.SimpleOnGestureListener mOnGestureListener = new GestureDetector.SimpleOnGestureListener() {...@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {if (!isAlwaysSingleTouch) {return true;}mMatrix.postTranslate(-distanceX, -distanceY);invalidate();return false;}...};
3.3 將Matrix的操作關(guān)聯(lián)到ImageView上
View提供onDraw的方法，可以操作到Canvas，Canvas提供concat的方法來關(guān)聯(lián)Matrix。每次針對Matrix有操作之后調(diào)用invalidate()刷新一下onDraw()即可。這就是個操作配置，而且是View早就提供好了的配置。
調(diào)用示例：
@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)參數(shù)解析：
(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() {@Overridepublic float getInterpolation(float t) {t -= 1.0f;return t * t * t * t * t + 1.0f;}};public FlingUtil() {mScroller = new OverScroller(getContext(), sQuinticInterpolator);}@Overridepublic 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只提供在基于已有位置和已有速度下的位置計算，需要主動調(diào)用scroller.getCurrY()和scroller.getCurrX()方法去獲取位置信息。
這里使用的是RecyclerView中的慣性滑動的實現(xiàn)方式。
四、三個必要的細節(jié)處理
在有了上面的4個方法，基本上一個可縮放的ImageView所需要的功能都可以實現(xiàn)了。但是，一些細節(jié)方面的問題也不可忽視，比如說：
移動不能超過圖片的邊緣
在ImageView的ScaleType為FIT_CENTER時，獲取真實的圖片內(nèi)容的寬高，畢竟需要縮放的是圖片的內(nèi)容
圖片是否移動到最左側(cè)或最右側(cè)，用于ViewPager中的滑動判斷
4.1 邊緣處理
在移動前，校驗此次的移動是否會造成圖片內(nèi)容是否會移動超出邊界。Canvas關(guān)聯(lián)的Matrix是針對整個ImageView的，我們需要知道ImageView中圖片部分在ImageView中的初始位置信息,如圖：
在得到圖片內(nèi)容在初始狀態(tài)下的展示區(qū)域Rect(a,b,c,d)后，使用Matrix提供的Matrix.mapRect(Rect)方法，可以得到經(jīng)歷縮放后的展示區(qū)域。得到內(nèi)容縮放后的展示區(qū)域后，與ImageView的展示區(qū)域Rect(0,0,W,H)作比較便可得出是否超出邊界。
示例方法：
/*** 獲得縮放移動后的圖片內(nèi)容的位置區(qū)域** @param matrix* @return RectF*/private RectF getScaledRect(Matrix matrix) {RectF rectF = new RectF(mImageRectF);//轉(zhuǎn)化為縮放后的相對位置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) {//rightif (rectF.right + dx < mWidth) {dx = -rectF.right + mWidth;}//leftif (rectF.left + dx > 0) {dx = -rectF.left;}} else {//centerdx = -rectF.left + ((float) mWidth - scaleImageWidth) / 2;}if (scaleImageHeight > mHeight) {//bottomif (rectF.bottom + dy < mHeight) {dy = -rectF.bottom + mHeight;}//topif (rectF.top + dy > 0) {dy = -rectF.top;}} else {//centerdy = -rectF.top + ((float) mHeight - scaleImageHeight) / 2;}mMatrix.postTranslate(dx, dy);invalidate();checkBorder();}
4.2 獲取ImageView中內(nèi)容的寬高
針對不同的網(wǎng)絡(luò)加載框架有不同的操作方式，這里一Fresco位示例：
PipelineDraweeControllerBuilder提供setControllerListener方法，可以設(shè)置一個圖片加載的監(jiān)聽。
示例代碼：
private ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {@Overridepublic 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) {//獲取到最新的圖片內(nèi)容的寬高mWidth = preWidth;mHeight = preHeight;}}@Overridepublic void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {Log.d("zhufeng", "Intermediate image received");}@Overridepublic 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的滑動沖突
需要明確：
左滑時，當圖片內(nèi)容到達右側(cè)邊界，進行圖片切換的處理（事件交由ViewPager處理）
右滑時，當圖片內(nèi)容到達左側(cè)邊界，進行圖片切換的處理（事件交由ViewPager處理）
剩下的ImageView自己處理
ImageView中的處理：
在約束移動的時候標記圖片是否已經(jīng)觸及左右邊界。并提供方法：
/*** 用于ViewPager滑動攔截** @param direction* @return*/public boolean canScroll(int direction) {return !((direction < 0 && isRightSide()) || (direction > 0 && isLeftSide()));}
ViewPager中的處理：
在canScroll方法中進行狀態(tài)判斷。重寫ViewPager：
/*** 相冊ViewPager** @author zhufeng on 2017/10/22*/public class AlbumViewPager extends ViewPager {...@Overrideprotected 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
到這里就結(jié)束啦.