(干货) Android实现ImageVIew多点触控及双击缩放

支持多点触控,放大自由移动,双击可以放大缩小.直接上代码:

package com.cbt.view;

import android.content.Context;
import android.graphics.Matrix;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
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.View.OnTouchListener;
import android.view.ViewConfiguration;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;


/**
 * Created by caobotao on 15/12/10.
 */
public class ZoomImageView extends ImageView implements OnGlobalLayoutListener, OnScaleGestureListener, OnTouchListener {
    private boolean mOnce;
    //初始化时所发的比例
    private float mInitScale;
    //双击后放大的比例
    private float mMidScale;
    //可以放大的最大比例
    private float mMaxScale;

    private Matrix mMatrix;

    //通过ScaleGestureDetector可以获取到多点触控的缩放比例
    private ScaleGestureDetector mScaleGestureDetector;

    //--------------自由移动-------------

    //记录上一次触控点的数量
    private int mLastPointerCount;

    //上次多点触控的中心点位置
    private float mLastX;
    private float mLastY;

    private int MTouchSlop;
    private boolean isCanDrag;

    private boolean isCheckLeftAndRight;
    private boolean isCheckTopAndBottom;

    //-------------双击放大与缩小----------
    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 defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Log.i("ZoomImageView构造方法","ZoomImageView构造方法");
        mMatrix = new Matrix();
        super.setScaleType(ScaleType.MATRIX);
        mScaleGestureDetector = new ScaleGestureDetector(context,this);
        setOnTouchListener(this);
        MTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mGestureDetector = new GestureDetector(context,new GestureDetector.SimpleOnGestureListener(){

            @Override
            public boolean onDoubleTap(MotionEvent e) {
                //如果此刻正在进行自动的缓慢缩放,则禁止用户双击缩放
                if (isAutoScale){
                    return true;
                }

                float x = e.getX();
                float y = e.getY();

                if (getScale() < mMidScale) {
//                    mMatrix.postScale(mMidScale / getScale(),mMidScale / getScale(),x,y);
//                    setImageMatrix(mMatrix);
                    postDelayed(new AutoScaleRunnable(mMidScale,x,y),16);
                }
                else {
//                    mMatrix.postScale(mInitScale / getScale(),mInitScale / getScale(),x,y);
//                    setImageMatrix(mMatrix);
                    postDelayed(new AutoScaleRunnable(mInitScale,getWidth()/2,getHeight()/2),16);

                }
                isAutoScale = true;
                return true;
            }
        });
    }


    //当此view附加到窗体上时调用该方法
    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        //添加全局布局监听
        getViewTreeObserver().addOnGlobalLayoutListener(this);
    }

    //当此view从窗体上消除时调用该方法
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        //移除全局布局监听
        getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }

    /**
     *  获取ImageView加载完成的图片
     */
    @Override
    public void onGlobalLayout() {
        //由于onGlobalLayout可能会被调用多次,我们使用一个标志mOnce来判断是否已经调用
        if (!mOnce) {
            //获得此View的宽和高
            float width = getWidth();
            float height = getHeight();
            Log.i("onGlobalLayout Width",width+"");
            Log.i("onGlobalLayout height",height+"");
            //得到图片及其宽高
            Drawable d = getDrawable();
            if (d == null) {
                return;
            }
            float dw = d.getIntrinsicWidth();
            float dh = d.getIntrinsicHeight();
            Log.i("onGlobalLayout dw",dw+"");
            Log.i("onGlobalLayout dh",dh+"");
            /**
             *  比较图片的尺寸与此View的尺寸,如果图片的尺寸比此View的尺寸大,
             *  则缩放,反之,则放大,以达到与此View尺寸一致
             */

            //缩放比例
            float scale = 1.0f;

            //如果图片宽度比此View宽度大,且高度比此View小,则以宽度的比例缩小
            if (dw > width && dh < height) {
                scale = width / dw;
            }

            //如果图片宽度比此View宽度小,且高度比此View大,则以高度的比例缩小
            if (dw < width && dh > height) {
                scale = height / dh;
            }

            //如果图片宽度比此View宽度大,且高度比此View大,则以高度的比例与宽度的比例中大的一者缩小
            if ( (dw > width && dh > height) || (dw < width && dh < height) ) {
                scale = Math.max(width / dw,height/ dh);
            }

            //如果图片宽度比此View宽度小,且高度比此View小,则以高度的比例与宽度的比例中小的一者放大
            if (dw < width && dh < height) {
                scale = Math.min(width / dw,height / dh);
            }

            //分别设置初始化时的比例,双击后的比例,可以放大的最大比例
            mInitScale = scale;
            mMidScale = scale * 2;
            mMaxScale = scale * 4;
            //将图片移动到此View的中心
            float dx = width / 2 - dw / 2;//需要移动的x方向的距离
            float dy = height / 2 - dh / 2;//需要移动的y方向的距离

            //设置平移
            mMatrix.postTranslate(dx,dy);
            //设置缩放
            mMatrix.postScale(mInitScale,mInitScale,width / 2,height / 2 );
            setImageMatrix(mMatrix);

            mOnce = true;
        }
    }

    //获取当前图片的缩放比例
    public float getScale(){
        float[] values = new float[9];
        mMatrix.getValues(values);
        return values[Matrix.MSCALE_X];
    }

    /**
     * 缩放区间:[initScale,maxScale]
     */
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        //获取当前图片的缩放比例
        float scale = getScale();
        //多点触控缩放比例
        float scaleFactor = detector.getScaleFactor();

        if (getDrawable() == null){
            return true;
        }

        //进行缩放范围的控制
        if ((scale < mMaxScale && scaleFactor > 1.0f) || (scale > mInitScale && scaleFactor < 1.0f)) {
            if (scale * scaleFactor < mInitScale) {
                scaleFactor = mInitScale / scale;
            }
            if (scale * scaleFactor > mMaxScale) {
                scaleFactor = mMaxScale / scale;
            }
            //缩放
            mMatrix.postScale(scaleFactor,scaleFactor,detector.getFocusX(),detector.getFocusY());
            //在缩放的时候进行边界以及位置的控制
            checkBorderAndCenterWhenScale();

            setImageMatrix(mMatrix);
        }

        return true;
    }

    //在缩放的时候进行边界以及位置的控制
    private void checkBorderAndCenterWhenScale() {
        RectF rectf = getMatrixRectF();

        float deltaX = 0;
        float deltaY = 0;

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

        //缩放时进行边界检测,防止出现留白
        if (rectf.width() >= width) {
            if (rectf.left > 0) {
                deltaX = -rectf.left;
            }
            if (rectf.right < width) {
                deltaX = width - rectf.right;
            }
        }
        if (rectf.height() >= height) {
            if (rectf.top > 0) {
                deltaY = -rectf.top;
            }
            if (rectf.bottom < height) {
                deltaY = height - rectf.bottom;
            }
        }

        //如果宽度或者高度小于控件的宽度或高度,则让其居中
        if (rectf.width() < width) {
            deltaX = width / 2f - rectf.right + rectf.width() / 2f;
        }
        if (rectf.height() < height) {
            deltaY = height / 2f - rectf.bottom + rectf.height() / 2f;
        }

        mMatrix.postTranslate(deltaX,deltaY);

    }

    //获得图片缩放后的宽高,以及top,bottom,left,right
    private RectF getMatrixRectF(){
        Matrix matrix = mMatrix;
        RectF rectf = new RectF();
        Drawable d = getDrawable();
        if (d != null) {
            rectf.set(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
            matrix.mapRect(rectf);
        }
        return rectf;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {

    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

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

        float x = 0;
        float y = 0;
        int pointerCount = event.getPointerCount();

        //累加x和y方向的距离
        for (int i = 0; i < pointerCount; i++){
            x += event.getX(i);
            y += event.getY(i);
        }

        //获得中心点位置
        x /= pointerCount;
        y /= pointerCount;

        if (mLastPointerCount != pointerCount) {
            isCanDrag = false;
            mLastX = x;
            mLastY = y;
        }

        mLastPointerCount = pointerCount;

        RectF rectF = getMatrixRectF();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                /**
                 * 此View在ViewPager中使用时,图片放大后自由移动的事件会与
                 * ViewPager的左右切换的事件发生冲突,导致图片放大后如果左右
                 * 移动时不能自由移动图片,而是使ViewPager切换图片.这是由于事
                 * 件分发时外层的优先级比内层的高,使用下列判断可以解决
                 */
                if (rectF.width() > getWidth() || rectF.height() > getHeight()) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (rectF.width() > getWidth() || rectF.height() > getHeight()) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }

                //偏移量
                float dx = x - mLastX;
                float dy = y - mLastY;

                if (!isCanDrag){
                    isCanDrag = isMoveAction(dx,dy);
                }
                if (isCanDrag) {
                    if (getDrawable() != null) {
                        isCheckLeftAndRight = true;
                        isCheckTopAndBottom = true;

                        //如果宽度小于控件的宽度,不允许横向移动
                        if (rectF.width() < getWidth()) {
                            isCheckLeftAndRight = false;
                            dx = 0;
                        }

                        //如果高度小于控件的高度,不允许纵向移动
                        if (rectF.height() < getHeight()) {
                            isCheckTopAndBottom = false;
                            dy = 0;
                        }

                        mMatrix.postTranslate(dx,dy);
                        //当自由移动时进行边界检查,防止留白
                        checkBorderWhenTranslate();
                        setImageMatrix(mMatrix);
                    }
                }
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                mLastPointerCount = 0;
                break;
        }

        return true;
    }

    //当自由移动时进行边界检查,防止留白
    private void checkBorderWhenTranslate() {
        RectF rectF = getMatrixRectF();
        float deltaX = 0;
        float deltaY = 0;

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

        if (rectF.top > 0 && isCheckTopAndBottom) {
            deltaY = -rectF.top;
        }
        if (rectF.bottom < height && isCheckTopAndBottom) {
            deltaY = height - rectF.bottom;
        }
        if (rectF.left > 0 && isCheckLeftAndRight) {
            deltaX = -rectF.left;
        }
        if (rectF.right < width && isCheckLeftAndRight) {
            deltaX = width -rectF.right;
        }

        mMatrix.postTranslate(deltaX,deltaY);


    }

    //判断是否足以触发MOVE事件
    private boolean isMoveAction(float dx, float dy) {
        return Math.sqrt(dx * dx + dy * dy) > MTouchSlop;
    }


    //实现缓慢缩放
    private class AutoScaleRunnable implements Runnable{
        //缩放的目标比例
        private float mTargetScale;
        //缩放的中心点
        private float x;
        private float y;

        private final float BIGGER = 1.07f;
        private final float SMALLER = 0.93f;

        //临时缩放比例
        private float tempScale;

        public AutoScaleRunnable(float mTargetScale,float x,float y) {
            this.mTargetScale = mTargetScale;
            this.x = x;
            this.y = y;
            if (getScale() < mTargetScale) {
                tempScale = BIGGER;
            }
            if (getScale() > mTargetScale) {
                tempScale = SMALLER;
            }
        }

        @Override
        public void run() {
            //进行缩放
            mMatrix.postScale(tempScale,tempScale,x,y);
            checkBorderAndCenterWhenScale();
            setImageMatrix(mMatrix);

            float currentScale = getScale();
            //如果可以放大或者缩小
            if ((tempScale > 1.0f && currentScale < mTargetScale) || (tempScale < 1.0f && currentScale > mTargetScale) ){
                postDelayed(this,16);
            }
            //设置为目标缩放比例
            else {
                float scale = mTargetScale / currentScale;
                mMatrix.postScale(scale,scale,x,y);
                checkBorderAndCenterWhenScale();
                setImageMatrix(mMatrix);
                isAutoScale = false;
            }
        }
    }
}

 

作者：caobotao

出处：http://www.cnblogs.com/caobotao/p/5041737.html

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。