Android實現(xiàn)圖片查看功能
更新時間：2021年04月07日 08:39:19 作者：符號Rajesh
這篇文章主要介紹了Android如何實現(xiàn)圖片查看功能，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下
一、效果圖
二、支持功能
- 本地與網(wǎng)絡圖片
- 可用于各大圖片加載框架（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() {
@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)
參數(shù)解析：
- dx: 目標位置X坐標 - 當前位置X坐標
- sy: 目標位置Y坐標 - 當前位置Y坐標
使用示例：
/**
* 簡單手勢監(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的操作關聯(lián)到ImageView上
View提供onDraw的方法，可以操作到Canvas，Canvas提供concat的方法來關聯(lián)Matrix。每次針對Matrix有操作之后調用invalidate()刷新一下onDraw()即可。這就是個操作配置，而且是View早就提供好了的配置。
調用示例：
@Override
protected 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() {
@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中的慣性滑動的實現(xiàn)方式。
四、三個必要的細節(jié)處理
在有了上面的4個方法，基本上一個可縮放的ImageView所需要的功能都可以實現(xiàn)了。但是，一些細節(jié)方面的問題也不可忽視，比如說：
移動不能超過圖片的邊緣
在ImageView的ScaleType為FIT_CENTER時，獲取真實的圖片內容的寬高，畢竟需要縮放的是圖片的內容
圖片是否移動到最左側或最右側，用于ViewPager中的滑動判斷
4.1 邊緣處理
在移動前，校驗此次的移動是否會造成圖片內容是否會移動超出邊界。Canvas關聯(lián)的Matrix是針對整個ImageView的，我們需要知道ImageView中圖片部分在ImageView中的初始位置信息,如圖：
在得到圖片內容在初始狀態(tài)下的展示區(qū)域Rect(a,b,c,d)后，使用Matrix提供的Matrix.mapRect(Rect)方法，可以得到經(jīng)歷縮放后的展示區(qū)域。得到內容縮放后的展示區(qū)域后，與ImageView的展示區(qū)域Rect(0,0,W,H)作比較便可得出是否超出邊界。
示例方法：
/**
* 獲得縮放移動后的圖片內容的位置區(qū)域
*
* @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中內容的寬高
針對不同的網(wǎng)絡加載框架有不同的操作方式，這里一Fresco位示例：
PipelineDraweeControllerBuilder提供setControllerListener方法，可以設置一個圖片加載的監(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) {
//獲取到最新的圖片內容的寬高
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中的處理：
在約束移動的時候標記圖片是否已經(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 {
...
@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實現(xiàn)圖片查看功能的詳細內容，更多關于Android 圖片查看功能的資料請關注腳本之家其它相關文章！
相關文章
自Android5.0發(fā)布以來，谷歌推出全新的Material Desigen設計風格，時過一年多了，在國內也看到很多應用在慢慢適應MD設計風格。今天小編給大家總結下Android中MD風格相關控件的知識，有需要的可以參考學習。2016-08-08
對于現(xiàn)在的安卓手機而言,很多功能都是在逐步完善的,這篇文章主要給大家介紹了關于Android應用關閉的情況以及識別的相關資料,文章通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了Android線程間通信Handler源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本篇文章主要介紹了android中實現(xiàn)手機號碼的校驗的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Android 重寫ViewGroup 分析onMeasure()和onLayout()方法
這篇文章主要介紹了Android 重寫ViewGroup 分析onMeasure()和onLayout()方法的相關資料,需要的朋友可以參考下2017-06-06
Android開發(fā)框架之自定義ZXing二維碼掃描界面并解決取景框拉伸問題
這篇文章主要介紹了Android開發(fā)框架之自定義ZXing二維碼掃描界面并解決取景框拉伸問題的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家介紹了Flutter 包管理器和資源管理使用學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Android運用BroadcastReceiver實現(xiàn)強制下線
本篇文章主要介紹了Android運用BroadcastReceiver實現(xiàn)強制下線，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Android 實現(xiàn)截屏功能的實例的相關資料,這里實現(xiàn)截屏的實例在代碼中注釋非常清楚，希望能幫助到大家，需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了kotlin使用建造者模式自定義對話框的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07