（五）多点触控之兼容ViewPager

在上一篇文章中，自定义的ZoomImageView已经实现了自由缩放，自由移动以及双击放大与缩小的功能。已经可以投入使用这个控件了。下面我们就在ViewPager中使用这个控件。如果你还没读过上一篇文章，可以点击下面的链接：

http://www.cnblogs.com/fuly550871915/p/4940193.html

一、在ViewPager中使用自定义的ZoomImageView

快速的代建起ViewPager吧。修改activity_main.xml中的代码，如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >

     <android.support.v4.view.ViewPager
       android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         >

     </android.support.v4.view.ViewPager>

</RelativeLayout>

然后修改MainActivity中的代码，如下：

 package com.example.zoom;

 import java.util.ArrayList;
 import java.util.List;

 import com.example.view.ZoomImageView;

 import android.os.Bundle;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.app.Activity;

 public class MainActivity extends Activity {

     private ViewPager mViewPager;
     private int[] imgIds = new int[]{R.drawable.mingxing0403,R.drawable.qw,
             R.drawable.ic_launcher};

     private List<ImageView> mImageViews =new ArrayList<ImageView>();

     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

         for(int i=0;i<imgIds.length;i++)
         {
             ZoomImageView ziv = new ZoomImageView(getApplicationContext());
             ziv.setImageResource(imgIds[i]);
             mImageViews.add(ziv);
         }

         mViewPager.setAdapter(new PagerAdapter() {

             public boolean isViewFromObject(View arg0, Object arg1) {

                 return arg0 == arg1;
             }

             public int getCount() {

                 return mImageViews.size();
             }

             public void destroyItem(ViewGroup container, int position,
                     Object object) {

                 container.removeView(mImageViews.get(position));
             }

             public Object instantiateItem(ViewGroup container, int position) {
                 container.addView(mImageViews.get(position));
                 return mImageViews.get(position);
             }

         });
     }

 }

代码很简单，我就不多说了。为了兼容ViewPager，我们还要修改ZoomImageView中的代码，如下：

 package com.example.view;

 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Matrix;
 import android.graphics.RectF;
 import android.graphics.drawable.Drawable;
 import android.support.v4.view.ViewPager;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.view.GestureDetector;
 import android.view.MotionEvent;
 import android.view.ScaleGestureDetector;
 import android.view.ScaleGestureDetector.OnScaleGestureListener;
 import android.view.View;
 import android.view.ViewConfiguration;
 import android.view.ViewTreeObserver.OnGlobalLayoutListener;
 import android.view.View.OnTouchListener;
 import android.widget.ImageView;

 public class ZoomImageView extends ImageView implements OnGlobalLayoutListener,
 OnScaleGestureListener, OnTouchListener
 {
     private boolean mOnce = false;//是否执行了一次

     /**
      * 初始缩放的比例
      */
     private float initScale;
     /**
      * 缩放比例
      */
     private float midScale;
     /**
      * 可放大的最大比例
      */
     private float maxScale;
     /**
      * 缩放矩阵
      */
     private Matrix scaleMatrix;

     /**
      * 缩放的手势监控类
      */
     private ScaleGestureDetector mScaleGestureDetector;

     //==========================下面是自由移动的成员变量======================================
     /**
      * 上一次移动的手指个数，也可以说是多点个数
      */
     private int mLastPoint;
     /**
      * 上次的中心点的x位置
      */
     private float mLastX;
     /**
      * 上一次中心点的y位置
      */
     private float mLastY;
     /**
      * 一个临界值，即是否触发移动的临界值
      */
     private int mScaleSlop;
     /**
      * 是否可移动
      */
     private boolean isCanDrag = false;

     //===================下面是双击放大与缩小功能的成员变量===============

     /**
      * 监测各种手势事件，例如双击
      */
     private GestureDetector mGestureDetector;
     /**
      * 是否正在执行双击缩放
      */
     private boolean isAutoScale ;

     public ZoomImageView(Context context)
     {
         this(context,null);
     }
     public ZoomImageView(Context context, AttributeSet attrs)
     {
         this(context, attrs,0);

     }
     public ZoomImageView(Context context, AttributeSet attrs, int defStyle)
     {
         super(context, attrs, defStyle);

         scaleMatrix = new Matrix();

         setScaleType(ScaleType.MATRIX);

         mScaleGestureDetector = new ScaleGestureDetector(context, this);
         //触摸回调
         setOnTouchListener(this);
         //获得系统给定的触发移动效果的临界值
         mScaleSlop = ViewConfiguration.get(context).getScaledTouchSlop();

         mGestureDetector = new GestureDetector(context,new GestureDetector.SimpleOnGestureListener()
         {
             public boolean onDoubleTap(MotionEvent e)
             {
                 if(isAutoScale)//如果正在执行双击缩放，直接跳过
                 {
                     return true;
                 }

                 float x = e.getX();
                 float y = e.getY();
                 //获得当前的缩放比例
                 float scale = getDrawableScale();

                 if(scale<midScale)//如果比midScale小，一律放大，否则一律缩小为initScale
                 {
 //                    scaleMatrix.postScale(midScale/scale,midScale/scale, x, y);
 //                    setImageMatrix(scaleMatrix);
                     postDelayed(new AutoScaleRunnable(midScale, x, y), 16);

                     isAutoScale = true;

                 }else
                 {
 //                    scaleMatrix.postScale(initScale/scale,initScale/scale, x, y);
 //                    setImageMatrix(scaleMatrix);
                     postDelayed(new AutoScaleRunnable(initScale, x, y), 16);

                     isAutoScale = true;
                 }

                 return true;

             };
         }
         );
     }
     /**
      *将 双击缩放使用梯度
      * @author fuly1314
      *
      */
     private class AutoScaleRunnable implements Runnable
     {

         private float targetScale;//缩放的目标值
         private float x;
         private float y;//缩放的中心点

         private float tempScale;

         private float BIGGER = 1.07F;
         private float SMALL = 0.93F;//缩放的梯度

         public AutoScaleRunnable(float targetScale, float x, float y) {
             super();
             this.targetScale = targetScale;
             this.x = x;
             this.y = y;

             if(getDrawableScale()<targetScale)
             {
                 tempScale = BIGGER;
             }
             if(getDrawableScale()>targetScale)
             {
                 tempScale = SMALL;
             }
         }

         public void run()
         {

             scaleMatrix.postScale(tempScale, tempScale, x, y);
             checkBoderAndCenter();
             setImageMatrix(scaleMatrix);

             float scale = getDrawableScale();

             if((scale<targetScale&&tempScale>1.0f)||(scale>targetScale&&tempScale<1.0f))
             {
                 postDelayed(this, 16);
             }else
             {
                 scaleMatrix.postScale(targetScale/scale, targetScale/scale, x, y);
                 checkBoderAndCenter();
                 setImageMatrix(scaleMatrix);

                 isAutoScale = false;
             }

         }

     }

     /**
      * 该方法在view与window绑定时被调用，且只会被调用一次，其在view的onDraw方法之前调用
      */
     protected void onAttachedToWindow()
     {
         super.onAttachedToWindow();
         //注册监听器
         getViewTreeObserver().addOnGlobalLayoutListener(this);
     }

     /**
      * 该方法在view被销毁时被调用
      */
     @SuppressLint("NewApi") protected void onDetachedFromWindow()
     {
         super.onDetachedFromWindow();
         //取消监听器
         getViewTreeObserver().removeOnGlobalLayoutListener(this);
     }

     /**
      * 当一个view的布局加载完成或者布局发生改变时，OnGlobalLayoutListener会监听到，调用该方法
      * 因此该方法可能会被多次调用，需要在合适的地方注册和取消监听器
      */
     public void onGlobalLayout()
     {
         if(!mOnce)
         {
             //获得当前view的Drawable
             Drawable d = getDrawable();

             if(d == null)
             {
                 return;
             }

             //获得Drawable的宽和高
             int dw = d.getIntrinsicWidth();
             int dh = d.getIntrinsicHeight();

             //获取当前view的宽和高
             int width = getWidth();
             int height = getHeight();

             //缩放的比例,scale可能是缩小的比例也可能是放大的比例，看它的值是大于1还是小于1
             float scale = 1.0f;

             //如果仅仅是图片宽度比view宽度大，则应该将图片按宽度缩小
             if(dw>width&&dh<height)
             {
                 scale = width*1.0f/dw;
             }
             //如果图片和高度都比view的大，则应该按最小的比例缩小图片
             if(dw>width&&dh>height)
             {
                 scale = Math.min(width*1.0f/dw, height*1.0f/dh);
             }
             //如果图片宽度和高度都比view的要小，则应该按最小的比例放大图片
             if(dw<width&&dh<height)
             {
                 scale = Math.min(width*1.0f/dw, height*1.0f/dh);
             }
             //如果仅仅是高度比view的大，则按照高度缩小图片即可
             if(dw<width&&dh>height)
             {
                 scale = height*1.0f/dh;
             }

             //初始化缩放的比例
             initScale = scale;
             midScale = initScale*2;
             maxScale = initScale*4;

             //移动图片到达view的中心
             int dx = width/2 - dw/2;
             int dy = height/2 - dh/2;
             scaleMatrix.postTranslate(dx, dy);

             //缩放图片
             scaleMatrix.postScale(initScale, initScale, width/2, height/2);    

             setImageMatrix(scaleMatrix);
             mOnce = true;
         }

     }
     /**
      * 获取当前已经缩放的比例
      * @return  因为x方向和y方向比例相同，所以只返回x方向的缩放比例即可
      */
     private float getDrawableScale()
     {

         float[] values = new float[9];
         scaleMatrix.getValues(values);

         return values[Matrix.MSCALE_X];

     }

     /**
      * 缩放手势进行时调用该方法
      *
      * 缩放范围：initScale~maxScale
      */
     public boolean onScale(ScaleGestureDetector detector)
     {

         if(getDrawable() == null)
         {
             return true;//如果没有图片，下面的代码没有必要运行
         }

         float scale = getDrawableScale();
         //获取当前缩放因子
         float scaleFactor = detector.getScaleFactor();

         if((scale<maxScale&&scaleFactor>1.0f)||(scale>initScale&&scaleFactor<1.0f))
         {
             //如果缩小的范围比允许的最小范围还要小，就重置缩放因子为当前的状态的因子
             if(scale*scaleFactor<initScale)
             {
                 scaleFactor = initScale/scale;
             }
             //如果缩小的范围比允许的最小范围还要小，就重置缩放因子为当前的状态的因子
             if(scale*scaleFactor>maxScale)
             {
                 scaleFactor = maxScale/scale;
             }

 //            scaleMatrix.postScale(scaleFactor, scaleFactor, getWidth()/2, getHeight()/2);
             scaleMatrix.postScale(scaleFactor, scaleFactor,detector.getFocusX(),
                     detector.getFocusY());

             checkBoderAndCenter();//处理缩放后图片边界与屏幕有间隙或者不居中的问题

             setImageMatrix(scaleMatrix);//千万不要忘记设置这个，我总是忘记
         }

         return true;
     }
     /**
      * 处理缩放后图片边界与屏幕有间隙或者不居中的问题
      */
     private void checkBoderAndCenter()
     {
        RectF rectf = getDrawableRectF();

        int width = getWidth();
        int height = getHeight();

        float delaX =0;
        float delaY = 0;

        if(rectf.width()>=width)
        {
            if(rectf.left>0)
            {
              delaX = - rectf.left;
            }

            if(rectf.right<width)
            {
                delaX = width - rectf.right;
            }
        }

        if(rectf.height()>=height)
        {
            if(rectf.top>0)
            {
                delaY = -rectf.top;
            }
            if(rectf.bottom<height)
            {
                delaY = height - rectf.bottom;
            }
        }

        if(rectf.width()<width)
        {
            delaX = width/2 - rectf.right+ rectf.width()/2;
        }

        if(rectf.height()<height)
        {
            delaY =  height/2 - rectf.bottom+ rectf.height()/2;
        }

        scaleMatrix.postTranslate(delaX, delaY);
     }
     /**
      * 获取图片根据矩阵变换后的四个角的坐标，即left,top,right,bottom
      * @return
      */
     private RectF getDrawableRectF()
     {
         Matrix matrix = scaleMatrix;
         RectF rectf = new RectF();
         Drawable d = getDrawable();
         if(d != null)
         {

             rectf.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
         }

         matrix.mapRect(rectf);
         return  rectf;
     }
     /**
      * 缩放手势开始时调用该方法
      */
     public boolean onScaleBegin(ScaleGestureDetector detector)
     {
         //返回为true，则缩放手势事件往下进行，否则到此为止，即不会执行onScale和onScaleEnd方法
         return true;
     }
     /**
      * 缩放手势完成后调用该方法
      */
     public void onScaleEnd(ScaleGestureDetector detector)
     {

     }

     /**
      * 监听触摸事件
      */
     public boolean onTouch(View v, MotionEvent event)
     {

         if(mGestureDetector.onTouchEvent(event))
         {
             return true;
         }

         if(mScaleGestureDetector != null)
         {
             //将触摸事件传递给手势缩放这个类
             mScaleGestureDetector.onTouchEvent(event);
         }

         //获得多点个数，也叫屏幕上手指的个数
         int pointCount = event.getPointerCount();

         float x =0;
         float y =0;//中心点的x和y

         for(int i=0;i<pointCount;i++)
         {
             x+=event.getX(i);
             y+=event.getY(i);
         }

         //求出中心点的位置
         x/= pointCount;
         y/= pointCount;

         //如果手指的数量发生了改变，则不移动
         if(mLastPoint != pointCount)
         {
             isCanDrag = false;
             mLastX = x;
             mLastY = y;

         }
         mLastPoint = pointCount;

         RectF rectf = getDrawableRectF();
         switch(event.getAction())
         {
         case MotionEvent.ACTION_DOWN:

482             if(rectf.width()>getWidth()+0.01||rectf.height()>getHeight()+0.01)
483             {
484
485                 //请求父类不要拦截ACTION_DOWN事件
486                 if(getParent() instanceof ViewPager)
487                 this.getParent().requestDisallowInterceptTouchEvent(true);
488             }

             break;
         case MotionEvent.ACTION_MOVE:

             if(rectf.width()>getWidth()+0.01||rectf.height()>getHeight()+0.01)
496             {
497
498                 //请求父类不要拦截ACTION_MOVE事件
499                 if(getParent() instanceof ViewPager)
500                 this.getParent().requestDisallowInterceptTouchEvent(true);
501             }

             //求出移动的距离
             float dx = x - mLastX;
             float dy = y- mLastY;

             if(!isCanDrag)
             {
                 isCanDrag = isCanDrag(dx,dy);
             }

             if(isCanDrag)
             {
                 //如果图片能正常显示，就不需要移动了
                 if(rectf.width()<=getWidth())
                 {
                     dx = 0;
                 }
                 if(rectf.height()<=getHeight())
                 {
                     dy = 0;
                 }

                 //开始移动
                 scaleMatrix.postTranslate(dx, dy);
                 //处理移动后图片边界与屏幕有间隙或者不居中的问题
                 checkBoderAndCenterWhenMove();
                 setImageMatrix(scaleMatrix);
             }

             mLastX = x;
             mLastY = y;

             break;
         case MotionEvent.ACTION_UP:
         case MotionEvent.ACTION_CANCEL:
                     mLastPoint = 0;
             break;

         }

         return true;
     }
     /**
      * 处理移动后图片边界与屏幕有间隙或者不居中的问题
      * 这跟我们前面写的代码很像
      */
     private void checkBoderAndCenterWhenMove() {

         RectF rectf = getDrawableRectF();

         float delaX = 0;
         float delaY = 0;
         int width = getWidth();
         int height = getHeight();

         if(rectf.width()>width&&rectf.left>0)
         {
             delaX = - rectf.left;
         }
         if(rectf.width()>width&&rectf.right<width)
         {
             delaX = width - rectf.right;
         }
         if(rectf.height()>height&&rectf.top>0)
         {
             delaY = - rectf.top;
         }
         if(rectf.height()>height&&rectf.bottom<height)
         {
             delaY = height - rectf.bottom;
         }

         scaleMatrix.postTranslate(delaX, delaY);
     }
     /**
      * 判断是否触发移动效果
      * @param dx
      * @param dy
      * @return
      */
     private boolean isCanDrag(float dx, float dy) {

         return Math.sqrt(dx*dx+dy*dy)>mScaleSlop;
     }

 }

红色代码是我们添加的。在这里，只需要请求父类ViewPager不要拦截触摸事件即可。然后我们运行程序，效果如下图：

依然使用真机测试的，效果完全符合我们的预期。至此，本项目完结了。一个支持多点触控的ImageView做了出来。

二、小结

在拖动图片的时候会与ViewPager发生冲突，因为ViewPager也会处理拖动事件。因此为了解决这个冲突，必须在ZoomImageView中添加代码：

    if(rectf.width()>getWidth()+0.01||rectf.height()>getHeight()+0.01)
            {

                //请求父类不要拦截ACTION_DOWN事件
                if(getParent() instanceof ViewPager)
                this.getParent().requestDisallowInterceptTouchEvent(true);
            }
            

注意红色代码是核心。