Android自定义ImageView实现图片缩放滑动，双击放大缩小，多点触控缩放

转载请注明出处：http://blog.csdn.net/woshizisezise/article/details/47445605

大家好，最近研究学习了一个自定义控件，ZoomImageView，安卓自定义缩放图片的控件，支持双击放大双击缩小，多点触控拉伸放大与缩小，并且很好的控制了图片的位置，不会出现缩小图片后图片左右出现空白的情况，缩小到默认值的时候，图片会居中填充窗口，可以推荐大家学习一下，先看下效果图，具体代码如下所示。

• （1）首先在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" >    <com.example.zoomimageview.view.ZoomImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scaleType="matrix"        android:src="@drawable/baby1" /></RelativeLayout>

• （2）现在也是实现最核心的一步了，编写我们的ZoomImageView控件了，代码中注释都已经标的很清楚了，大家可以参照着看：

  package com.example.zoomimageview.view;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.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;public class ZoomImageView extends ImageView implements OnGlobalLayoutListener,        OnScaleGestureListener, OnTouchListener {    private boolean mOnce;    /**     * 初始化时缩放的值     */    private float mInitScale;    /**     * 双击放大值到达的值     */    private float mMidScale;    /**     * 放大的最大值     */    private float mMaxScale;    private Matrix mScaleMatrix;    /**     * 捕获用户多指触控时缩放的比例     */    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 defStyle) {        super(context, attrs, defStyle);        // init        mScaleMatrix = new Matrix();        setScaleType(ScaleType.MATRIX);        setOnTouchListener(this);        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();        mScaleGestureDetector = new ScaleGestureDetector(context, this);        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) {                            postDelayed(new AutoScaleRunnable(mMidScale, x, y), 16);                            isAutoScale = true;                        } else {                            postDelayed(new AutoScaleRunnable(mInitScale, x, y), 16);                            isAutoScale = true;                        }                        return true;                    }                });    }    /**     * 自动放大与缩小     *      * @author [e-mail]     *      */    private class AutoScaleRunnable implements Runnable {        /**         * 缩放的目标值         */        private float mTargetScale;        // 缩放的中心点        private float x;        private float y;        private final float BIGGER = 1.07f;        private final float SMALL = 0.93f;        private float tmpScale;        /**         * @param mTargetScale         * @param x         * @param y         */        public AutoScaleRunnable(float mTargetScale, float x, float y) {            this.mTargetScale = mTargetScale;            this.x = x;            this.y = y;            if (getScale() < mTargetScale) {                tmpScale = BIGGER;            }            if (getScale() > mTargetScale) {                tmpScale = SMALL;            }        }        @Override        public void run() {            //进行缩放            mScaleMatrix.postScale(tmpScale, tmpScale, x, y);            checkBorderAndCenterWhenScale();            setImageMatrix(mScaleMatrix);            float currentScale = getScale();            if ((tmpScale >1.0f && currentScale <mTargetScale) ||(tmpScale<1.0f &&currentScale>mTargetScale)) {                //这个方法是重新调用run()方法                postDelayed(this, 16);            }else{                //设置为我们的目标值                float scale = mTargetScale/currentScale;                mScaleMatrix.postScale(scale, scale, x, y);                checkBorderAndCenterWhenScale();                setImageMatrix(mScaleMatrix);                isAutoScale = false;            }        }    }    /**     * 获取ImageView加载完成的图片     */    @Override    public void onGlobalLayout() {        if (!mOnce) {            // 得到控件的宽和高            int width = getWidth();            int height = getHeight();            // 得到我们的图片，以及宽和高            Drawable drawable = getDrawable();            if (drawable == null) {                return;            }            int dh = drawable.getIntrinsicHeight();            int dw = drawable.getIntrinsicWidth();            float scale = 1.0f;            // 图片的宽度大于控件的宽度，图片的高度小于空间的高度，我们将其缩小            if (dw > width && dh < height) {                scale = width * 1.0f / dw;            }            // 图片的宽度小于控件的宽度，图片的高度大于空间的高度，我们将其缩小            if (dh > height && dw < width) {                scale = height * 1.0f / dh;            }            // 缩小值            if (dw > width && dh > height) {                scale = Math.min(width * 1.0f / dw, height * 1.0f / dh);            }            // 放大值            if (dw < width && dh < height) {                scale = Math.min(width * 1.0f / dw, height * 1.0f / dh);            }            /**             * 得到了初始化时缩放的比例             */            mInitScale = scale;            mMaxScale = mInitScale * 4;            mMidScale = mInitScale * 2;            // 将图片移动至控件的中间            int dx = getWidth() / 2 - dw / 2;            int dy = getHeight() / 2 - dh / 2;            mScaleMatrix.postTranslate(dx, dy);            mScaleMatrix.postScale(mInitScale, mInitScale, width / 2,                    height / 2);            setImageMatrix(mScaleMatrix);            mOnce = true;        }    }    /**     * 注册OnGlobalLayoutListener这个接口     */    @Override    protected void onAttachedToWindow() {        super.onAttachedToWindow();        getViewTreeObserver().addOnGlobalLayoutListener(this);    }    /**     * 取消OnGlobalLayoutListener这个接口     */    @SuppressWarnings("deprecation")    @Override    protected void onDetachedFromWindow() {        super.onDetachedFromWindow();        getViewTreeObserver().removeGlobalOnLayoutListener(this);    }    /**     * 获取当前图片的缩放值     *      * @return     */    public float getScale() {        float[] values = new float[9];        mScaleMatrix.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) {                scale = mMaxScale / scale;            }            // 缩放            mScaleMatrix.postScale(scaleFactor, scaleFactor,                    detector.getFocusX(), detector.getFocusY());            checkBorderAndCenterWhenScale();            setImageMatrix(mScaleMatrix);        }        return true;    }    /**     * 获得图片放大缩小以后的宽和高，以及left，right，top，bottom     *      * @return     */    private RectF getMatrixRectF() {        Matrix matrix = mScaleMatrix;        RectF rectF = new RectF();        Drawable d = getDrawable();        if (d != null) {            rectF.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());            matrix.mapRect(rectF);        }        return rectF;    }    /**     * 在缩放的时候进行边界以及我们的位置的控制     */    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;        }        mScaleMatrix.postTranslate(deltaX, deltaY);    }    @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();        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:            if (rectF.width()>getWidth() +0.01|| rectF.height()>getHeight()+0.01) {                if(getParent() instanceof ViewPager)                getParent().requestDisallowInterceptTouchEvent(true);            }            break;        case MotionEvent.ACTION_MOVE:            if (rectF.width()>getWidth()+0.01 || rectF.height()>getHeight()+0.01) {                if(getParent() instanceof ViewPager)                getParent().requestDisallowInterceptTouchEvent(true);            }            float dx = x - mLastX;            float dy = y - mLastY;            if (!isCanDrag) {                isCanDrag = isMoveAction(dx, dy);            }            if (isCanDrag) {                if (getDrawable() != null) {                    isCheckLeftAndRight = isCheckTopAndBottom = true;                    // 如果宽度小于控件宽度，不允许横向移动                    if (rectF.width() < getWidth()) {                        isCheckLeftAndRight = false;                        dx = 0;                    }                    // 如果高度小于控件高度，不允许纵向移动                    if (rectF.height() < getHeight()) {                        isCheckTopAndBottom = false;                        dy = 0;                    }                    mScaleMatrix.postTranslate(dx, dy);                    checkBorderWhenTranslate();                    setImageMatrix(mScaleMatrix);                }            }            mLastX = x;            mLastY = y;            break;        case MotionEvent.ACTION_UP:        case MotionEvent.ACTION_CANCEL:            mLastPointerCount = 0;            break;        default:            break;        }        return true;    }    /**     * 当移动时进行边界检查     */    private void checkBorderWhenTranslate() {        RectF rectF = getMatrixRectF();        float deltaX = 0;        float deltaY = 0;        int width = getWidth();        int heigth = getHeight();        if (rectF.top > 0 && isCheckTopAndBottom) {            deltaY = -rectF.top;        }        if (rectF.bottom < heigth && isCheckTopAndBottom) {            deltaY = heigth - rectF.bottom;        }        if (rectF.left > 0 && isCheckLeftAndRight) {            deltaX = -rectF.left;        }        if (rectF.right < width && isCheckLeftAndRight) {            deltaX = width - rectF.right;        }        mScaleMatrix.postTranslate(deltaX, deltaY);    }    /**     * 判断是否是move     *      * @param dx     * @param dy     * @return     */    private boolean isMoveAction(float dx, float dy) {        return Math.sqrt(dx * dx + dy * dy) > mTouchSlop;    }}

• (3)下面我们将ZoomImageView应用到ViewPager上，所以现在新建一个布局文件vp.xml：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:background="#000000"    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"         /></RelativeLayout>

• （4）最后，我们在MainActivity上写一些测试用的数据，实现最终的一个效果：

  package com.example.zoomimageview;import com.example.zoomimageview.view.ZoomImageView;import android.app.Activity;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;public class MainActivity extends Activity {    private ViewPager mViewPager;    private int[] mImgs = new int[]{R.drawable.baby1,R.drawable.baby2,R.drawable.baby3,R.drawable.baby4};    private ImageView[] mImageViews = new ImageView[mImgs.length];    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.vp);        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);        mViewPager.setAdapter(new PagerAdapter() {            @Override            public Object instantiateItem(ViewGroup container, int position) {                ZoomImageView imageView = new ZoomImageView(getApplicationContext());                imageView.setImageResource(mImgs[position]);                container.addView(imageView);                mImageViews[position] = imageView;                return imageView;            }            @Override            public void destroyItem(ViewGroup container, int position,                    Object object) {                container.removeView(mImageViews[position]);            }            @Override            public boolean isViewFromObject(View arg0, Object arg1) {                return arg0 == arg1;            }            @Override            public int getCount() {                return mImageViews.length;            }        });    }}

到此，我们的代码已经全部写完了，供大家学习，希望对大家的进步有所帮助，谢谢！

• 更多资讯可以关注我的博客或者我的新浪微博：我是紫色紫色，不定期分享更多精彩内容，谢谢！

你的支持就是我的动力，欢迎大家热烈交流~欢迎大家订阅公众号，我会不定期更新资源，供大家一起学习。