慕课网实现自定义多指触控双击缩放的IamgeView以及解决和ViewPager的滑动冲突代码摘要

最新推荐文章于 2020-12-29 07:55:30 发布
原创 最新推荐文章于 2020-12-29 07:55:30 发布 · 815 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#viewpager #ZoomImageV #imageview #多点-触控

一下代码实现了:
第一:多指触控相对手指中心点缩放;
第二:双击相对手指中心点控制速度缩放;
第三:实现放大后自由移动;
第四:解决和ViewPager一起使用时的滑动冲突;

首先就是自定义ZoomImageView

/**
 * Created by 90720 on 2016/9/10.
 */
public class ZoomImageView extends ImageView implements ViewTreeObserver.OnGlobalLayoutListener, ScaleGestureDetector.OnScaleGestureListener, View.OnTouchListener {


    //--------------自由缩放,边界控制
    boolean mOnce = false;

    /**
     * 初始化时图片缩放的值,也是缩小的极限
     */
    private float mInitScale;
    /**
     * 双击放大时图片放大的值
     */
    private float mMidScale;
    /**
     * 放大的极限
     */
    private float mMaxScale;

    /**
     * 通过矩阵实现缩放
     */
    private Matrix mScaleMatrix;

    /**
     * 通过系统处理多点触控的类实现多点触控
     */
    private ScaleGestureDetector mScaleGestureDetector;

    //------------自由移动,边界控制

    /**
     * 记录上一次多点触控的数量
     */
    private int mLastPonterCoutn;

    private float mLastX;
    private float mLastY;

    private int mTouchSlop;

    private boolean isCanDrag;
    /**
     * 判断移动的时候是否进行边界检查
     */
    private boolean isCheckLeftAndrRight;
    private boolean isCheckTopAndButtom;

    //---------------双击放大或缩小,边界控制
    private GestureDetector mGrstureDector;

    //判断若正在缩放,忽略再次双击
    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);

        mScaleMatrix = new Matrix();
        setScaleType(ScaleType.MATRIX);
        mScaleGestureDetector = new ScaleGestureDetector(context, this);
        /**
         * 不要忘记这个方法
         */
        setOnTouchListener(this);
        //对角线的标准值
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        //双击缩放:使用线程让图片有节奏缩放
        mGrstureDector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
            //实现即时缩放
//            @Override
//            public boolean onDoubleTap(MotionEvent e) {
//                //得到当前点击的xy坐标
//                float x=e.getX();
//                float y=e.getY();
//                if (getScale()<mMidScale){
//                    mScaleMatrix.postScale(mMidScale/getScale(),mMidScale/getScale(),x,y);
//                    setImageMatrix(mScaleMatrix);
//                }else {
//                    mScaleMatrix.postScale(mInitScale/getScale(),mInitScale/getScale(),x,y);
//                    setImageMatrix(mScaleMatrix);
//                }
            //实现有节奏缩放
            @Override
            public boolean onDoubleTap(MotionEvent e) {

                if (isAutoScale) {
                    return true;
                }
                //得到当前点击的xy坐标
                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;
            }
        });
    }

    /**
     * 注册
     */
    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        getViewTreeObserver().addOnGlobalLayoutListener(this);
    }

    /**
     * 解除注册
     */
    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @SuppressWarnings("deprecation")//压打一下:兼容低版本的api
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }

    /**
     * 检测布局完成后执行
     */
    @Override
    public void onGlobalLayout() {

        //获取ImageView加载完成后的图片

        if (!mOnce) {
            //得到控件的宽和高
            int width = getWidth();
            int height = getHeight();
            //得到图片以及宽和高
            Drawable d = getDrawable();
            if (d == null) {
                return;
            }
            float scale = 1.0f;//缩放比例
            int dw = d.getIntrinsicWidth();
            int dh = d.getIntrinsicHeight();

            /**
             * 如果图片的宽大于控件的宽,但是高度小于控件的高度,将其缩小
             */
            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) || (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;

            /**
             * 通过Matrix实现缩放逻辑
             */
            mScaleMatrix.postTranslate(dx, dy);
            mScaleMatrix.postScale(mInitScale, mInitScale, width / 2, height / 2);
            setImageMatrix(mScaleMatrix);

            mOnce = true;
        }

    }

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

    /**
     * 缩放区间:mInitScale-mMaxScale
     *
     * @param scaleGestureDetector
     * @return
     */
    @Override
    public boolean onScale(ScaleGestureDetector scaleGestureDetector) {

        float scale = getScale();
        float scaleFactor = scaleGestureDetector.getScaleFactor();
        if (getDrawable() == null) {
            return true;
        }
        //scaleFactor>1.0f 想要放大,反之想要缩小
        if ((scale < mMaxScale && scaleFactor > 1.0f) || (scale > mInitScale && scaleFactor < 1.0f)) {

            //如果缩放的结果比我们最小的要小,要重置为mInitScale
            if (scale * scaleFactor < mInitScale) {
                scaleFactor = mInitScale / scale;

            }
            if (scale * scaleFactor > mMaxScale) {
                scale = mMaxScale / scale;
            }
            //实现缩放,双指中心的缩放
            mScaleMatrix.postScale(scaleFactor, scaleFactor, scaleGestureDetector.getFocusX(), scaleGestureDetector.getFocusY());
            //检测图片边缘
            checkBorderAndCenterWhenScale();

            setImageMatrix(mScaleMatrix);
        }

        return true;
    }

    /**
     * 在缩放的同时进行边界控制和位置控制
     */
    private void checkBorderAndCenterWhenScale() {
        RectF rect = getMatrixRectF();
        float deltaX = 0;
        float deltaY = 0;

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

        //缩放完成后进行缩放,防止出现白边
        if (rect.width() >= width) {
            if (rect.left > 0) {
                deltaX = -rect.left;
            }
            if (rect.right < width) {
                deltaX = width - rect.right;
            }
        }
        if (rect.height() >= height) {
            if (rect.top > 0) {
                deltaY = -rect.top;
            }
            if (rect.bottom < height) {
                deltaY = height - rect.top;
            }
        }
        //如果宽度或者高度小于控件的宽或搞,让其居中
        if (rect.width() < width) {
            deltaX = width / 2f - rect.right + rect.width() / 2f;
        }
        if (rect.height() < height) {
            deltaY = height / 2f - rect.bottom + rect.height() / 2f;
        }

        mScaleMatrix.postTranslate(deltaX, deltaY);

    }

    /**
     * 获得图片缩放后的宽和高,以及左右宽高
     *
     * @return
     */
    private RectF getMatrixRectF() {
        Matrix matrix = mScaleMatrix;
        RectF rectf = new RectF();//矩形2x2
        Drawable d = getDrawable();
        if (d != null) {
            rectf.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
            matrix.mapRect(rectf);
        }
        return rectf;
    }

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

    @Override
    public void onScaleEnd(ScaleGestureDetector scaleGestureDetector) {

    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        //双击的时候不允许放大或者缩小
        if (mGrstureDector.onTouchEvent(motionEvent)) {
            return true;
        }

        //将手指触摸屏幕的事件传递给系统处理多点触控的类ScaleGestureDetector
        mScaleGestureDetector.onTouchEvent(motionEvent);
        float x = 0;
        float y = 0;
        //拿到多点触控的数量
        int pointerCount = motionEvent.getPointerCount();
        for (int i = 0; i < pointerCount; i++) {
            x += motionEvent.getX();
            y += motionEvent.getY();
        }
        //中心的点的位置是
        x /= pointerCount;
        y /= pointerCount;
        if (mLastPonterCoutn != pointerCount) {
            mLastX = x;
            mLastY = y;
        }
        mLastPonterCoutn = pointerCount;
        RectF rectF = getMatrixRectF();
        switch (motionEvent.getAction()) {

            case MotionEvent.ACTION_DOWN:
                if (rectF.width() > getWidth() + 0.01f || rectF.height() > getHeight() + 0.01f) {
                    //当图片被放大后请求不被父布局拦截触摸事件
                    if (getParent() instanceof ViewPager) {
                        getParent().requestDisallowInterceptTouchEvent(true);
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (rectF.width() > getWidth() + 0.01f || rectF.height() > getHeight() + 0.01f) {
                    //当图片被放大后请求不被父布局拦截触摸事件
                    if (getParent() instanceof ViewPager) {
                        getParent().requestDisallowInterceptTouchEvent(true);
                    }
                }
                isCanDrag = false;
                float dx = x - mLastX;
                float dy = y - mLastY;
                if (!isCanDrag) {
                    isCanDrag = isMoveAction(dx, dy);
                }

                if (isCanDrag) {
                    if (getDrawable() != null) {
                        //默认可以检测
                        isCheckLeftAndrRight = isCheckTopAndButtom = true;
                        //如果宽度小于控件宽度不允许横向移动
                        if (rectF.width() < getWidth()) {
                            isCheckLeftAndrRight = false;
                            dx = 0;
                        }
                        //如果高度小于控件高度不允许纵向移动
                        if (rectF.height() < getHeight()) {
                            isCheckTopAndButtom = false;
                            dy = 0;
                        }
                        mScaleMatrix.postTranslate(dx, dy);
                        checkBorderWhenTranslate();
                        setImageMatrix(mScaleMatrix);
                    }

                }
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mLastPonterCoutn = 0;
                break;

        }
        return true;
    }

    /**
     * 当图片移动的时候进行边界检查
     */
    private void checkBorderWhenTranslate() {
        RectF rectF = getMatrixRectF();
        float deltaX = 0;
        float delatY = 0;
        int width = getWidth();
        int height = getHeight();
        if (rectF.top > 0 && isCheckTopAndButtom) {
            delatY = -rectF.top;

        }
        if (rectF.bottom < height && isCheckTopAndButtom) {
            delatY = height - rectF.bottom;
        }
        if (rectF.left > 0 && isCheckLeftAndrRight) {
            deltaX = -rectF.left;
        }
        if (rectF.right < width && isCheckLeftAndrRight) {
            deltaX = width - rectF.right;
        }
        mScaleMatrix.postTranslate(deltaX, delatY);
    }

    private boolean isMoveAction(float dx, float dy) {

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

    /**
     * 开启线程实现有节奏缩放
     */
    private class AutoScaleRunnable implements Runnable {

        //单次缩放比例
        private final float BIGGER = 1.07f;
        private final float SMALLER = 0.93f;
        /**
         * 缩放的目标值
         */
        private float mTargetScale;
        //缩放的中心点
        private float x;
        private float y;
        private float tmpScale;

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

            if (getScale() < mTargetScale) {
                tmpScale = BIGGER;//想放大
            }
            //不用else预防两者=
            if (getScale() > mTargetScale) {
                tmpScale = SMALLER;//想缩小
            }

        }

        @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)) {
                postDelayed(this, 16);
            } else {
                //设置为我们的目标值
                float scale = mTargetScale / currentScale;
                mScaleMatrix.postScale(scale, scale, x, y);
                checkBorderAndCenterWhenScale();
                setImageMatrix(mScaleMatrix);
                isAutoScale = false;

            }
        }
    }
}

其次是ViewPager的适配器

/**
 * Created by 90720 on 2016/9/12.
 */
public class MyPagerAdapter extends PagerAdapter{

    private ImageView[] mImageViews;
    private Context context;
    private int[] mImg;

    public MyPagerAdapter(Context context, ImageView[] mImageViews, int[] mImg) {
        this.context = context;
        this.mImageViews = mImageViews;
        this.mImg = mImg;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mImageViews[position]);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ZoomImageView imageView=new ZoomImageView(context);
        imageView.setImageResource(mImg[position]);
        container.addView(imageView);
        mImageViews[position]=imageView;
        return imageView;
    }

    @Override
    public int getCount() {
        return mImageViews.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
}

最后是MainActivity代码

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private int[] mImgs=new int[]{R.drawable.xinru,R.drawable.xinru,R.drawable.xinru};
    private ImageView[]mImageViews=new ImageView[mImgs.length];
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager= (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new MyPagerAdapter(this,mImageViews,mImgs));

    }
}

就这样吧

自定义viewpager，实现图片多指触控，双击，放大或缩小，和viewpager的冲突
wangyaqian1212的博客
08-09 469
//在main中的布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_hei
viewpager实现自动滑动以及手势滑动功能
Anny_Lin的博客
11-08 3628
今天在做项目的时候，有一个viewpgaer展示图片的页面，第一反应是去网上查找，后来看了好多文章，其实也就是那么两三篇文章，其他的都是转载来转载去的，主要就是运用线程来进行无限循环进行实现的操作，个人感觉并不需要运用到线程，尤其是你写了死循环后，线程的回收就是个问题，所以就寻思着自己实现功能好了。 先看效果图吧： 实现思路： 在项目里比较重要的两个东西，一个是ha
基于ImageView的多点触控，双击放大缩小以及结合ViewPager的事件冲突
10-01
本文通过一个自定义控件ZoomImageView，实现多点触控（移动，多点缩放），双击放大缩小，并在放大缩小过程自解决边界白边的情况，同时结合ViewPager的使用，并解决存在的事件冲突情况。
安卓控件使用系列32：ViewPager多页面滑动控件的使用方法1
luoshiwutai的博客
10-03 595
在安卓手机中，经常会使用页面侧滑的效果，那么我们来将这样的使用方法分享给大家。 这个例子实现的是三个带有不同标题和内容的页面之间的侧滑效果。 整体思路：在xml控件中添加android.support.v4.view.ViewPager和android.support.v4.view.PagerTitleStrip，然后新建三个xml文件，各添加一个不同的控件；然后在活动中把三个布局文件加载到
ViewPager 常见滑动冲突解决方法
Happy learning
02-14 2617
情况1:ViewPager中的第一个child View 中的子元素要求可以水平滑动. 在实际中遇到的问题是ViewPager中的第一个child View 中的子元素一件拿到了Touch(action=move)的事件,但是滑动的时候距离总是小于ViewConfiguration.get(context).getScaledPagingTouchSlop() ,考虑到ViewPager 本
自定义IamgeView解决不同分辨率下图片拉伸变形的问题
06-08
在提供的SmartImageViewDemo中，应该包含了上述功能的实现，你可以参考其源代码进一步学习和应用到自己的项目中。 总的来说，自定义ImageView是解决图片拉伸问题的有效手段，它需要对Android的布局测量机制有深入...
可以缩放的IamgeView
09-19
找了很久才找到的，支持双击双指缩放的ImageView，而且跟ViewPager不冲突。
Android自定义View【实战教程】4⃣️----BitmapShader详解及圆形、圆角、多边形实现
李彬博客专栏
02-16 2991
BitmapShader 的作用官方定义：Shader used to draw a bitmap as a texture BitmapShader的作用是使用特定的图片来作为纹理来使用。简单使用BitmapShader是Shader的子类，可以通过Paint.setShader（Shader shader）进行设置。 BitmapShader 的构造函数public BitmapShader
使用ViewPager实现页面滑动(点击)跳转效果(类似于微信页面)
mutoujian126的专栏
09-05 2775
仿微信页面，实现滑动跳转的效果，点击也可以，使用到ViewPager的知识和动画的效果，动画主要用在
Android自定义View实现图片标记功能
资源摘要信息: "ImageAddMarker是一个基于Android平台开发的自定义View组件，其核心功能是在显示图片的同时，允许用户在图片上添加可交互的自定义标记。这些标记可以响应用户的点击事件，同时具备被删除的能力。通过...
完美兼容viewpager和photoview 滑动翻页 双击和手势缩放
10-17
实现利用viewpager和photoview实现图片轮播效果，完美兼容。解决了绝大部分常见BUG 可实现图片的双击放大，手势的缩放，图片的左右滑动效果 解决了图片放大后左右切换时与viewpager冲突的BUG 解决了图片放大查看后，切换完页面再切换回来时，图片没有还原原始大小的BUG 欢迎留言讨论！
ViewPager子View滑动事件冲突解决
betterAndroider的博客
11-10 3744
事件分发：public boolean dispatchTouchEvent(MotionEvent ev) Android事件以隧道方式逐层向下传递。事件首先由dispatchTouchEvent方法分发，分发逻辑如下： return true；由该dispatchTouchEvent方法消费并且停止分发。 return false；返回给父view的onTouch方法处理
这可能是ViewPager2滑动冲突最全处理方案
smily的博客
12-29 7136
自去年12月份ViewPager2正式版发布以后，ViewPager2已经开始逐渐替代旧版本的ViewPager。许多开发者也已经在项目中使用了ViewPager2。BannerViewPager作为一个封装ViewPager的轮播图库在第一时间迁移到了ViewPager2，并在2020年4月份发布了ViewPager2版本的BVP 3.0。相比ViewPager，ViewPager2的功能不可谓不强大，但ViewPager2却也有不少的问题。其中最大的一个问题就是滑动冲突。我们知道，两个横向滑动的View
自定义imageview缩放与viwepager的滑动冲突
qq_27651253的博客
06-24 362
最近要做imageview的缩放 , 然后就在网上找了一篇照着写了.  但是放到viewpager中的时候,发现放大图片滑动的时候跟viewpager的滑动冲突了.   就修改了下.   因为我这边是用的fresco加载的图片,所以就直接继承了simpleDraweeView. 先上代码 package com.holly.android.holly.uc.view; import
Matrix矩阵的基础案例与分析
qiantanlong的博客
11-07 2785
使用Matrix矩阵进行矩形的绘制，进而属性matrix的使用方式，深入了解matrix的原理。 //1、使用默认的Matrix，绘制默认状态的矩形，宽高都是50像素 Rect rect = new Rect(0, 0, 50, 50); //将Matrix矩阵设置给canvas，并绘制矩形 canvas.setMatrix(mScaleMa...
Android中图像变换Matrix的原理、代码验证和应用(二)
热门推荐
玄机逸士的专栏
11-19 1万+
第二部分 代码验证 在第一部分中讲到的各种图像变换的验证代码如下，一共列出了10种情况。如果要验证其中的某一种情况，只需将相应的代码反注释即可。试验中用到的图片： 其尺寸为162 x 251。   每种变换的结果，请见代码之后的说明。 package com.pat.testtransformmatrix; import android.app.Activity; import
Android多点触控之ZoomImageView完全解析
tijjyire的博客
06-26 6311
ZoomImageView是一个类似photoview的图片预览控件，实现了对图片的手势放大缩小平移，以及双击放大缩小解决和viewpager滑动冲突等功能，主要是通过GestureDetector,Matrix相关api以及对事件的ontouch处理实现的，这个代码网上能搜索到很多，但是因为注释少所以要完全读懂有些困难，于是本人整理了一段时间，写了一个完整的注释版本，基本每行代码都做到了讲解，大家
ViewPager+可缩放ImageView的使用
Cat的专栏
09-12 3134
最近项目遇到一个需求，就是在ViewPager里面放置图片，而且每个图片需要可以缩放的。        这种需求相对来说不是很难了，因为网上绝对有很多类似的开源，大家拿过来就可以用了。我之前也是这么做的，直到我发现开源框架没有提供我需要的那个功能之后，我就放弃了。 之前我是在ViewPager里面使用PhotoView这个开源框架的。但是他没有处理图片缩放与ViewPager的滑动的一个冲突。具
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值