PhotoView开源项目剖析

介绍

上一节呢,我们介绍了怎么

功能特性

支持放缩超出边界,多点触控和双击事件

滚动和滑动

和ViewPager等能完美兼容

矩阵变化等有回调,方便前台其他展示的改变

单击,长按都有回调提醒

源码剖析那么怎么来学习他的源码呢,我们从以下几个部分来说吧

代码目录结构

从上面结构图中我们能知道他的功能总体划分,有了一个总体的认识啦。

样例

下面我们再来梳理一下他的调用流程,以一个简单的例子开始吧。

第一个是指定图片旋转90°

photo.setRotationTo(90);第二个是拖拽移动ImageView mImageView = (ImageView) findViewById(R.id.iv_photo);mCurrMatrixTv = (TextView) findViewById(R.id.tv_current_matrix);Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper);mImageView.setImageDrawable(bitmap);// The MAGIC happens here!mAttacher = new PhotoViewAttacher(mImageView);// Lets attach some listeners, not required though!mAttacher.setOnMatrixChangeListener(new MatrixChangeListener());mAttacher.setOnPhotoTapListener(new PhotoTapListener());

然后我们一步一步的跟踪,流程也清晰起来,来我们一起看看

时序图

好了,说了那么多,我们还没真正的开始看功能点的代码,下面呢,我们从代码级来分析一个个问题。我觉得根据问题来看代码,我们的主意力就会非常集中,在项目代码极其庞大的时候,是非常有效的办法,当然在像这样的小项目中呢,我们把问题铺的很多,问题解决了,代码其实也看的差不多了,好了,废话不多说了,先来第一个问题吧。

1.

结论:图片是继承了ImageView,根据Matrix矩阵改变显示drawable的显示效果的,我们都知道ImageView的展示模式有好几种分别是

private static final ScaleType[] sScaleTypeArray = {ScaleType.MATRIX,ScaleType.FIT_XY,ScaleType.FIT_START,ScaleType.FIT_CENTER,ScaleType.FIT_END,ScaleType.CENTER,ScaleType.CENTER_CROP,ScaleType.CENTER_INSIDE};我们把它设置为矩阵模式,那其他模式是不是不支持了呢,当然不是了,,牛逼的地方就在他使用这几种模式,而把这几种模式在程序中模拟换算出来,设置还是矩阵模式。

2.是怎么进行缩小放大操作?

还记得在结构图里面的标注吗,有个手势的,对的就是她了,放大的话,他有个最大比例的,缩小呢,也有个最小比例的,当放手的时候,会有个动画效果。

具体看

// If the user has zoomed less than min scale, zoom back// to min scaleif (getScale() < mMinScale) {RectF rect = getDisplayRect();if (null != rect) {v.post(new AnimatedZoomRunnable(getScale(), mMinScale,rect.centerX(), rect.centerY()));handled = true;}}当放缩比最小比例时,执行了AnimatedZoomRunnable,在看@Overridepublic void run() {ImageView imageView = getImageView();if (imageView == null) {return;}float t = interpolate();float scale = mZoomStart + t * (mZoomEnd – mZoomStart);float deltaScale = scale / getScale();mSuppMatrix.postScale(deltaScale, deltaScale, mFocalX, mFocalY);checkAndDisplayMatrix();// We haven't hit our target scale yet, so post ourselves againif (t < 1f) {Compat.postOnAnimation(imageView, this);}}这句话Compat.postOnAnimation(imageView,

3.拖拽移动的时候,怎么能保证不超过图片的边缘呢?

上面我们说了,是靠矩阵来改变效果的,那么一张原始图片(大小固定)在经过变换后产生的矩阵后,新的大小能不能得到呢,答案是肯定了,矩阵给我们提供了对应的方法Matrix.mapRect(RectFrect),好了,那程序是不是这样实现的呢?看获取显示最终矩阵矩形的代码

/*** Helper method that maps the supplied Matrix to the current Drawable** @param matrix – Matrix to map Drawable against* @return RectF – Displayed Rectangle*/private RectF getDisplayRect(Matrix matrix) {ImageView imageView = getImageView();if (null != imageView) {Drawable d = imageView.getDrawable();if (null != d) {mDisplayRect.set(0, 0, d.getIntrinsicWidth(),d.getIntrinsicHeight());matrix.mapRect(mDisplayRect);return mDisplayRect;}}return null;}

哈哈,是吧。就是这样做的。

4.图片的滑行操作是做的呢?

这个和放缩的实现差不多,使用了FlingRunnable,只是ScrollerProxy来计算更新的数值,ScrollerProxy又是一个什么东东呢?看代码的话,会发现其实就是OverScroller或者是Scroller的兼容代理,根据不同的版本选择不同的Scroller。

5.怎么处理滑动,拖动,放缩触摸事件的呢?

细心的同学会发现上面的结构图中还有一个手势包,其实里面就是处理这个的。

里面有个接口GestureDetector,也是跟Scroller差不多,有个兼容不同版本的生成器,统一生成GestureDetector,也就是不同版本的实现。

在CupcakeGestureDetector的onTouchEvent中,能够找到具体怎么处理事件的逻辑。

6.首先来看看怎么拖拽的?

在MotionEvent.ACTION_MOVEAction事件中,发现拖动的距离大于系统认为可以拖动的值的时候,那么怎么来取这个值呢

这一次是一个告别,或者一个永远的告别,

PhotoView开源项目剖析

相关文章:

你感兴趣的文章:

标签云: