PhotoView图片缩放控件源码浅析（一）
2024-04-29 07:18:33
本文参考自http://www.tuicool.com/articles/ea2ANjm
简介
PhotoView属性：
可以用于查看图片，并对图片进行拖动缩放，拖动过程中不会出现边缘空白；
双击缩小放大，Fling移动，并支持上述过程的渐变；
在放大情况下也支持viewpager等的拖动切换；
支持多击事件检测，单机，双击事件；
支持各种回调给调用者；
具体的调用方法如下
//将imageview和PhotoViewAttacher 这个控制器关联起来 mAttacher = new PhotoViewAttacher(mImageView);
可以看出来 主要的工作都是在这个PhotoViewAttacher里做的。
public PhotoViewAttacher(ImageView imageView) {//使用软引用，防止内存泄露mImageView = new WeakReference<ImageView>(imageView);
//這個draswingcache 我們做截屏的時候會經常用到，只需要理解成我們可以通過getDrawingCache拿到view里的內容（這個內容被轉成了bitmap）
imageView.setDrawingCacheEnabled(true);
imageView.setOnTouchListener(this);
//这里就是监听imageview的 layout变化用的 imageview发生变化就会调用这个回调接口
ViewTreeObserver observer = imageView.getViewTreeObserver();
if (null != observer)observer.addOnGlobalLayoutListener(this);
// 设置绘制时这个imageview 可以随着matrix矩阵进行变换
setImageViewScaleTypeMatrix(imageView);
//这个是让你在可视化界面能看到预览效果的，大家自定义控件时 也可以使用这个技巧
if (imageView.isInEditMode()) {return;
} //根据版本不同 取得需要的mScaleDragDetector 主要就是监听pinch手势的
mScaleDragDetector = VersionedGestureDetector.newInstance(imageView.getContext(), this);
//这个dectecor 就是用来监听双击和长按事件的
mGestureDetector = new GestureDetector(imageView.getContext(),
new GestureDetector.SimpleOnGestureListener() {// forward long click listener
@Override
public void onLongPress(MotionEvent e) {if (null != mLongClickListener) {mLongClickListener.onLongClick(getImageView());
}}});
//监听双击事件
mGestureDetector.setOnDoubleTapListener(new DefaultOnDoubleTapListener(this));
// Finally, update the UI so that we're zoomable
setZoomable(true);
}
接下来我们来看看 addOnGlobalLayoutListener这个接听里做了什么，接口中有onGlobalLayout方法
public void onGlobalLayout() {ImageView imageView = getImageView();
if (null != imageView) {if (mZoomEnabled) { //这个地方要注意imageview的 四个坐标点是永远不会变化的。final int top = imageView.getTop();
final int right = imageView.getRight();
final int bottom = imageView.getBottom();
final int left = imageView.getLeft();
/**
* We need to check whether the ImageView's bounds have changed.
* This would be easier if we targeted API 11+ as we could just use
* View.OnLayoutChangeListener. Instead we have to replicate the
* work, keeping track of the ImageView's bounds and then checking
* if the values change.
*/
if (top != mIvTop || bottom != mIvBottom || left != mIvLeft
|| right != mIvRight) {// Update our base matrix, as the bounds have changed
updateBaseMatrix(imageView.getDrawable());
// Update values as something has changed
mIvTop = top;
mIvRight = right;
mIvBottom = bottom;
mIvLeft = left;
}} else {updateBaseMatrix(imageView.getDrawable());
}}
}
然后我们跟到updateBaseMatrix（）里边
private void updateBaseMatrix(Drawable d) {ImageView imageView = getImageView();
if (null == imageView || null == d) {return;
}final float viewWidth = getImageViewWidth(imageView);
final float viewHeight = getImageViewHeight(imageView);
final int drawableWidth = d.getIntrinsicWidth();//这个是取原始图片大小的 永远不会变化的
final int drawableHeight = d.getIntrinsicHeight();
mBaseMatrix.reset();
final float widthScale = viewWidth / drawableWidth;
final float heightScale = viewHeight / drawableHeight;
if (mScaleType == ScaleType.CENTER) { //根据传进去的scaletype的值来确定 基础的matrix大小mBaseMatrix.postTranslate((viewWidth - drawableWidth) / 2F,
(viewHeight - drawableHeight) / 2F);
} else if (mScaleType == ScaleType.CENTER_CROP) {float scale = Math.max(widthScale, heightScale);
mBaseMatrix.postScale(scale, scale);
mBaseMatrix.postTranslate((viewWidth - drawableWidth * scale) / 2F,
(viewHeight - drawableHeight * scale) / 2F);
} else if (mScaleType == ScaleType.CENTER_INSIDE) {float scale = Math.min(1.0f, Math.min(widthScale, heightScale));
mBaseMatrix.postScale(scale, scale);
mBaseMatrix.postTranslate((viewWidth - drawableWidth * scale) / 2F,
(viewHeight - drawableHeight * scale) / 2F);
} else {RectF mTempSrc = new RectF(0, 0, drawableWidth, drawableHeight);
RectF mTempDst = new RectF(0, 0, viewWidth, viewHeight);
switch (mScaleType) {case FIT_CENTER:mBaseMatrix
.setRectToRect(mTempSrc, mTempDst, ScaleToFit.CENTER);
break;
case FIT_START:mBaseMatrix.setRectToRect(mTempSrc, mTempDst, ScaleToFit.START);
break;
case FIT_END:mBaseMatrix.setRectToRect(mTempSrc, mTempDst, ScaleToFit.END);
break;
case FIT_XY:mBaseMatrix.setRectToRect(mTempSrc, mTempDst, ScaleToFit.FILL);
break;
default:break;
}}resetMatrix();
}
然后我们跟到resetMatrix（）中看看
/**
* Resets the Matrix back to FIT_CENTER, and then displays it.s
*/
private void resetMatrix() {mSuppMatrix.reset();
setImageViewMatrix(getDrawMatrix());
checkMatrixBounds();
}
进入checkMatrixBounds（）中看看
private boolean checkMatrixBounds() {//检查当前显示范围是否在边界上 然後對圖片進行平移（垂直或水平方向） 防止出現留白的現象final ImageView imageView = getImageView();
if (null == imageView) {return false;
}final RectF rect = getDisplayRect(getDrawMatrix());
if (null == rect) {return false;
}final float height = rect.height(), width = rect.width();
float deltaX = 0, deltaY = 0;
final int viewHeight = getImageViewHeight(imageView);
if (height <= viewHeight) {switch (mScaleType) {case FIT_START:deltaY = -rect.top;
break;
case FIT_END:deltaY = viewHeight - height - rect.top;
break;
default:deltaY = (viewHeight - height) / 2 - rect.top;
break;
}} else if (rect.top > 0) {deltaY = -rect.top;
} else if (rect.bottom < viewHeight) {deltaY = viewHeight - rect.bottom;
}final int viewWidth = getImageViewWidth(imageView);
if (width <= viewWidth) {switch (mScaleType) {case FIT_START:deltaX = -rect.left;
break;
case FIT_END:deltaX = viewWidth - width - rect.left;
break;
default:deltaX = (viewWidth - width) / 2 - rect.left;
break;
}mScrollEdge = EDGE_BOTH;
} else if (rect.left > 0) {mScrollEdge = EDGE_LEFT;
deltaX = -rect.left;
} else if (rect.right < viewWidth) {deltaX = viewWidth - rect.right;
mScrollEdge = EDGE_RIGHT;
} else {mScrollEdge = EDGE_NONE;
}// Finally actually translate the matrix
mSuppMatrix.postTranslate(deltaX, deltaY);
return true;
}
这个地方有的人可能会对最后那个检测是否在边界的那个函数不太明白，其实还是挺好理解的，对于容器imageview来说 他的范围是固定的。里面的drawable是不断的变化的，
但是这个drawable 可以和 RectF来关联起来，这个rectF 就是描述出一个矩形，这个矩形就恰好是drawable的大小范围。他有四个值 分别是top left right和bottom。
其中2个值表示矩形的左上面ed点的坐标 另外2个表示右下角的坐标。一个矩形由这2个点即可确定位置以及大小。我用下图来表示：
所以那个函数你要想理解的话 就是自己去画个图。就能知道如何判断是否到边缘了！实际上就是drawbl---matrix---rectF的一个转换。
接着回到PhotoViewAttacher的构造方法，我们看到mScaleDragDetector
public final class VersionedGestureDetector {public static GestureDetector newInstance(Context context,
OnGestureListener listener) {final int sdkVersion = Build.VERSION.SDK_INT;
GestureDetector detector;
if (sdkVersion < Build.VERSION_CODES.ECLAIR) {detector = new CupcakeGestureDetector(context);
} else if (sdkVersion < Build.VERSION_CODES.FROYO) {detector = new EclairGestureDetector(context);
} else {detector = new FroyoGestureDetector(context);
}detector.setOnGestureListener(listener);
return detector;
}
我们发现这个地方是一个单例，实际上这边代码就是根据sdk的版本号不同 提供不一样的功能，接着我们看FroyoGestureDetector（）
@TargetApi(8)
public class FroyoGestureDetector extends EclairGestureDetector {//用于检测缩放的手势protected final ScaleGestureDetector mDetector;
public FroyoGestureDetector(Context context) {super(context);
ScaleGestureDetector.OnScaleGestureListener mScaleListener = new ScaleGestureDetector.OnScaleGestureListener() {@Override
public boolean onScale(ScaleGestureDetector detector) {float scaleFactor = detector.getScaleFactor();
if (Float.isNaN(scaleFactor) || Float.isInfinite(scaleFactor))return false;
mListener.onScale(scaleFactor,
detector.getFocusX(), detector.getFocusY());
return true;
}//这个函数返回true，onScale函数才会被真正调用
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {return true;
}@Override
public void onScaleEnd(ScaleGestureDetector detector) {// NO-OP
}};
mDetector = new ScaleGestureDetector(context, mScaleListener);
}@Override
public boolean isScaling() {return mDetector.isInProgress();
}@Override
public boolean onTouchEvent(MotionEvent ev) {mDetector.onTouchEvent(ev);
return super.onTouchEvent(ev);
}}
PhotoView图片缩放控件源码浅析（一）相关推荐
- 农历控件源码(C#)
C#农历控件源码 using System; namespace CNCalendar { public class CNDate { private const ushort START_YEAR ...
- Pdf文档在线编辑控件源码及演示
支持Pdf文档在线编辑,并可以进行另存管理. PdfTestSite为演示文件夹 PdfViewer为控件源码控件 test.pdf为模版文件 注意:服务器端需要安装Adobe Reader以便进行更 ...
- Android-UI 超级优良超级多超级强大开源控件源码demo
第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...
- Android之PullToRefresh控件源码解析
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/73802453 本文出自:[顾林海的博客] 个人开发的微信小程序,目前功 ...
- 日历控件源码开放--适用于ASP.NET 1.1
摘要:此控件跟据"封装梅花雪疏影横斜"的"Web Calendar ver 3.0 网页日历"提供的JS代码来做的,在此特别感谢. 截图如下: 源码如下: // ...
- Android SwipeRefreshLayout下拉刷新控件源码简单分析
咱们在做Android APP开发的时候经常碰到有下拉刷新和上拉加载跟多的需求,这篇文章咱们先说说下来刷新,咱们就以google的原生的下拉刷新控件SwipeRefreshLayout来看看大概的实现 ...
- QT学习之经典控件源码（如此强大）
进来好好学习了QT,研究了很多别人的源码,在绘图方面原来QT也是如此强大! 源码下载: /Files/feiya ...
- J2me图片缩放与渐变色源码
J2me图片缩放 分享下着图片缩放的方法,不过暂时无法支持所有机型,低端机还是有待考证.估计内存吃不消... 像NOKIA N7610 这个手机上使用这个方法,图片就是一个素色区域,无法正常 ...
- 图片缩放库 Photoview 和 Gif 控件 GifView 的使用
课程背景: 在开发中,图片的缩放双击缩放和双击缩小也很重要,可以给用户提供更好的图片浏览体验.有些图片浏览还会涉及到 Gif 动画的播放.通过本课程,你将会学习到图片的缩放处理库和 Gif 播放组件的 ...
最新文章
- .NET MessageBox 网页弹出消息框
- javascript document对象 第21节
- php post请求后端拿不到值_[精选] uniapp实现多端开发，与PHP是如何结合的
- 命令行切换到conda环境_Anaconda命令行常用操作
- 详解计算机内部存储数据的形式 二进制数
- System variables, logging and the Execute SQL Task...(zz)
- Hangfire入门（任务调度）
- mysql创建表格1warning_MySQL 复制表
- 链栈和递归实现迷宫算法
- 独生子女证每月增加3%的退休金，但丢了怎么办？
- Linux查看文件第几行到第几行命令
- 小程序仿微视_争抢流量！腾讯微视也要开始搞短视频带货
- win10无线投屏_win10无线投屏智能电视
- TestStand-编辑VI
- 不会拼音学计算机怎么写,不会拼音不会拼音怎怎么打字？
- 富士急乐园免税店将开业，打造游园购物访日体验
- springboot 解决 NoClassDefFoundError: redis/clients/jedis/util/SafeEncoder
- 【字符串篇】力扣刷题2
- 微信小程序云开发定时推送订阅消息
- gc java ibm_月光软件站 - 编程文档 - Java - IBM JVM 1.4.1 GC与内存管理