【移动应用开发技术】Android 在viewPager中双指缩放图片双击缩放图片单指拖拽图片的实现思路

【移动应用开发技术】Android在viewPager中双指缩放图片双击缩放图片单指拖拽图片的实现思路

我们就把这个问题叫做图片查看器吧，它的主要功能有：1、双击缩放图片。2、双指缩放图片。3、单指拖拽图片。为此这个图片查看器需要考虑以下的技术点：一、双击缩放图片：1、如果图片高度比屏幕的高度小得多，那么就将图片放大到高度与屏幕高度相等，否则就放大一个特定的倍数。2、如何判断是否到达这个倍数来停止缩放。3、判断完且停止放大后，图片可能已经超出了这个倍数需要的大小，如何回归到我们的目标大小。4、判断完且停止缩小后，图片宽度可能已经小于屏幕宽度，在两边留下了空白，如何重置为原来的大小。二、双指缩放图片：1、双指缩放，放大一个特定的倍数停止。2、如何判断是否到达这个倍数。3、放大停止后，图片可能已经超出了这个倍数需要的大小，如何回归到我们的目标大小。4、缩小停止后，图片宽度可能已经小于屏幕宽度，在两边留下了空白，如何重置为原来的大小。三、单指拖拽：1、当图片宽度小于或等于屏幕宽度的时候，禁止左右移动，当图片的高度小于屏幕高度的时候，禁止上下移动。2、移动图片时，如果图片的一边已经与屏幕之间有了空白，松手后恢复，让图片的这一边与屏幕边界重合。四、如何判断是双击，还是多指触控，还是单指。五、如何解决与viewPager的滑动冲突，当图片已经滑动到尽头无法滑动时，此时viewPager应该拦截事件。我们逐一来解决：在这里缩放图片是用matrix，因此首先要设置scaleType为matrix。

用手势判断双击行为。不要忘了在onTouch里面加上判断单指与多指触控，则在onTouch里面判断，要用event.getAction()&MotionEvent.ACTION_MASK来判断。有如下事件使我们要用到的：MotionEvent.ACTION_DOWN：在第一个点被按下时触发

MotionEvent.ACTION_UP:当屏幕上唯一的点被放开时触发

MotionEvent.ACTION_POINTER_DOWN:当屏幕上已经有一个点被按住，此时再按下其他点时触发。

MotionEvent.ACTION_POINTER_UP:当屏幕上有多个点被按住，松开其中一个点时触发（即非最后一个点被放开时）。

MotionEvent.ACTION_MOVE：当有点在屏幕上移动时触发。值得注意的是，由于它的灵敏度很高，而我们的手指又不可能完全静止（即使我们感觉不到移动，但其实我们的手指也在不停地抖动），所以实际的情况是，基本上只要有点在屏幕上，此事件就会一直不停地被触发。

在ACTION_MOVE中通过mode的大小来判断是单指还是双指。不过有一个令人伤心的事情，Android自己有一个bug。经过测试发现双指交换触碰图片的时候，程序会闪退，出现异常：pointIndexoutofrange。这是Android自己的bug。个人觉得最好得解决方法是自定义一个viewPager，然后在里面重写：onTouchEvent，onInterceptTouchEvent，然后捕获异常。这样程序就不会闪退了。我们来看看双击放大的的代码：

判断处于放大还是缩小状态的代码：（不是初始值就说明是处于放大状态）getMatrixValue()的代码如下，是为了取得当前的放大倍数，相对于一开始的图片来说checkRestScale()的代码如下，主要是为了判断当前的缩放级别是否小于最初始的缩放级别。checkBorderAndCenterWhenScale()的代码如下，否则图片缩放后位置会发生变化。接下看看双指缩放和单指拖拽：首先先来看一个方法，根据图片的matrix获得图片的边界范围，这个范围映射在rect上。（这个范围检测是用在单指拖拽上的）rect.bottom：图片下边界的纵坐标rect.left：图片左边界的横坐标rect.right：图片右边界的横坐标rect.top：图片上边界的纵坐标rectF.width()：图片宽度rectF.height()：图片高度需要注意的是Matrix对图片的操作都是操作ImageView里面的bitmap，ImageView是没有变化的，上面所说的屏幕边界其实ImageView的边界，getWidth(),getHeight()是ImageView的宽和高。方法backToPosition()主要是实现单指拖拽的技术点2，当手指快速划过去的时候，在检测到无法继续滑动前图片边界与屏幕边界已经出现了距离，所以松开手指的时候要复位，让图片边界与屏幕边界重合。获取两手指间的中点坐标计算两指触摸点的距离双指缩放图片reSetMatrix()的代码如下：checkRestScale()的代码在上面已经给出了。oldMatrix为最初始的Matrix。到这里还没有结束，设置Imageview的ScaleType为Matrix，那么图片不会主动缩放到适应屏幕，也不会处于屏幕中间，因此我们的自定义ImageView需要继承ViewTreeObserver.OnGlobalLayoutListener拿到的图片宽和高是bitmap的真实高度。初始的oldMatrix就是在这里设置的，然后作为初始模板，代表着图片没被动手改变的Matrix。至于方法setDoubleClickScale(rectF);只是设置双击放大的倍数而已，如果图片高度比屏幕的高度小得多，那么就将图片放大到高度与屏幕高度相等，否则就放大一个特定的倍数。必须在这里设置，因为在这里取到的rectF才能反映原始图片的边界，因为这时候还没有动手改变图片。到这里大概结束了，下面就贴出完整的代码：唉，虽然已经写完了，但是还有一个问题没有解决，就是移动图片到尽头，这时候不要放手，往反方向移动，就会