Android實(shí)現(xiàn)圖片查看功能
一、效果圖
二、支持功能
- 本地與網(wǎng)絡(luò)圖片
- 可用于各大圖片加載框架(Fresco,Glide,Picasso)
- 圖片縮放
- 放大后的圖片慣性滑動(dòng)
- 下拉縮小退出
三、核心實(shí)現(xiàn)方法
3.1 縮放 Matrix.postScale(float sx, float sy, float px, float py)
參數(shù)解析:
- sx: 目標(biāo)寬度 / 現(xiàn)有寬度
- sy: 目標(biāo)高度 / 現(xiàn)有高度
- (px,py): 縮放焦點(diǎn)坐標(biāo)
使用示例:
/** * 縮放手勢(shì)監(jiān)聽 */ 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 移動(dòng) Matrix.postTranslate(float dx, float dy)
參數(shù)解析:
- dx: 目標(biāo)位置X坐標(biāo) - 當(dāng)前位置X坐標(biāo)
- sy: 目標(biāo)位置Y坐標(biāo) - 當(dāng)前位置Y坐標(biāo)
使用示例:
/** * 簡(jiǎn)單手勢(shì)監(jiān)聽 */ 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的操作關(guān)聯(lián)到ImageView上
View提供onDraw的方法,可以操作到Canvas,Canvas提供concat的方法來(lái)關(guān)聯(lián)Matrix。每次針對(duì)Matrix有操作之后調(diào)用invalidate()刷新一下onDraw()即可。這就是個(gè)操作配置,而且是View早就提供好了的配置。
調(diào)用示例:
@Override protected void onDraw(Canvas canvas) { int saveCount = canvas.save(); canvas.concat(mMatrix); super.onDraw(canvas); canvas.restoreToCount(saveCount); }
3.4 慣性滑動(dòng)
OverScroller.fling(int startX, int startY, int velocityX, int velocityY,int minX, int maxX, int minY, int maxY)
參數(shù)解析:
- (startX, startY): 初始位置坐標(biāo)
- (velocityX, velocityY): XY方向的初始速度
- (minX, maxX, minY, maxY): 限定了移動(dòng)后的位置邊界
使用示例:
/** * 慣性滑動(dòng)工具類 * 使用fling方法開始滑動(dòng) * 使用stop方法停止滑動(dòng) */ 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使用的慣性滑動(dòng)插值器 * 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只提供在基于已有位置和已有速度下的位置計(jì)算,需要主動(dòng)調(diào)用scroller.getCurrY()和scroller.getCurrX()方法去獲取位置信息。
這里使用的是RecyclerView中的慣性滑動(dòng)的實(shí)現(xiàn)方式。
四、三個(gè)必要的細(xì)節(jié)處理
在有了上面的4個(gè)方法,基本上一個(gè)可縮放的ImageView所需要的功能都可以實(shí)現(xiàn)了。但是,一些細(xì)節(jié)方面的問(wèn)題也不可忽視,比如說(shuō):
移動(dòng)不能超過(guò)圖片的邊緣
在ImageView的ScaleType為FIT_CENTER時(shí),獲取真實(shí)的圖片內(nèi)容的寬高,畢竟需要縮放的是圖片的內(nèi)容
圖片是否移動(dòng)到最左側(cè)或最右側(cè),用于ViewPager中的滑動(dòng)判斷
4.1 邊緣處理
在移動(dòng)前,校驗(yàn)此次的移動(dòng)是否會(huì)造成圖片內(nèi)容是否會(huì)移動(dòng)超出邊界。Canvas關(guān)聯(lián)的Matrix是針對(duì)整個(gè)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)作比較便可得出是否超出邊界。
示例方法:
/** * 獲得縮放移動(dòng)后的圖片內(nèi)容的位置區(qū)域 * * @param matrix * @return RectF */ private RectF getScaledRect(Matrix matrix) { RectF rectF = new RectF(mImageRectF); //轉(zhuǎn)化為縮放后的相對(duì)位置 matrix.mapRect(rectF); return rectF; } /** * 針對(duì)邊緣問(wèn)題,約束移動(dòng) * * @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中內(nèi)容的寬高
針對(duì)不同的網(wǎng)絡(luò)加載框架有不同的操作方式,這里一Fresco位示例:
PipelineDraweeControllerBuilder提供setControllerListener方法,可以設(shè)置一個(gè)圖片加載的監(jiān)聽。
示例代碼:
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) { //獲取到最新的圖片內(nèi)容的寬高 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的滑動(dòng)沖突
需要明確:
左滑時(shí),當(dāng)圖片內(nèi)容到達(dá)右側(cè)邊界,進(jìn)行圖片切換的處理(事件交由ViewPager處理)
右滑時(shí),當(dāng)圖片內(nèi)容到達(dá)左側(cè)邊界,進(jìn)行圖片切換的處理(事件交由ViewPager處理)
剩下的ImageView自己處理
ImageView中的處理:
在約束移動(dòng)的時(shí)候標(biāo)記圖片是否已經(jīng)觸及左右邊界。并提供方法:
/** * 用于ViewPager滑動(dòng)攔截 * * @param direction * @return */ public boolean canScroll(int direction) { return !((direction < 0 && isRightSide()) || (direction > 0 && isLeftSide())); }
ViewPager中的處理:
在canScroll方法中進(jìn)行狀態(tài)判斷。重寫ViewPager:
/** * 相冊(cè)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
到這里就結(jié)束啦.
以上就是Android實(shí)現(xiàn)圖片查看功能的詳細(xì)內(nèi)容,更多關(guān)于Android 圖片查看功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- android查看網(wǎng)絡(luò)圖片的實(shí)現(xiàn)方法
- Android圖片處理教程之全景查看效果實(shí)現(xiàn)
- Android仿百度圖片查看功能
- Android 簡(jiǎn)單的圖片查看器源碼實(shí)現(xiàn)
- android自定義Camera拍照并查看圖片
- Android 通過(guò)網(wǎng)絡(luò)圖片路徑查看圖片實(shí)例詳解
- Android 網(wǎng)絡(luò)圖片查看器與網(wǎng)頁(yè)源碼查看器
- android網(wǎng)絡(luò)圖片查看器簡(jiǎn)單實(shí)現(xiàn)代碼
- Android 實(shí)現(xiàn)WebView點(diǎn)擊圖片查看大圖列表及圖片保存功能
相關(guān)文章
總結(jié)Android中MD風(fēng)格相關(guān)控件
自Android5.0發(fā)布以來(lái),谷歌推出全新的Material Desigen設(shè)計(jì)風(fēng)格,時(shí)過(guò)一年多了,在國(guó)內(nèi)也看到很多應(yīng)用在慢慢適應(yīng)MD設(shè)計(jì)風(fēng)格。今天小編給大家總結(jié)下Android中MD風(fēng)格相關(guān)控件的知識(shí),有需要的可以參考學(xué)習(xí)。2016-08-08Android應(yīng)用關(guān)閉的情況以及識(shí)別方法詳解
對(duì)于現(xiàn)在的安卓手機(jī)而言,很多功能都是在逐步完善的,這篇文章主要給大家介紹了關(guān)于Android應(yīng)用關(guān)閉的情況以及識(shí)別的相關(guān)資料,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06android中實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的示例代碼
本篇文章主要介紹了android中實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Android 重寫ViewGroup 分析onMeasure()和onLayout()方法
這篇文章主要介紹了Android 重寫ViewGroup 分析onMeasure()和onLayout()方法的相關(guān)資料,需要的朋友可以參考下2017-06-06Android開發(fā)框架之自定義ZXing二維碼掃描界面并解決取景框拉伸問(wèn)題
這篇文章主要介紹了Android開發(fā)框架之自定義ZXing二維碼掃描界面并解決取景框拉伸問(wèn)題的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06Flutter 包管理器和資源管理使用學(xué)習(xí)
這篇文章主要為大家介紹了Flutter 包管理器和資源管理使用學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Android運(yùn)用BroadcastReceiver實(shí)現(xiàn)強(qiáng)制下線
本篇文章主要介紹了Android運(yùn)用BroadcastReceiver實(shí)現(xiàn)強(qiáng)制下線,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Android 實(shí)現(xiàn)截屏功能的實(shí)例
這篇文章主要介紹了Android 實(shí)現(xiàn)截屏功能的實(shí)例的相關(guān)資料,這里實(shí)現(xiàn)截屏的實(shí)例在代碼中注釋非常清楚,希望能幫助到大家,需要的朋友可以參考下2017-08-08