PhotoView开源项目剖析

http://blog.csdn.net/wu928320442/article/details/43056731

 


 

介绍

上一节呢，我们介绍了怎么下载和编译Android源码，这节呢，我们来讨论PhotoView这个开源项目，也是我们用的非常频繁的一个，用来帮助产生一个容易实现ImageView缩放的这么个东东。

功能特性

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

 滚动和滑动

 和ViewPager等能完美兼容

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

 单击，长按都有回调提醒

源码剖析

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

 代码目录结构

 

 

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

 

 样例

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

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

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. photo.setRotationTo(90);  
第二个是拖拽移动
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. ImageView mImageView = (ImageView) findViewById(R.id.iv_photo);  
  2. mCurrMatrixTv = (TextView) findViewById(R.id.tv_current_matrix);  
  3.   
  4. Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper);  
  5. mImageView.setImageDrawable(bitmap);  
  6.   
  7. // The MAGIC happens here!  
  8. mAttacher = new PhotoViewAttacher(mImageView);  
  9.   
  10. // Lets attach some listeners, not required though!  
  11. mAttacher.setOnMatrixChangeListener(new MatrixChangeListener());  
  12. mAttacher.setOnPhotoTapListener(new PhotoTapListener());  

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

 

 时序图


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

 

 1.图片的继承关系，是View还是ImageView,怎么改变图片的效果的？

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

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. private static final ScaleType[] sScaleTypeArray = {  
  2.     ScaleType.MATRIX,  
  3.     ScaleType.FIT_XY,  
  4.     ScaleType.FIT_START,  
  5.     ScaleType.FIT_CENTER,  
  6.     ScaleType.FIT_END,  
  7.     ScaleType.CENTER,  
  8.     ScaleType.CENTER_CROP,  
  9.     ScaleType.CENTER_INSIDE  
  10. };  

我们把它设置为矩阵模式，那其他模式是不是不支持了呢，当然不是了，牛逼的地方就在他使用这几种模式，而把这几种模式在程序中模拟换算出来，设置还是矩阵模式。

 

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

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

具体看

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. // If the user has zoomed less than min scale, zoom back  
  2. // to min scale  
  3. if (getScale() < mMinScale) {  
  4.     RectF rect = getDisplayRect();  
  5.     if (null != rect) {  
  6.         v.post(new AnimatedZoomRunnable(getScale(), mMinScale,  
  7.                 rect.centerX(), rect.centerY()));  
  8.         handled = true;  
  9.     }  
  10. }  

当放缩比最小比例时，执行了AnimatedZoomRunnable，在看
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override  
  2. public void run() {  
  3.     ImageView imageView = getImageView();  
  4.     if (imageView == null) {  
  5.         return;  
  6.     }  
  7.   
  8.     float t = interpolate();  
  9.     float scale = mZoomStart + t * (mZoomEnd - mZoomStart);  
  10.     float deltaScale = scale / getScale();  
  11.   
  12.     mSuppMatrix.postScale(deltaScale, deltaScale, mFocalX, mFocalY);  
  13.     checkAndDisplayMatrix();  
  14.   
  15.     // We haven't hit our target scale yet, so post ourselves again  
  16.     if (t < 1f) {  
  17.         Compat.postOnAnimation(imageView, this);  
  18.     }  
  19. }  

这句话Compat.postOnAnimation(imageView, this);也就是执行一次当前Runnable，然后每次都会改变矩阵值，接着就会更新drawable的显示矩阵了，是一个持续的属性动画的过程。

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

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

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1.     /** 
  2.      * Helper method that maps the supplied Matrix to the current Drawable 
  3.      * 
  4.      * @param matrix - Matrix to map Drawable against 
  5.      * @return RectF - Displayed Rectangle 
  6.      */  
  7.     private RectF getDisplayRect(Matrix matrix) {  
  8.         ImageView imageView = getImageView();  
  9.    
  10.         if (null != imageView) {  
  11.             Drawable d = imageView.getDrawable();  
  12.             if (null != d) {  
  13.                 mDisplayRect.set(0, 0, d.getIntrinsicWidth(),  
  14.                         d.getIntrinsicHeight());  
  15.                 matrix.mapRect(mDisplayRect);  
  16.                 return mDisplayRect;  
  17.             }  
  18.         }  
  19.         return null;  
  20. }  

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


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

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

 

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

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

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

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

 

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

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

来看代码

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. final ViewConfiguration configuration = ViewConfiguration  
  2.         .get(context);  
  3. mMinimumVelocity = configuration.getScaledMinimumFlingVelocity();  
  4. mTouchSlop = configuration.getScaledTouchSlop();  

这样就取到了那个系统值，然后就是判断了
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. // Use Pythagoras to see if drag length is larger than  
  2. // touch slop  
  3. mIsDragging = FloatMath.sqrt((dx * dx) + (dy * dy)) >= mTouchSlop;  
拖拽的时候可以通过监听器来传递拖拽的距离
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. mListener.onDrag(dx, dy);  

 7.怎么判断是滑动呢？

 这里用到了一个不常使用的类VelocityTracker，看注释大致意思是帮助用来跟踪触摸轨迹的这么一个东东。 那么怎么来使用这个东东 呢，当滑动的时候使用mVelocityTracker.addMovement(ev);来添加触摸轨迹，抬起的时 候，mVelocityTracker.computeCurrentVelocity(1000); 这个方法的意思就是根据最近的1秒的时间来计算出 当前手势的速度，还记得我们上面取得的那个系统认为拖动的那个值吗，我们还取了另外一个值，mMinimumVelocity对就是他。只要我们的速度超 过他，也就可以认为滑动了。好吧。看实现

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. final float vX = mVelocityTracker.getXVelocity(), vY = mVelocityTracker  
  2.         .getYVelocity();  
  3.   
  4. // If the velocity is greater than minVelocity, call  
  5. // listener  
  6. if (Math.max(Math.abs(vX), Math.abs(vY)) >= mMinimumVelocity) {  
  7.     mListener.onFling(mLastTouchX, mLastTouchY, -vX,  
  8.             -vY);  
  9. }  
正如我们所说的那样吧。

 

 8.好吧继续，放缩是在哪处理的呢？

 好吧，又有新姿势了，ScaleGestureDetector，可以接收MotionEvent，来检测放缩的发生， 有个回调监听器ScaleGestureDetector.OnScaleGestureListener，看看程序中怎么实现的他的回调方法

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override  
  2. public boolean onScale(ScaleGestureDetector detector) {  
  3.     float scaleFactor = detector.getScaleFactor();  
  4.   
  5.     if (Float.isNaN(scaleFactor) || Float.isInfinite(scaleFactor))  
  6.         return false;  
  7.   
  8.     mListener.onScale(scaleFactor,  
  9.             detector.getFocusX(), detector.getFocusY());  
  10.     return true;  
  11. }  
看到这是不是一切明了啊。呵呵。

 

 9.最后一个了，双击时间，长按事件呢？

 这个就简单些了， 因为我们经常会用到的GestureDetector，添加一个监听器就好了，来看看代码实现

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. mGestureDetector = new GestureDetector(imageView.getContext(),  
  2.         new GestureDetector.SimpleOnGestureListener() {  
  3.   
  4.             // forward long click listener  
  5.             @Override  
  6.             public void onLongPress(MotionEvent e) {  
  7.                 if (null != mLongClickListener) {  
  8.                     mLongClickListener.onLongClick(getImageView());  
  9.                 }  
  10.             }  
  11.         });  
  12.   
  13. mGestureDetector.setOnDoubleTapListener(new DefaultOnDoubleTapListener(this));  

结语

好了，PhotoView这个开源项目，我们就剖析到这了， 牵涉到的东西还是蛮多的， 可以说是小巧精悍，很多知识点对我们都有很大的启发，后续大家如果还有什么问题，或者有不正确的地方， 可以提出来，共同探讨。

 

 Github地址

https://github.com/chrisbanes/PhotoView

 

 

posted @ 2015-12-11 21:53  misybing  阅读(266)  评论(0)  编辑  收藏  举报