Android 在viewPager中双指缩放图片双击缩放图片单指拖拽图片的实现思路
我们就把这个问题叫做图片查看器吧,它的主要功能有:
1、双击缩放图片。
2、双指缩放图片。
3、单指拖拽图片。
为此这个图片查看器需要考虑以下的技术点:
一、双击缩放图片:
1、如果图片高度比屏幕的高度小得多,那么就将图片放大到高度与屏幕高度相等,否则就放大一个特定的倍数。
2、如何判断是否到达这个倍数来停止缩放。
3、判断完且停止放大后,图片可能已经超出了这个倍数需要的大小,如何回归到我们的目标大小。
4、判断完且停止缩小后,图片宽度可能已经小于屏幕宽度,在两边留下了空白,如何重置为原来的大小。
二、双指缩放图片:
1、双指缩放,放大一个特定的倍数停止。
2、如何判断是否到达这个倍数。
3、放大停止后,图片可能已经超出了这个倍数需要的大小,如何回归到我们的目标大小。
4、缩小停止后,图片宽度可能已经小于屏幕宽度,在两边留下了空白,如何重置为原来的大小。
三、单指拖拽:
1、当图片宽度小于或等于屏幕宽度的时候,禁止左右移动,当图片的高度小于屏幕高度的时候,禁止上下移动。
2、移动图片时,如果图片的一边已经与屏幕之间有了空白,松手后恢复,让图片的这一边与屏幕边界重合。
四、
如何判断是双击,还是多指触控,还是单指。
五、
如何解决与viewPager的滑动冲突,当图片已经滑动到尽头无法滑动时,此时viewPager应该拦截事件。
我们逐一来解决:
publicclassMyImageViewextendsImageViewimplementsViewTreeObserver.OnGlobalLayoutListener,View.OnTouchListener{ publicMyImageView(Contextcontext,AttributeSetattrs){ super(context,attrs); super.setScaleType(ScaleType.MATRIX); setOnTouchListener(this); /** *双击实现图片放大缩小 */ mGestureDetector=newGestureDetector(context, newGestureDetector.SimpleOnGestureListener(){ @Override publicbooleanonDoubleTap(MotionEvente){ changeViewSize(e); returntrue; } }); }
在这里缩放图片是用matrix,因此首先要设置scaleType为matrix。
用手势判断双击行为。不要忘了在onTouch里面加上
if(mGestureDetector.onTouchEvent(event)) returntrue;
判断单指与多指触控,则在onTouch里面判断,要用event.getAction()&MotionEvent.ACTION_MASK来判断。
//多指触控模式,单指,双指 privateintmode; privatefinalstaticintSINGLE_TOUCH=1;//单指 privatefinalstaticintDOUBLE_TOUCH=2;//双指 @Override publicbooleanonTouch(Viewview,MotionEventevent){ rectF=getMatrixRectF(); if(mGestureDetector.onTouchEvent(event)) returntrue; switch(event.getAction()&event.getActionMasked()){ caseMotionEvent.ACTION_DOWN: mode=SINGLE_TOUCH; break; caseMotionEvent.ACTION_MOVE: if(mode>=DOUBLE_TOUCH)//双指缩放 { } if(mode==SINGLE_TOUCH)//单指拖拽 { } break; caseMotionEvent.ACTION_POINTER_DOWN: mode+=1;break; caseMotionEvent.ACTION_POINTER_UP: mode-=1; break; caseMotionEvent.ACTION_UP: mode=0; break; //在ACTION_MOVE中,事件被拦截了之后,有时候ACTION_UP无法触发,所以加上了ACTION_CANCEL caseMotionEvent.ACTION_CANCEL: mode=0; break; default: break; } returntrue; }
有如下事件使我们要用到的:
MotionEvent.ACTION_DOWN:在第一个点被按下时触发
MotionEvent.ACTION_UP:当屏幕上唯一的点被放开时触发
MotionEvent.ACTION_POINTER_DOWN:当屏幕上已经有一个点被按住,此时再按下其他点时触发。
MotionEvent.ACTION_POINTER_UP:当屏幕上有多个点被按住,松开其中一个点时触发(即非最后一个点被放开时)。
MotionEvent.ACTION_MOVE:当有点在屏幕上移动时触发。值得注意的是,由于它的灵敏度很高,而我们的手指又不可能完全静止(即使我们感觉不到移动,但其实我们的手指也在不停地抖动),所以实际的情况是,基本上只要有点在屏幕上,此事件就会一直不停地被触发。
在ACTION_MOVE中通过mode的大小来判断是单指还是双指。
不过有一个令人伤心的事情,Android自己有一个bug。经过测试发现双指交换触碰图片的时候,程序会闪退,出现异常:pointIndexoutofrange。这是Android自己的bug。个人觉得最好得解决方法是自定义一个viewPager,然后在里面重写:onTouchEvent,onInterceptTouchEvent,然后捕获异常。
@Override publicbooleanonTouchEvent(MotionEventev){ try{ returnsuper.onTouchEvent(ev); }catch(IllegalArgumentExceptionex){ ex.printStackTrace(); } returnfalse; } @Override publicbooleanonInterceptTouchEvent(MotionEventev){ try{ returnsuper.onInterceptTouchEvent(ev); }catch(IllegalArgumentExceptionex){ ex.printStackTrace(); } returnfalse; }
这样程序就不会闪退了。
我们来看看双击放大的的代码:
/** *双击缩放图片 */ privatevoidchangeViewSize(MotionEvente){ //获取双击的坐标 finalfloatx=e.getX(); finalfloaty=e.getY(); //如果此时还在缩放那就直接返回 if(animator!=null&&animator.isRunning()) return; //判断是处于放大还是缩小的状态 if(!isZoomChanged()){ animator=ValueAnimator.ofFloat(1.0f,2.0f); }else{ animator=ValueAnimator.ofFloat(1.0f,0.0f); } animator.setTarget(this); animator.setDuration(500); animator.setInterpolator(newDecelerateInterpolator()); animator.start(); animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){ @Override publicvoidonAnimationUpdate(ValueAnimatorvalueAnimator){ Floatvalue=(Float)animator.getAnimatedValue(); matrix.postScale(value,value,x,y); checkBorderAndCenterWhenScale();//在缩放后让图片居中 setImageMatrix(matrix); /** *控制缩小的范围 *如果已经小于初始大小,那么恢复到初始大小,然后停止 */ if(checkRestScale()){ matrix.set(oldMatrix);//oldMatrix为最原始的matrix setImageMatrix(matrix); return; } /** *控制放大的范围 *如果已经大于目标的放大倍数,那么直接置为目标的放大倍数 *然后停止 */ if(getMatrixValueX()>=mDoubleClickScale) { matrix.postScale(mDoubleClickScale/getMatrixValueX(),mDoubleClickScale/getMatrixValueX(),x,y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); return; } } }); }
判断处于放大还是缩小状态的代码:(不是初始值就说明是处于放大状态)
/** *判断缩放级别是否是改变过 * *@returntrue表示非初始值,false表示初始值 */ privatebooleanisZoomChanged(){ float[]values=newfloat[9]; getImageMatrix().getValues(values); //获取当前X轴缩放级别 floatscale=values[Matrix.MSCALE_X]; //获取初始时候的X轴缩放级别,两者做比较 oldMatrix.getValues(values); returnscale!=values[Matrix.MSCALE_X]; }
getMatrixValue()的代码如下,是为了取得当前的放大倍数,相对于一开始的图片来说
privatefloatgetMatrixValueX() { //TODOAuto-generatedmethodstub float[]values=newfloat[9]; getImageMatrix().getValues(values); //获取当前X轴缩放级别 floatscale=values[Matrix.MSCALE_X]; //获取原始Matrix的X轴缩放级别 oldMatrix.getValues(values); //返回放大的倍数 returnscale/values[Matrix.MSCALE_X]; }
checkRestScale()的代码如下,主要是为了判断当前的缩放级别是否小于最初始的缩放级别。
/** *判断是否需要重置 * *@return当前缩放级别小于原始缩放级别时,重置 */ privatebooleancheckRestScale(){ //TODOAuto-generatedmethodstub float[]values=newfloat[9]; getImageMatrix().getValues(values); //获取当前X轴缩放级别 floatscale=values[Matrix.MSCALE_X]; //获取原始的X轴缩放级别,两者做比较 oldMatrix.getValues(values); returnscalecheckBorderAndCenterWhenScale()的代码如下,否则图片缩放后位置会发生变化。
/** *在缩放时,进行图片显示范围的控制 */ privatevoidcheckBorderAndCenterWhenScale() { RectFrect=getMatrixRectF(); floatdeltaX=0; floatdeltaY=0; intwidth=getWidth(); intheight=getHeight(); //如果宽或高大于屏幕,则控制范围 if(rect.width()>=width) { if(rect.left>0) { deltaX=-rect.left; } if(rect.right=height) { if(rect.top>0) { deltaY=-rect.top; } if(rect.bottom 接下看看双指缩放和单指拖拽:
@Override publicbooleanonTouch(Viewview,MotionEventevent){ rectF=getMatrixRectF();//获取图片边界范围 if(mGestureDetector.onTouchEvent(event)) returntrue; switch(event.getAction()&event.getActionMasked()){ caseMotionEvent.ACTION_DOWN: //如果放大后图片的边界超出了屏幕,那么就拦截事件,不让viewPager处理 if(rectF.width()>getWidth()||rectF.height()>getHeight()){ getParent().requestDisallowInterceptTouchEvent(true); } mode=SINGLE_TOUCH; x=(int)event.getRawX(); y=(int)event.getRawY(); break; caseMotionEvent.ACTION_MOVE: if(mode>=DOUBLE_TOUCH)//双指缩放 { getParent().requestDisallowInterceptTouchEvent(true); newDist=calculateDist(event);//计算距离 Pointpoint=getMiPoint(event);//获取两手指间的中点坐标 if(newDist>oldDist+1)//放大(加一是为了防止抖动) { changeViewSize(oldDist,newDist,point);//根据距离实现放大缩小 oldDist=newDist; } if(oldDist>newDist+1)//缩小 { changeViewSize(oldDist,newDist,point); oldDist=newDist; } } if(mode==SINGLE_TOUCH)//单指拖拽 { floatdx=event.getRawX()-x; floatdy=event.getRawY()-y; //如果移动过程中图片的边界超出了屏幕,那么就拦截事件,不让viewPager处理 if(rectF.width()>getWidth()||rectF.height()>getHeight()){ getParent().requestDisallowInterceptTouchEvent(true); } //如果向右移动图片到了尽头,那么就不要拦截事件,让viewPager处理 if(rectF.left>=0&&dx>0) getParent().requestDisallowInterceptTouchEvent(false); //如果向左移动到了尽头,那么就不要拦截事件,让viewPager处理 if(rectF.right<=getWidth()&&dx<0) getParent().requestDisallowInterceptTouchEvent(false); if(getDrawable()!=null){ //如果图片宽度或高度没有超出屏幕,那么就禁止左右或上下滑动 if(rectF.width()<=getWidth()) dx=0; if(rectF.height()=0&&dy>0) dy=0; //如果图片向上移动到了尽头,不让它继续移动 if(rectF.bottom<=getHeight()&&dy<0) dy=0; //当移动距离大于1的时候再移动,因为ACTION_MOVE比较灵敏, //手指即使只是放在上面,依然能够检测到手指的抖动,然后让图片移动。 if(Math.abs(dx)>1||Math.abs(dy)>1) matrix.postTranslate(dx,dy); setImageMatrix(matrix); } } x=(int)event.getRawX(); y=(int)event.getRawY(); break; caseMotionEvent.ACTION_POINTER_DOWN: mode+=1; oldDist=calculateDist(event);break; caseMotionEvent.ACTION_POINTER_UP: mode-=1; break; caseMotionEvent.ACTION_UP: backToPosition(); mode=0; break; //在ACTION_MOVE中,事件被拦截了之后,有时候ACTION_UP无法触发,所以加上了ACTION_CANCEL caseMotionEvent.ACTION_CANCEL: backToPosition(); mode=0; break; default: break; } returntrue; } 首先先来看一个方法,根据图片的matrix获得图片的边界范围,这个范围映射在rect上。(这个范围检测是用在单指拖拽上的)
/** *根据当前图片的Matrix获得图片的范围 * *@return */ privateRectFgetMatrixRectF() { RectFrect=newRectF(); Drawabled=getDrawable(); if(null!=d) { rect.set(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight()); matrix.mapRect(rect); } Log.e("aaaa",""+rect.bottom+""+rect.left+""+rect.right+""+rect.top); returnrect; }rect.bottom:图片下边界的纵坐标
rect.left:图片左边界的横坐标
rect.right:图片右边界的横坐标
rect.top:图片上边界的纵坐标
rectF.width():图片宽度
rectF.height():图片高度
需要注意的是Matrix对图片的操作都是操作ImageView里面的bitmap,ImageView是没有变化的,上面所说的屏幕边界其实ImageView的边界,getWidth(),getHeight()是ImageView的宽和高。
方法backToPosition()主要是实现单指拖拽的技术点2,当手指快速划过去的时候,在检测到无法继续滑动前图片边界与屏幕边界已经出现了距离,所以松开手指的时候要复位,让图片边界与屏幕边界重合。
/** *若是在移动后图片的边界脱离屏幕边界,那么就让图片边界与屏幕边界重合 *若手指快速移动,停止后会出现图片距离屏幕有一段空白距离,然后经过判断不能再移动, *但是在进行下一次判断是否可以继续移动之前就已经出现了。 *所以需要复位 */ privatevoidbackToPosition(){ if(rectF.left>=0){//图片左边界与屏幕出现距离 matrix.postTranslate(-rectF.left,0); setImageMatrix(matrix); } if(rectF.right<=getWidth()){//图片右边界与屏幕出现距离 matrix.postTranslate(getWidth()-rectF.right,0); setImageMatrix(matrix); } if(rectF.top>=0){//图片上边界与屏幕出现距离 matrix.postTranslate(0,-rectF.top); setImageMatrix(matrix); } if(rectF.bottom<=getHeight()){//图片下边界与屏幕出现距离 matrix.postTranslate(0,getHeight()-rectF.bottom); setImageMatrix(matrix); } }获取两手指间的中点坐标
/** *获取双指缩放时候的缩放中点 * *@return */ privatePointgetMiPoint(MotionEventevent){ floatx=event.getX(0)+event.getX(1); floaty=event.getY(0)+event.getY(1); mPoint.set((int)x/2,(int)y/2); returnmPoint; }计算两指触摸点的距离
/** *计算两指触摸点之间的距离 */ privatefloatcalculateDist(MotionEventevent){ floatx=event.getX(0)-event.getX(1); floaty=event.getY(0)-event.getY(1); return(float)Math.sqrt(x*x+y*y); }双指缩放图片
/** *双指缩放图片 */ privatevoidchangeViewSize(floatoldDist,floatnewDist,PointmPoint){ floatscale=newDist/oldDist;//缩放比例 matrix.postScale(scale,scale,mPoint.x,mPoint.y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); //防止缩小的时候小于初始的图片大小,需要重置 reSetMatrix(); //如果缩放已经大于目标倍数,停止,因为有可能已经超出,那么就直接缩放到目标大小 if(getMatrixValueX()>=MAX_SCALE) { matrix.postScale(MAX_SCALE/getMatrixValueX(),MAX_SCALE/getMatrixValueX(),x,y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); return; } }reSetMatrix()的代码如下:
/** *重置Matrix */ privatevoidreSetMatrix(){ if(checkRestScale()){ matrix.set(oldMatrix); setImageMatrix(matrix); return; } }checkRestScale()的代码在上面已经给出了。oldMatrix为最初始的Matrix。
到这里还没有结束,设置Imageview的ScaleType为Matrix,那么图片不会主动缩放到适应屏幕,也不会处于屏幕中间,因此我们的自定义ImageView需要继承ViewTreeObserver.OnGlobalLayoutListener
@Override protectedvoidonAttachedToWindow(){ super.onAttachedToWindow(); getViewTreeObserver().addOnGlobalLayoutListener(this); }@Override publicvoidonGlobalLayout(){ if(once) { Drawabled=getDrawable(); if(d==null) return; Log.e("TAG",d.getIntrinsicWidth()+","+d.getIntrinsicHeight()); intwidth=getWidth(); intheight=getHeight(); //拿到图片的宽和高 intdw=d.getIntrinsicWidth(); intdh=d.getIntrinsicHeight(); floatscale=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); } initScale=scale; Log.e("TAG","initScale="+initScale); matrix.postTranslate((width-dw)/2,(height-dh)/2); matrix.postScale(scale,scale,getWidth()/2, getHeight()/2); //图片移动至屏幕中心 setImageMatrix(matrix); oldMatrix.set(getImageMatrix()); once=false; RectFrectF=getMatrixRectF(); setDoubleClickScale(rectF); } } //拿到图片的宽和高 intdw=d.getIntrinsicWidth(); intdh=d.getIntrinsicHeight();拿到的图片宽和高是bitmap的真实高度。
初始的oldMatrix就是在这里设置的,然后作为初始模板,代表着图片没被动手改变的Matrix。至于方法setDoubleClickScale(rectF);只是设置双击放大的倍数而已,如果图片高度比屏幕的高度小得多,那么就将图片放大到高度与屏幕高度相等,否则就放大一个特定的倍数。必须在这里设置,因为在这里取到的rectF才能反映原始图片的边界,因为这时候还没有动手改变图片。
/** *设置双击放大的倍数 */ privatevoidsetDoubleClickScale(RectFrectF) { if(rectF.height()到这里大概结束了,下面就贴出完整的代码:
packagecom.example.tangzh.myimageview; importandroid.animation.ValueAnimator; importandroid.content.Context; importandroid.graphics.Matrix; importandroid.graphics.Point; importandroid.graphics.RectF; importandroid.graphics.drawable.Drawable; importandroid.util.AttributeSet; importandroid.util.Log; importandroid.view.GestureDetector; importandroid.view.MotionEvent; importandroid.view.View; importandroid.view.ViewTreeObserver; importandroid.view.animation.DecelerateInterpolator; importandroid.widget.ImageView; /** *CreatedbyTangZHon2017/5/3. */ publicclassMyImageViewextendsImageViewimplementsViewTreeObserver.OnGlobalLayoutListener,View.OnTouchListener{ privatefinalstaticintSINGLE_TOUCH=1;//单指 privatefinalstaticintDOUBLE_TOUCH=2;//双指 //多指触控模式,单指,双指 privateintmode; //两指触碰点之间的距离 privatefloatoldDist; privatefloatnewDist; /** *最大缩放级别 */ privatestaticfinalfloatMAX_SCALE=5f; /** *双击时的缩放级别 */ privatefloatmDoubleClickScale=2; /** *初始化时的缩放比例,如果图片宽或高大于屏幕,此值将小于0 */ privatefloatinitScale=1.0f; privatebooleanonce=true; privateRectFrectF; /** *用于双击检测 */ privateGestureDetectormGestureDetector; privateintx=0; privateinty=0; privatePointmPoint=newPoint(); privatefinalMatrixmatrix=newMatrix(); privateMatrixoldMatrix=newMatrix(); privateValueAnimatoranimator; publicMyImageView(Contextcontext){ this(context,null); } publicMyImageView(Contextcontext,AttributeSetattrs){ super(context,attrs); super.setScaleType(ScaleType.MATRIX); setOnTouchListener(this); /** *双击实现图片放大缩小 */ mGestureDetector=newGestureDetector(context, newGestureDetector.SimpleOnGestureListener(){ @Override publicbooleanonDoubleTap(MotionEvente){ changeViewSize(e); returntrue; } }); } @Override publicbooleanonTouch(Viewview,MotionEventevent){ rectF=getMatrixRectF();//获取图片边界范围 if(mGestureDetector.onTouchEvent(event)) returntrue; switch(event.getAction()&event.getActionMasked()){ caseMotionEvent.ACTION_DOWN: //如果放大后图片的边界超出了屏幕,那么就拦截事件,不让viewPager处理 if(rectF.width()>getWidth()||rectF.height()>getHeight()){ getParent().requestDisallowInterceptTouchEvent(true); } mode=SINGLE_TOUCH; x=(int)event.getRawX(); y=(int)event.getRawY(); break; caseMotionEvent.ACTION_MOVE: if(mode>=DOUBLE_TOUCH)//双指缩放 { getParent().requestDisallowInterceptTouchEvent(true); newDist=calculateDist(event);//计算距离 Pointpoint=getMiPoint(event);//获取两手指间的中点坐标 if(newDist>oldDist+1)//放大(加一是为了防止抖动) { changeViewSize(oldDist,newDist,point);//根据距离实现放大缩小 oldDist=newDist; } if(oldDist>newDist+1)//缩小 { changeViewSize(oldDist,newDist,point); oldDist=newDist; } } if(mode==SINGLE_TOUCH)//单指拖拽 { floatdx=event.getRawX()-x; floatdy=event.getRawY()-y; //如果移动过程中图片的边界超出了屏幕,那么就拦截事件,不让viewPager处理 if(rectF.width()>getWidth()||rectF.height()>getHeight()){ getParent().requestDisallowInterceptTouchEvent(true); } //如果向右移动图片到了尽头,那么就不要拦截事件,让viewPager处理 if(rectF.left>=0&&dx>0) getParent().requestDisallowInterceptTouchEvent(false); //如果向左移动到了尽头,那么就不要拦截事件,让viewPager处理 if(rectF.right<=getWidth()&&dx<0) getParent().requestDisallowInterceptTouchEvent(false); if(getDrawable()!=null){ //如果图片宽度或高度没有超出屏幕,那么就禁止左右或上下滑动 if(rectF.width()<=getWidth()) dx=0; if(rectF.height()=0&&dy>0) dy=0; //如果图片向上移动到了尽头,不让它继续移动 if(rectF.bottom<=getHeight()&&dy<0) dy=0; //当移动距离大于1的时候再移动,因为ACTION_MOVE比较灵敏, //手指即使只是放在上面,依然能够检测到手指的抖动,然后让图片移动。 if(Math.abs(dx)>1||Math.abs(dy)>1) matrix.postTranslate(dx,dy); setImageMatrix(matrix); } } x=(int)event.getRawX(); y=(int)event.getRawY(); break; caseMotionEvent.ACTION_POINTER_DOWN: mode+=1; oldDist=calculateDist(event); Log.e("q",""+"a"); Log.e(":::",""+event.getPointerCount()+""+event.getActionIndex()+""+event.findPointerIndex(0)); break; caseMotionEvent.ACTION_POINTER_UP: mode-=1; break; caseMotionEvent.ACTION_UP: backToPosition(); mode=0; break; //在ACTION_MOVE中,事件被拦截了之后,有时候ACTION_UP无法触发,所以加上了ACTION_CANCEL caseMotionEvent.ACTION_CANCEL: backToPosition(); mode=0; break; default: break; } returntrue; } /** *计算两指触摸点之间的距离 */ privatefloatcalculateDist(MotionEventevent){ floatx=event.getX(0)-event.getX(1); floaty=event.getY(0)-event.getY(1); return(float)Math.sqrt(x*x+y*y); } @Override protectedvoidonAttachedToWindow(){ super.onAttachedToWindow(); getViewTreeObserver().addOnGlobalLayoutListener(this); } /** *若是在移动后图片的边界脱离屏幕边界,那么就让图片边界与屏幕边界重合 *若手指快速移动,停止后会出现图片距离屏幕有一段空白距离,然后经过判断不能再移动, *但是在进行下一次判断是否可以继续移动之前就已经出现了。 *所以需要复位 */ privatevoidbackToPosition(){ if(rectF.left>=0){//图片左边界与屏幕出现距离 matrix.postTranslate(-rectF.left,0); setImageMatrix(matrix); } if(rectF.right<=getWidth()){//图片右边界与屏幕出现距离 matrix.postTranslate(getWidth()-rectF.right,0); setImageMatrix(matrix); } if(rectF.top>=0){//图片上边界与屏幕出现距离 matrix.postTranslate(0,-rectF.top); setImageMatrix(matrix); } if(rectF.bottom<=getHeight()){//图片下边界与屏幕出现距离 matrix.postTranslate(0,getHeight()-rectF.bottom); setImageMatrix(matrix); } } /** *获取双指缩放时候的缩放中点 * *@return */ privatePointgetMiPoint(MotionEventevent){ floatx=event.getX(0)+event.getX(1); floaty=event.getY(0)+event.getY(1); mPoint.set((int)x/2,(int)y/2); returnmPoint; } /** *双指缩放图片 */ privatevoidchangeViewSize(floatoldDist,floatnewDist,PointmPoint){ floatscale=newDist/oldDist;//缩放比例 matrix.postScale(scale,scale,mPoint.x,mPoint.y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); //防止缩小的时候小于初始的图片大小,需要重置 reSetMatrix(); //如果缩放已经大于目标倍数,停止,因为有可能已经超出,那么就直接缩放到目标大小 if(getMatrixValueX()>=MAX_SCALE) { matrix.postScale(MAX_SCALE/getMatrixValueX(),MAX_SCALE/getMatrixValueX(),x,y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); return; } } /** *双击缩放图片 */ privatevoidchangeViewSize(MotionEvente){ //获取双击的坐标 finalfloatx=e.getX(); finalfloaty=e.getY(); //如果此时还在缩放那就直接返回 if(animator!=null&&animator.isRunning()) return; //判断是处于放大还是缩小的状态 if(!isZoomChanged()){ animator=ValueAnimator.ofFloat(1.0f,2.0f); }else{ animator=ValueAnimator.ofFloat(1.0f,0.0f); } animator.setTarget(this); animator.setDuration(500); animator.setInterpolator(newDecelerateInterpolator()); animator.start(); animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){ @Override publicvoidonAnimationUpdate(ValueAnimatorvalueAnimator){ Floatvalue=(Float)animator.getAnimatedValue(); matrix.postScale(value,value,x,y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); /** *控制缩小的范围 *如果已经小于初始大小,那么恢复到初始大小,然后停止 */ if(checkRestScale()){ matrix.set(oldMatrix); setImageMatrix(matrix); return; } /** *控制放大的范围 *如果已经大于目标的放大倍数,那么直接置为目标的放大倍数 *然后停止 */ if(getMatrixValueX()>=mDoubleClickScale) { matrix.postScale(mDoubleClickScale/getMatrixValueX(),mDoubleClickScale/getMatrixValueX(),x,y); checkBorderAndCenterWhenScale(); setImageMatrix(matrix); return; } } }); } /** *判断缩放级别是否是改变过 * *@returntrue表示非初始值,false表示初始值 */ privatebooleanisZoomChanged(){ float[]values=newfloat[9]; getImageMatrix().getValues(values); //获取当前X轴缩放级别 floatscale=values[Matrix.MSCALE_X]; //获取模板的X轴缩放级别,两者做比较 oldMatrix.getValues(values); returnscale!=values[Matrix.MSCALE_X]; } /** *重置Matrix */ privatevoidreSetMatrix(){ if(checkRestScale()){ matrix.set(oldMatrix); setImageMatrix(matrix); return; } } /** *设置双击放大的倍数 */ privatevoidsetDoubleClickScale(RectFrectF) { if(rectF.height() =width) { if(rect.left>0) { deltaX=-rect.left; } if(rect.right =height) { if(rect.top>0) { deltaY=-rect.top; } if(rect.bottom 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); } initScale=scale; Log.e("TAG","initScale="+initScale); matrix.postTranslate((width-dw)/2,(height-dh)/2); matrix.postScale(scale,scale,getWidth()/2, getHeight()/2); //图片移动至屏幕中心 setImageMatrix(matrix); oldMatrix.set(getImageMatrix()); once=false; RectFrectF=getMatrixRectF(); setDoubleClickScale(rectF); } } } 唉,虽然已经写完了,但是还有一个问题没有解决,就是移动图片到尽头,这时候不要放手,往反方向移动,就会出现一个问题,图片反方向的部分被遮挡,无法看到,然后移动的时候是直接切换图片,而不再继续移动图片,这个问题的原因是:当你移动图片到尽头时,就把事件交给viewpager来处理了,即使再往反方向移动图片,viewPager也一样继续拦截了事件。目前没解决。
以上所述是小编给大家介绍的在viewPager中双指缩放图片双击缩放图片单指拖拽图片的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!