首页 > 代码库 > Android:改造ViewPager优化MatrixImageView显示效果

Android:改造ViewPager优化MatrixImageView显示效果

2024-10-30 07:31:39   212人阅读

在上一篇Android:手把手教你打造可缩放移动的ImageView最后提出了一个注意点：当自定义的MatrixImageView如ViewPager、ListView等带有滑动效果的ViewGroup中时，ImageView自定义的拖动事件会和ViewGroup的滑动事件冲突，并且指出了冲突原因是由于ViewGroup拦截了Move事件的缘故。如果对于Touch事件的分发机制不甚了解的话，可以参考下这篇Android:30分钟弄明白Touch事件分发机制。

这篇文章将会在MatrixImageView的基础上，以ViewPager作为测试容器做进一步优化。

实现功能

 

  1. 当进行缩放操作时，手势不会同时触发ViewPager的滑动切换Item事件。
  2. 当进行拖动操作时，除非图片已经到达左右边界，否则不触发ViewPager的滑动切换Item事件。
  3. 当进行拖动操作时，若图片左边缘到达左边界，则可以向左滑动触发ViewPager切换至前一个Item;当图片右边缘到达右边界，则可以向右滑动触发ViewPager的切换至后一个Item。
  4. 每个down-up(cancel)事件周期内只执行一种类型的事务操作(缩放、拖动或者ViewPager切换Item)，防止多重事务互相干扰。
  5. 将事务处理封装到MatrixImageView类内，提供状态接口给ViewPager使用，方便适配多种ViewGroup。

实现原理

 

当ViewPager内嵌MatrixImageView时，由于MatrixImgaeView在Down事件中返回了true，表明ViewPager将捕获本次完整的Touch事件(Move-Ponit_Down-UP等等)，其中最重要的一个事件便是Move事件，因为ViewPager自身需要捕获Move事件在onTouch中进行切换Item操作，MatrixImageView的捕获意味着它将无法响应。不过，ViewPager本身控制着Touch事件的下发操作，每个Touch事件的下发都遵从从上至下层层递归，在MatrixImageView真正获得Move事件前，Move事件必须经过ViewPager的onInterceptTouchEvent和dispatchTouchEvent事件，前者执行拦截操作后者执行下发操作。ViewPager便是在onInterceptTouchEvent中对Move事件进行了过滤，当移动距离超过一定值时，它会拦截掉Move事件，阻止MatrixImageView继续处理Touch事件的权利，转而让自身的onTouch事件处理。于是，我们要做的便是重写onInterceptTouchEvent事件，通过判断MatrixImageView的状态决定是否拦截。

 

具体实现

 

由于容器ViewPager在满足条件的时候会拦截掉子View的touch事件，因此需要自定义个ViewPager修改拦截逻辑。当MatriImageView进行缩放和拖动时，我们不希望ViewPager拦截。具体代码如下：

public class AlbumViewPager extends ViewPager implements OnChildMovingListener {/**  当前子控件是否处理拖动状态  */     private boolean mChildIsBeingDragged=false;    @Override    public boolean onInterceptTouchEvent(MotionEvent arg0) {        if(mChildIsBeingDragged)            return false;        return super.onInterceptTouchEvent(arg0);    }@Override    public void startDrag() {        // TODO Auto-generated method stub        mChildIsBeingDragged=true;    }    @Override    public void stopDrag() {        // TODO Auto-generated method stub        mChildIsBeingDragged=false;    }}
public interface OnChildMovingListener{        public void  startDrag();        public void  stopDrag();    }

 通过判断变量mChildIsBeingDragged的值决定是否拦截，而mChildIsBeingDragged的值通过OnChildMovingListener接口由MatriImageView进行设置。别忘了在PagerAdapter的instantiateItem中给MatriImageView设置监听接口

    MatrixImageView imageView = (MatrixImageView) imageLayout.findViewById(R.id.image);    imageView.setOnMovingListener(AlbumViewPager.this);

ViewPager的改造便完成了，只需要新增一个变量和实现一个接口，之后对于事件的拦截操作都转到了MatrixImageView中。

接下去看下改造后的MatrixImageView的onTouch方法。

    /** 和ViewPager交互相关，判断当前是否可以左移、右移  */         boolean mLeftDragable;        boolean mRightDragable;          /**  是否第一次移动 */         boolean mFirstMove=false;        private PointF mStartPoint = new PointF();        @Override        public boolean onTouch(View v, MotionEvent event) {            // TODO Auto-generated method stub            switch (event.getActionMasked()) {            case MotionEvent.ACTION_DOWN:                //设置拖动模式                mMode=MODE_DRAG;                mStartPoint.set(event.getX(), event.getY());                isMatrixEnable();                startMove();                checkDragable();                break;            case MotionEvent.ACTION_UP:            case MotionEvent.ACTION_CANCEL:                reSetMatrix();                stopMove();                break;            case MotionEvent.ACTION_MOVE:                if (mMode == MODE_ZOOM) {                    setZoomMatrix(event);                }else if (mMode==MODE_DRAG) {                    setDragMatrix(event);                }else {                    stopMove();                }                break;            case MotionEvent.ACTION_POINTER_DOWN:                if(mMode==MODE_UNABLE) return true;                mMode=MODE_ZOOM;                mStartDis = distance(event);                break;            case MotionEvent.ACTION_POINTER_UP:                break;            default:                break;            }            return mGestureDetector.onTouchEvent(event);        }

其中加红部分的代码都是修改后的代码，逐一分析。

/**          *   子控件开始进入移动状态，令ViewPager无法拦截对子控件的Touch事件        */        private void startDrag(){            if(moveListener!=null) moveListener.startDrag();        }        /**          *   子控件开始停止移动状态，ViewPager将拦截对子控件的Touch事件        */        private void stopDrag(){            if(moveListener!=null) moveListener.stopDrag();        }

startDrag和stopDrag方法很简单，就是调用ViewPager传递进来的OnChildMovingListener接口进行mChildIsBeingDragged的设置。当监听到down事件时，表示开始拖动，当接收到up和cancel事件时，表示结束拖动，以这个逻辑来说，ViewGroup将永远无法拦截touch事件，所以我们还需要在其他地方设置stopDrag事件，后面说明。

接下去是在down事件中执行checkDragable方法：

        /**          *   根据当前图片左右边缘设置可拖拽状态        */        private void checkDragable() {            mLeftDragable=true;            mRightDragable=true;            mFirstMove=true;            float[] values=new float[9];            getImageMatrix().getValues(values);            //图片左边缘离开左边界，表示不可右移            if(values[Matrix.MTRANS_X]>=0)                mRightDragable=false;            //图片右边缘离开右边界，表示不可左移            if((mImageWidth)*values[Matrix.MSCALE_X]+values[Matrix.MTRANS_X]<=getWidth()){                mLeftDragable=false;            }        }

该方法将会重置mLeftDragable、mRightDragable、mFirstMove三个参数的状态。mLeftDragable表示当前状态下的Matrix可以向左拖动，mRightDragable表示当前状态下的Matrix可以向右拖动，mFirstMove为每次完整touch事件(从down到up或cancel)中的第一次拖动操作标志。其中mLeftDragable和mRightDragable都是根据Matrix矩阵的数值计算出来的。

由于前面功能需求的时候说过"每个down-up(cancel)事件周期内只执行一种类型的事务操作(缩放、拖动或者ViewPager切换Item)"，因此当进行缩放操作时，就不会再执行切换Item操作了，可以等缩放结束后执行up操作时stopDrag。而Move操作重点就是要识别是切换item还是拖动图片了。查看修改后的setDragMatrix代码

/**          *  设置拖拽状态下的Matrix        *  @param event           */        public void setDragMatrix(MotionEvent event) {            if(isZoomChanged()){                float dx = event.getX() - mStartPoint.x; // 得到x轴的移动距离                float dy = event.getY() - mStartPoint.y; // 得到x轴的移动距离                //避免和双击冲突,大于10f才算是拖动                if(Math.sqrt(dx*dx+dy*dy)>10f){                        mStartPoint.set(event.getX(), event.getY());                    //在当前基础上移动                    mCurrentMatrix.set(getImageMatrix());                    float[] values=new float[9];                    mCurrentMatrix.getValues(values);                    dy=checkDyBound(values,dy);                        dx=checkDxBound(values,dx,dy);                    mCurrentMatrix.postTranslate(dx, dy);                    setImageMatrix(mCurrentMatrix);                }            }else {                stopDrag();            }        }/**           *  和当前矩阵对比，检验dx，使图像移动后不会超出ImageView边界         *  @param values         *  @param dx         *  @return            */        private float checkDxBound(float[] values,float dx,float dy) {            float width=getWidth();            if(!mLeftDragable&&dx<0){                //加入和y轴的对比，表示在监听到垂直方向的手势时不切换Item                if(Math.abs(dx)*0.4f>Math.abs(dy)&&mFirstMove){                    stopDrag();                }                return 0;            }            if(!mRightDragable&&dx>0){                //加入和y轴的对比，表示在监听到垂直方向的手势时不切换Item                if(Math.abs(dx)*0.4f>Math.abs(dy)&&mFirstMove){                    stopDrag();                }                return 0;            }            mLeftDragable=true;            mRightDragable=true;            if(mFirstMove) mFirstMove=false;            if(mImageWidth*values[Matrix.MSCALE_X]<width){                return 0;                            }            if(values[Matrix.MTRANS_X]+dx>0){                dx=-values[Matrix.MTRANS_X];            }            else if(values[Matrix.MTRANS_X]+dx<-(mImageWidth*values[Matrix.MSCALE_X]-width)){                dx=-(mImageWidth*values[Matrix.MSCALE_X]-width)-values[Matrix.MTRANS_X];            }            return dx;        }

处理逻辑是这样的：

1.判断当前缩放级别是否是原始缩放级别(isZoomChanged()),如果未缩放过那将可以直接切换Item，在这直接stopDrag。

2.若进行了缩放，那判断是否累移动了10f，当移动了10f之后计算出x轴和y轴的移动量，并且通过checkDyBound方法计算出y轴的真实移动量

3.进入checkDxBound方法，首先判断当前是否能够左移，如果不能左移而实际的x轴偏移量是向左的，那就返回x的偏移量为0，防止左移。同时，如果当前是第一次移动，那就表示本次不是左移操作，而是向前切换item，于是执行stopDrag方法，令ViewPager拦截掉对MatrixImageView的事件分发。另外在这里加入和Y轴偏移量的对比，是为了防止执行的是垂直方向的滑动而导致stopDrag，ViewPager自身对于X轴偏移量/2小于Y轴偏移量的情况是不当成切换Item意图的，这里设置为*0.4可以保证不冲突。

4.右移同理。

5.当第一次左移和右移判断结果都不是切换Item后，将mLeftDragable和mRightDragable都设置为true，表示可以正常移动了。之后就和单个MatrixImageView的拖动处理一样了。

到此便完成了内嵌到ViewGroup内的MatriImageView的改造。下面还有两点显示优化。

首先在reSetMatrix中加入了新的功能：当缩放后的图片高度未达到ImageView高度时，在up和cancel之后会将其Y轴居中，防止“放大图片-Y轴移动图片-缩小图片”导致图片位置不对称。异常图效果如下：

技术分享

/**           *   重置Matrix         */        private void reSetMatrix() {            if(checkRest()){                mCurrentMatrix.set(mMatrix);                setImageMatrix(mCurrentMatrix);            }else {                //判断Y轴是否需要更正                float[] values=new float[9];                getImageMatrix().getValues(values);                float height=mImageHeight*values[Matrix.MSCALE_Y];                if(height<getHeight()){                    //在图片真实高度小于容器高度时，Y轴居中，Y轴理想偏移量为两者高度差/2，                    float topMargin=(getHeight()-height)/2;                    if(topMargin!=values[Matrix.MTRANS_Y]){                        mCurrentMatrix.set(getImageMatrix());                        mCurrentMatrix.postTranslate(0, topMargin-values[Matrix.MTRANS_Y]);                        setImageMatrix(mCurrentMatrix);                    }                }            }        }

优化了缩放操作的缩放x轴对称轴选择问题。在"图片放大-移动X轴-缩小图片"时，若直接以ImageView中心点为缩放原点，可能会导致缩放后的图片边缘离开ImageView边界。

出错图效果如下：

技术分享

/**           *  设置缩放Matrix         *  @param event            */        private void setZoomMatrix(MotionEvent event) {            //只有同时触屏两个点的时候才执行            if(event.getPointerCount()<2) return;            float endDis = distance(event);// 结束距离            if (endDis > 10f) { // 两个手指并拢在一起的时候像素大于10                float scale = endDis / mStartDis;// 得到缩放倍数                mStartDis=endDis;//重置距离                mCurrentMatrix.set(getImageMatrix());//初始化Matrix                float[] values=new float[9];                mCurrentMatrix.getValues(values);                scale = checkMaxScale(scale, values);                PointF centerF=getCenter(scale,values);                mCurrentMatrix.postScale(scale, scale,centerF.x,centerF.y);                setImageMatrix(mCurrentMatrix);                }        }/**           *  获取缩放的中心点。         *  @param scale         *  @param values         *  @return            */        private PointF getCenter(float scale,float[] values) {            //缩放级别小于原始缩放级别时或者为放大状态时，返回ImageView中心点作为缩放中心点            if(scale*values[Matrix.MSCALE_X]<mScale||scale>=1){                return new PointF(getWidth()/2,getHeight()/2);            }            float cx=getWidth()/2;            float cy=getHeight()/2;            //以ImageView中心点为缩放中心，判断缩放后的图片左边缘是否会离开ImageView左边缘，是的话以左边缘为X轴中心            if((getWidth()/2-values[Matrix.MTRANS_X])*scale<getWidth()/2)                cx=0;            //判断缩放后的右边缘是否会离开ImageView右边缘，是的话以右边缘为X轴中心            if((mImageWidth*values[Matrix.MSCALE_X]+values[Matrix.MTRANS_X])*scale<getWidth())                cx=getWidth();            return new PointF(cx,cy);        }

通过判断图片宽度，决定是以ImageView中点为X轴缩放原点，还是以左右边缘为缩放原点。

目前为止MatrixImageView的功能基本完善了，具体代码还是放在我的Github上的照相机Demo。该View如果有问题的可以在这篇文章下留言或私信我。

Android:改造ViewPager优化MatrixImageView显示效果


联系
我们