程序博客网 > 录屏软件fast

Android 手势检测实战 打造支持缩放平移的图片预览效果（下）

来源：互联网 发布：录屏软件fast 编辑：程序博客网 时间：2024/04/27 12:48


上一篇已经带大家实现了自由的放大缩小图片，简单介绍了下Matrix；具体请参考：Android 手势检测实战 打造支持缩放平移的图片预览效果（上）；本篇继续完善我们的ImageView~~

首先加入放大后的移动~~

1、自由的进行移动

我们在onTouchEvent里面，加上移动的代码，当然了，必须长或宽大于屏幕才可以移动~~~

[java] view plaincopy
  1. @Override  
  2.     public boolean onTouch(View v, MotionEvent event)  
  3.     {  
  4.         mScaleGestureDetector.onTouchEvent(event);  
  5.   
  6.         float x = 0, y = 0;  
  7.         // 拿到触摸点的个数  
  8.         final int pointerCount = event.getPointerCount();  
  9.         // 得到多个触摸点的x与y均值  
  10.         for (int i = 0; i < pointerCount; i++)  
  11.         {  
  12.             x += event.getX(i);  
  13.             y += event.getY(i);  
  14.         }  
  15.         x = x / pointerCount;  
  16.         y = y / pointerCount;  
  17.   
  18.         /** 
  19.          * 每当触摸点发生变化时，重置mLasX , mLastY  
  20.          */  
  21.         if (pointerCount != lastPointerCount)  
  22.         {  
  23.             isCanDrag = false;  
  24.             mLastX = x;  
  25.             mLastY = y;  
  26.         }  
  27.           
  28.   
  29.         lastPointerCount = pointerCount;  
  30.   
  31.         switch (event.getAction())  
  32.         {  
  33.         case MotionEvent.ACTION_MOVE:  
  34.             Log.e(TAG, "ACTION_MOVE");  
  35.             float dx = x - mLastX;  
  36.             float dy = y - mLastY;  
  37.               
  38.             if (!isCanDrag)  
  39.             {  
  40.                 isCanDrag = isCanDrag(dx, dy);  
  41.             }  
  42.             if (isCanDrag)  
  43.             {  
  44.                 RectF rectF = getMatrixRectF();  
  45.                 if (getDrawable() != null)  
  46.                 {  
  47.                     isCheckLeftAndRight = isCheckTopAndBottom = true;  
  48.                     // 如果宽度小于屏幕宽度，则禁止左右移动  
  49.                     if (rectF.width() < getWidth())  
  50.                     {  
  51.                         dx = 0;  
  52.                         isCheckLeftAndRight = false;  
  53.                     }  
  54.                     // 如果高度小雨屏幕高度，则禁止上下移动  
  55.                     if (rectF.height() < getHeight())  
  56.                     {  
  57.                         dy = 0;  
  58.                         isCheckTopAndBottom = false;  
  59.                     }  
  60.                     mScaleMatrix.postTranslate(dx, dy);  
  61.                     checkMatrixBounds();  
  62.                     setImageMatrix(mScaleMatrix);  
  63.                 }  
  64.             }  
  65.             mLastX = x;  
  66.             mLastY = y;  
  67.             break;  
  68.   
  69.         case MotionEvent.ACTION_UP:  
  70.         case MotionEvent.ACTION_CANCEL:  
  71.             Log.e(TAG, "ACTION_UP");  
  72.             lastPointerCount = 0;  
  73.             break;  
  74.         }  
  75.   
  76.         return true;  
  77.     }  

首先我们拿到触摸点的数量，然后求出多个触摸点的平均值，设置给我们的mLastX , mLastY ， 然后在移动的时候，得到dx ,dy 进行范围检查以后，调用mScaleMatrix.postTranslate进行设置偏移量，当然了，设置完成以后，还需要再次校验一下，不能把图片移动的与屏幕边界出现白边，校验完成后，调用setImageMatrix.

这里：需要注意一下，我们没有复写ACTION_DOWM，是因为，ACTION_DOWN在多点触控的情况下，只要有一个手指按下状态，其他手指按下不会再次触发ACTION_DOWN，但是多个手指以后，触摸点的平均值会发生很大变化，所以我们没有用到ACTION_DOWN。每当触摸点的数量变化，我们就会跟新当前的mLastX,mLastY.

下面是上面用到的两个私有方法，一个用于检查边界，一个用于判断是否是拖动的操作：

[java] view plaincopy
  1. /** 
  2.      * 移动时，进行边界判断，主要判断宽或高大于屏幕的 
  3.      */  
  4.     private void checkMatrixBounds()  
  5.     {  
  6.         RectF rect = getMatrixRectF();  
  7.   
  8.         float deltaX = 0, deltaY = 0;  
  9.         final float viewWidth = getWidth();  
  10.         final float viewHeight = getHeight();  
  11.         // 判断移动或缩放后，图片显示是否超出屏幕边界  
  12.         if (rect.top > 0 && isCheckTopAndBottom)  
  13.         {  
  14.             deltaY = -rect.top;  
  15.         }  
  16.         if (rect.bottom < viewHeight && isCheckTopAndBottom)  
  17.         {  
  18.             deltaY = viewHeight - rect.bottom;  
  19.         }  
  20.         if (rect.left > 0 && isCheckLeftAndRight)  
  21.         {  
  22.             deltaX = -rect.left;  
  23.         }  
  24.         if (rect.right < viewWidth && isCheckLeftAndRight)  
  25.         {  
  26.             deltaX = viewWidth - rect.right;  
  27.         }  
  28.         mScaleMatrix.postTranslate(deltaX, deltaY);  
  29.     }  
  30.   
  31.     /** 
  32.      * 是否是推动行为 
  33.      *  
  34.      * @param dx 
  35.      * @param dy 
  36.      * @return 
  37.      */  
  38.     private boolean isCanDrag(float dx, float dy)  
  39.     {  
  40.         return Math.sqrt((dx * dx) + (dy * dy)) >= mTouchSlop;  
  41.     }  

这样，我们就可以快乐的放大、缩小加移动了~~~

效果图：这次换个男人的图片，我们越狱的主角之一，TBug~


我们的缩放+移动搞定~~

2、双击放大与缩小

谈到双击事件，我们的GestureDetector终于要登场了，这哥们可以捕获双击事件~~

1、GestureDetector的使用

因为GestureDetector设置监听器的话，方法一大串，而我们只需要onDoubleTap这个回调，所以我们准备使用它的一个内部类SimpleOnGestureListener，对接口的其他方法实现了空实现。

不过还有几个问题需要讨论下，才能开始我们的代码：

1、我们双击尺寸如何变化？

我是这样的，根据当前的缩放值，如果是小于2的，我们双击直接到变为原图的2倍；如果是2,4之间的，我们双击直接为原图的4倍；其他状态也就是4倍，双击后还原到最初的尺寸。

如果你觉得这样不合适，可以根据自己的爱好调整。

2、我们双击变化，需要一个动画~~比如我们上例的演示图，图片很大，全屏显示的时候initScale=0.5左后，如果双击后变为2，也就是瞬间大了四倍，没有一个过渡的效果的话，给用户的感觉会特别差。所以，我们准备使用postDelay执行一个Runnable，Runnable中再次根据的当然的缩放值继续执行。

首先我们在构造方法中，完成对GestureDetector的初始化，以及设置onDoubleTap监听

[java] view plaincopy
  1. public ZoomImageView(Context context, AttributeSet attrs)  
  2.     {  
  3.         super(context, attrs);  
  4.         mScaleGestureDetector = new ScaleGestureDetector(context, this);  
  5.         mGestureDetector = new GestureDetector(context,  
  6.                 new SimpleOnGestureListener()  
  7.                 {  
  8.                     @Override  
  9.                     public boolean onDoubleTap(MotionEvent e)  
  10.                     {  
  11.                         if (isAutoScale == true)  
  12.                             return true;  
  13.   
  14.                         float x = e.getX();  
  15.                         float y = e.getY();  
  16.                         Log.e("DoubleTap", getScale() + " , " + initScale);  
  17.                         if (getScale() < SCALE_MID)  
  18.                         {  
  19.                             ZoomImageView.this.postDelayed(  
  20.                                     new AutoScaleRunnable(SCALE_MID, x, y), 16);  
  21.                             isAutoScale = true;  
  22.                         } else if (getScale() >= SCALE_MID  
  23.                                 && getScale() < SCALE_MAX)  
  24.                         {  
  25.                             ZoomImageView.this.postDelayed(  
  26.                                     new AutoScaleRunnable(SCALE_MAX, x, y), 16);  
  27.                             isAutoScale = true;  
  28.                         } else  
  29.                         {  
  30.                             ZoomImageView.this.postDelayed(  
  31.                                     new AutoScaleRunnable(initScale, x, y), 16);  
  32.                             isAutoScale = true;  
  33.                         }  
  34.   
  35.                         return true;  
  36.                     }  
  37.                 });  
  38.         mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();  
  39.         super.setScaleType(ScaleType.MATRIX);  
  40.         this.setOnTouchListener(this);  
  41.     }  

1、当双击的时候，首先判断是否正在自动缩放，如果在，直接retrun ; 

2、然后就进入了我们的if，如果当然是scale小于2，则通过view.发送一个Runnable进行执行；其他类似；

下面看我们的Runnable的代码：

[java] view plaincopy
  1. /** 
  2.      * 自动缩放的任务 
  3.      *  
  4.      * @author zhy 
  5.      *  
  6.      */  
  7.     private class AutoScaleRunnable implements Runnable  
  8.     {  
  9.         static final float BIGGER = 1.07f;  
  10.         static final float SMALLER = 0.93f;  
  11.         private float mTargetScale;  
  12.         private float tmpScale;  
  13.   
  14.         /** 
  15.          * 缩放的中心 
  16.          */  
  17.         private float x;  
  18.         private float y;  
  19.   
  20.         /** 
  21.          * 传入目标缩放值，根据目标值与当前值，判断应该放大还是缩小 
  22.          *  
  23.          * @param targetScale 
  24.          */  
  25.         public AutoScaleRunnable(float targetScale, float x, float y)  
  26.         {  
  27.             this.mTargetScale = targetScale;  
  28.             this.x = x;  
  29.             this.y = y;  
  30.             if (getScale() < mTargetScale)  
  31.             {  
  32.                 tmpScale = BIGGER;  
  33.             } else  
  34.             {  
  35.                 tmpScale = SMALLER;  
  36.             }  
  37.   
  38.         }  
  39.   
  40.         @Override  
  41.         public void run()  
  42.         {  
  43.             // 进行缩放  
  44.             mScaleMatrix.postScale(tmpScale, tmpScale, x, y);  
  45.             checkBorderAndCenterWhenScale();  
  46.             setImageMatrix(mScaleMatrix);  
  47.   
  48.             final float currentScale = getScale();  
  49.             //如果值在合法范围内，继续缩放  
  50.             if (((tmpScale > 1f) && (currentScale < mTargetScale))  
  51.                     || ((tmpScale < 1f) && (mTargetScale < currentScale)))  
  52.             {  
  53.                 ZoomImageView.this.postDelayed(this, 16);  
  54.             } else//设置为目标的缩放比例  
  55.             {  
  56.                 final float deltaScale = mTargetScale / currentScale;  
  57.                 mScaleMatrix.postScale(deltaScale, deltaScale, x, y);  
  58.                 checkBorderAndCenterWhenScale();  
  59.                 setImageMatrix(mScaleMatrix);  
  60.                 isAutoScale = false;  
  61.             }  
  62.   
  63.         }  
  64.     }  

代码写完了，我们依然需要把我们的event传给它，依然是在onTouch方法：

[java] view plaincopy
  1. @Override  
  2.     public boolean onTouch(View v, MotionEvent event)  
  3.     {  
  4.         if (mGestureDetector.onTouchEvent(event))  
  5.             return true;  

好了，双击放大与缩小的功能就搞定了，下面测试下~~~

效果图，终于可以用模拟器了~~：



3、处理与ViewPager的冲突

直接把我们的图片作为ViewPager的Item，可想而知，肯定有冲突~~

1、布局文件

[java] view plaincopy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <android.support.v4.view.ViewPager  
  7.         android:id="@+id/id_viewpager"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent" >  
  10.     </android.support.v4.view.ViewPager>  
  11.   
  12. </RelativeLayout>  


2、Activity代码

[java] view plaincopy
  1. package com.zhy.zhy_scalegesturedetector02;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.support.v4.view.PagerAdapter;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.widget.ImageView;  
  10.   
  11. import com.zhy.view.ZoomImageView;  
  12.   
  13. public class MainActivity extends Activity  
  14. {  
  15.     private ViewPager mViewPager;  
  16.     private int[] mImgs = new int[] { R.drawable.tbug, R.drawable.a,  
  17.             R.drawable.xx };  
  18.     private ImageView[] mImageViews = new ImageView[mImgs.length];  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState)  
  22.     {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.vp);  
  25.           
  26.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  27.         mViewPager.setAdapter(new PagerAdapter()  
  28.         {  
  29.   
  30.             @Override  
  31.             public Object instantiateItem(ViewGroup container, int position)  
  32.             {  
  33.                 ZoomImageView imageView = new ZoomImageView(  
  34.                         getApplicationContext());  
  35.                 imageView.setImageResource(mImgs[position]);  
  36.                 container.addView(imageView);  
  37.                 mImageViews[position] = imageView;  
  38.                 return imageView;  
  39.             }  
  40.   
  41.             @Override  
  42.             public void destroyItem(ViewGroup container, int position,  
  43.                     Object object)  
  44.             {  
  45.                 container.removeView(mImageViews[position]);  
  46.             }  
  47.   
  48.             @Override  
  49.             public boolean isViewFromObject(View arg0, Object arg1)  
  50.             {  
  51.                 return arg0 == arg1;  
  52.             }  
  53.   
  54.             @Override  
  55.             public int getCount()  
  56.             {  
  57.                 return mImgs.length;  
  58.             }  
  59.         });  
  60.   
  61.     }  
  62. }  

现在直接运行，发现ViewPager好着呢，但是我们的图片放大以后，移动和ViewPager冲突了，又不能移动了~。。。擦擦擦。。。

3、处理冲突

现在我们迅速的想一想，记得之前学习过事件分发机制，我们的ZoomImageView在ViewPager中，如果我们不想被拦截，那么如何做呢？
首先不想被拦截的条件是：我们的宽或高大于屏幕宽或高时，因为此时可以移动，我们不想被拦截。接下来，不想被拦截：

getParent().requestDisallowInterceptTouchEvent(true);

一行代码足以，如果你对事件分发中，不被拦截不清晰，可以参考：如何不被拦截 。

放在一起我们的代码就是：

[java] view plaincopy
  1. switch (event.getAction())  
  2.         {  
  3.         case MotionEvent.ACTION_DOWN:  
  4.             if (rectF.width() > getWidth() || rectF.height() > getHeight())  
  5.             {  
  6.                 getParent().requestDisallowInterceptTouchEvent(true);  
  7.             }  
  8.             break;  
  9.         case MotionEvent.ACTION_MOVE:  
  10.             if (rectF.width() > getWidth() || rectF.height() > getHeight())  
  11.             {  
  12.                 getParent().requestDisallowInterceptTouchEvent(true);  
  13.             }  

~当宽或高大于屏幕宽或高时，拖动效果认为是移动图片，反之则让ViewPager去处理

此时的效果：


ok，现在已经解决了和ViewPager的冲突，ps：尼玛不应该双击还能放大两次到4倍，，，，，好恶心。。。

4、到达边界事件交给ViewPager处理

可能有些用户还希望，当图片到达边界时，不能再拖动的时候，能够把事件给ViewPager

那就在ACTION_MOVE中，判断当前已经到达边界，且还在拉的时候，事件交给ViewPager

[java] view plaincopy
  1. if (isCanDrag)  
  2.             {  
  3.   
  4.                 if (getDrawable() != null)  
  5.                 {  
  6.                     if (getMatrixRectF().left == 0 && dx > 0)  
  7.                     {  
  8.                         getParent().requestDisallowInterceptTouchEvent(false);  
  9.                     }  
  10.   
  11.                     if (getMatrixRectF().right == getWidth() && dx < 0)  
  12.                     {  
  13.                         getParent().requestDisallowInterceptTouchEvent(false);  
  14.                     }  

此时的效果：


好了，其实添加了这个之后，体验一般哈~~~



终于写完了，代码中可能存在BUG，发现问题，或者解决了发现的BUG时，希望可以直接在博客下面留言，也能够方便他人~~

到此，我们的Android 手势检测实战 打造支持缩放平移的图片预览效果 结束~~！


建议把双击放大到4倍的地方，注释掉一个If

[java] view plaincopy
  1. //                      else if (getScale() >= SCALE_MID  
  2. //                              && getScale() < SCALE_MAX)  
  3. //                      {  
  4. //                          ZoomImageView.this.postDelayed(  
  5. //                                  new AutoScaleRunnable(SCALE_MAX, x, y), 16);  
  6. //                          isAutoScale = true;  
  7. //                      }   

连续双击放大，感觉不爽，代码已经上传，我就不重传了，如果你也觉得不爽，可以自行注释。


单图版源码点击下载


ViewPager版源码下载

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39480503，本文出自：【张鸿洋的博客】


0 0
录屏软件fast 录屏软件fast
原创粉丝点击
热门IT博客
php三级分销代码php三级分销代码
java打包没有lib文件java打包没有lib文件
油漆调色软件
南海舰队编制 知乎
网络搭建教程
软件开发招标网
淘宝卖家进货渠道
有赞 微盟 知乎
log4j 关闭sql日志
mac如何使用搜过输入法
迅龙手机数据恢复软件
js input file对象
淘宝如何上传高清图片
西部域名
东莞java培训机构排名
左旋肉碱 知乎
双轨直销软件开发
网络万能解锁
查询数据库表空间
网站php源代码在哪
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 串串香吧 1516串串香 串串香价格表 串串香宣传 自助串串香 热串串香 串串香哪里有 串串香广告 串串香小料 街头串串香 串串香汤底 串串香价格 串串香店哪里有 串串香怎么做的 串串香店 串串香的图片 串串香图 串串香多少钱一串 附近串串香 串串香广告词 卖串串香 串串香怎么样 串串香图片高清 成都招聘会 成都好吃的地方 成都好吃的 李李麻辣烫 麻辣烫怎做 usb串口卡 8口串口卡 串口卡 笔记本串口卡怎么用 串口屏 并口和串口的区别 电脑串口 什么是串口 串口转接线 串口与并口 usb转232串口线 232串口线 串口线图片

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里