android实现图片缩放、移动、单击退出、双击缩放

最新推荐文章于 2024-05-12 03:12:30 发布
最新推荐文章于 2024-05-12 03:12:30 发布
阅读量1w 收藏 8
点赞数
分类专栏： Android 文章标签： imageview 图片 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014473112/article/details/52292690
版权

实现思路

思路：重写用于显示图片的ImageView，定义ScaleGestureDetector（缩放手势检测）类型、GestureDetector（双击手势检测）类型的变量进行手势检测并重写方法实现图片的缩放、移动、单击退出、双击放大等功能。
重写的方法implements OnTouchListener接口，重写onTouch方法对手势进行监听

ScaleGestureDetector mScaleGestureDetector ;
GestureDetector mGestureDetector;
public boolean onTouch(View v, MotionEvent event)
{
    if (mGestureDetector.onTouchEvent(event))
        return true;                           //单双击监听
    mScaleGestureDetector.onTouchEvent(event); //缩放监听
    图片移动处理的code；                           //移动监听及处理    
}

为什么单双击监听的时候检测到单双击直接就返回而不执行后面的代码？这里主要考虑到但双击的时候是自动缩放，一般我们不会在自动缩放的时候还会移动图片，但是如果是人手动考手势缩放图片，往往还会伴随着移动图片的处理，所以检测到手动缩放的代码时不返回，仍然要执行后面的移动图片的代码。

单双击处理代码：

mGestureDetector = new GestureDetector(context,
                new SimpleOnGestureListener()
                {
                    //单击退出
                    @Override
                    public boolean onSingleTapConfirmed(MotionEvent e) {
                        EventBus.getDefault().post(new ZoomBus());
                        return super.onSingleTapConfirmed(e);
                    }

                    //双击放大缩小
                    @Override
                    public boolean onDoubleTap(MotionEvent e)
                    {
                        if (isAutoScale == true)  //首先判断是否正在自动缩放,如果是直接返回true
                            return true;

                        float x = e.getX();
                        float y = e.getY();
                        Log.e("DoubleTap", getScale() + " , " + initScale);
                        //postDelayed每16ms执行一个AutoScaleRunnable方法
                        if (getScale() < SCALE_MID)
                        {
                            ZoomImageView.this.postDelayed(
                                    new AutoScaleRunnable(SCALE_MID, x, y), 16);//如果获得的缩放比例小于SCALE_MID,那么就设置缩放比例为SCALE_MID
                            isAutoScale = true;
                        } else if (getScale() >= SCALE_MID
                                && getScale() < SCALE_MAX)
                        {
                            ZoomImageView.this.postDelayed(
                                    new AutoScaleRunnable(SCALE_MAX, x, y), 16);//如果获得的缩放比例大于SCALE_MID并且小于SCALE_MAX，就设置缩放比例为SCALE_MAX
                            isAutoScale = true;
                        } else
                        {
                            ZoomImageView.this.postDelayed(
                                    new AutoScaleRunnable(initScale, x, y), 16);//同理
                            isAutoScale = true;
                        }

                        return true;
                    }
                });


/*AutoScaleRunnable()*/
private class AutoScaleRunnable implements Runnable
    {
        static final float BIGGER = 1.07f;
        static final float SMALLER = 0.93f;
        private float mTargetScale;
        private float tmpScale;

        /**
         * 缩放的中心
         */
        private float x;
        private float y;

        /**
         * 传入目标缩放值，根据目标值与当前值，判断应该放大还是缩小
         * 
         * @param targetScale
         */
        public AutoScaleRunnable(float targetScale, float x, float y)
        {
            this.mTargetScale = targetScale;
            this.x = x;
            this.y = y;
            if (getScale() < mTargetScale)
            {
                tmpScale = BIGGER;
            } else
            {
                tmpScale = SMALLER;
            }

        }

        @Override
        public void run()
        {
            // 进行缩放
            mScaleMatrix.postScale(tmpScale, tmpScale, x, y);
            checkBorderAndCenterWhenScale();//如果不用，图片宽高大于屏幕时，图片与屏幕间出现白边；图片小于屏幕，但是不居中。
            setImageMatrix(mScaleMatrix);

            final float currentScale = getScale();
            // 如果值在合法范围内，继续缩放
            if (((tmpScale > 1f) && (currentScale < mTargetScale))
                    || ((tmpScale < 1f) && (mTargetScale < currentScale)))
            {
                Log.d("合理范围",currentScale+" "+mTargetScale+" "+tmpScale);
                ZoomImageView.this.postDelayed(this, 16);
            } else
            // 设置为目标的缩放比例
            {
                Log.d("目标范围","目标范围"+currentScale+" "+mTargetScale);
                final float deltaScale = mTargetScale / currentScale;
                Log.d("deltaScale",deltaScale+" ");
                mScaleMatrix.postScale(deltaScale, deltaScale, x, y);
                checkBorderAndCenterWhenScale();
                setImageMatrix(mScaleMatrix);
                isAutoScale = false;
            }
        }
    }

new SimpleOnGestureListener()方法处理单击退出，这里用了EventBus，有关EventBus的使用可以搜索看一下，有handler的效果。在显示这个图片的Activity中的代码如下：

public class PictureShowActivity extends Activity {
    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_picture);
        EventBus.getDefault().register(this);
        ....
    @Subscribe(threadMode = ThreadMode.MAIN)
    public void onUserEvent(ZoomBus zoomBus) {  //自己定义个ZoomBuS实体，可以是空实体
        Log.d("zoomBus",zoomBus+"");
       finish();
    }
}

public boolean onDoubleTap(MotionEvent e)处理的是双击缩放，双击时首先判断当前缩放比例getScale()，然后拿当前缩放比例和initScale、SCALE_MID、SCALE_MAX进行比较以定出自动缩放的缩放比例，然后调用AutoScaleRunnable（）方法，注意AutoScaleRunnable()方法进行了边界检测checkBorderAndCenterWhenScale()

手动缩放代码：

@SuppressLint("NewApi")
    @Override
    public boolean onScale(ScaleGestureDetector detector)
    {
        Log.d("scale","scale");
        float scale = getScale();//当前已经缩放的缩放比例
        float scaleFactor = detector.getScaleFactor();//通过手势检测检测到的缩放比例

        if (getDrawable() == null)
            return true;


        /**
         * 缩放的范围控制
         */
        if ((scale < SCALE_MAX && scaleFactor > 1.0f)
                || (scale > initScale && scaleFactor < 1.0f))
        {
            /**
             * 最大值最小值判断
             */
            if (scaleFactor * scale < initScale)
            {
                scaleFactor = initScale / scale;
            }
            if (scaleFactor * scale > SCALE_MAX)
            {
                scaleFactor = SCALE_MAX / scale;
            }
            /**
             * 设置缩放比例
             */
            mScaleMatrix.postScale(scaleFactor, scaleFactor,
                    detector.getFocusX(), detector.getFocusY());
            checkBorderAndCenterWhenScale();
            setImageMatrix(mScaleMatrix);
        }
        return true;
    }

具体流程如下：
这里写图片描述

移动代码：（在onTouch方法里面）

        float x = 0, y = 0;
        // 拿到触摸点的个数
        final int pointerCount = event.getPointerCount();
        // 得到多个触摸点的x与y均值
        for (int i = 0; i < pointerCount; i++)
        {
            x += event.getX(i);
            y += event.getY(i);
        }
        x = x / pointerCount;
        y = y / pointerCount;

        /**
         * 每当触摸点发生变化时，重置mLasX , mLastY
         */
        if (pointerCount != lastPointerCount)
        {
            isCanDrag = false;
            mLastX = x;
            mLastY = y;
        }

        lastPointerCount = pointerCount;
        RectF rectF = getMatrixRectF();
        switch (event.getAction())
        {
//      case MotionEvent.ACTION_DOWN:
//          if (rectF.width() > getWidth() || rectF.height() > getHeight())
//          {
//              getParent().requestDisallowInterceptTouchEvent(true);
//          }
//          break;

        case MotionEvent.ACTION_MOVE:
//          if (rectF.width() > getWidth() || rectF.height() > getHeight())
//          {
//              getParent().requestDisallowInterceptTouchEvent(true);
//          }
            Log.e(TAG, "ACTION_MOVE");
            float dx = x - mLastX;
            float dy = y - mLastY;

            if (!isCanDrag)
            {
                isCanDrag = isCanDrag(dx, dy);
            }
            if (isCanDrag)
            {
                if (getDrawable() != null)
                {
                    // if (getMatrixRectF().left == 0 && dx > 0)
                    // {
                    // getParent().requestDisallowInterceptTouchEvent(false);
                    // }
                    //
                    // if (getMatrixRectF().right == getWidth() && dx < 0)
                    // {
                    // getParent().requestDisallowInterceptTouchEvent(false);
                    // }
                    isCheckLeftAndRight = isCheckTopAndBottom = true;
                    // 如果宽度小于屏幕宽度，则禁止左右移动
                    if (rectF.width() < getWidth())
                    {
                        dx = 0;
                        isCheckLeftAndRight = false;
                    }
                    // 如果高度小雨屏幕高度，则禁止上下移动
                    if (rectF.height() < getHeight())
                    {
                        dy = 0;
                        isCheckTopAndBottom = false;
                    }


                    mScaleMatrix.postTranslate(dx, dy);
                    checkMatrixBounds();
                    setImageMatrix(mScaleMatrix);
                }
            }
            mLastX = x;
            mLastY = y;
            break;

        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            Log.e(TAG, "ACTION_UP");
            lastPointerCount = 0;
            break;
        }
        return true;

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

完整demo下载
这个其实也有好多库，比如：
http://p.codekk.com/detail/Android/Dreddik/AndroidTouchGallery

soputasmile11
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android ImageView图片缩放功能
12-01
现在app中，图片预览功能肯定是少不了的，用户基本已经形成条件反射，看到小图，点击看大图，看到大图两个手指开始进行放大，放大后，开始移动到指定部位想要做到图片支持多点触控，自由的进行缩放、平移 以及事件分发机制
图片手动缩放移动、单击退出、双击缩放
08-24
双击缩放是一种常见的用户操作，它允许用户通过双击图片快速放大查看细节。这种功能通常结合平移（panning）一起使用，以便在放大后浏览图片的不同部分。 2. 手动缩放移动： 手动缩放允许用户通过拖动滑块、滚动条...
Android图片缩放方法
知识空间
03-26 5411
方法1：按固定比例进行缩放 在开发图片浏览器等软件是，很多时候要显示图片的缩略图，而一般情况下，我们要将图片按照固定大小取缩略图，一般取缩略图的方法是使用BitmapFactory的decodeFile方法，然后通过传递进去 BitmapFactory.Option类型的参数进行取缩略图，在Option中，属性值inSampleSize表示缩略图大小为原始图片大小的几分之一，即如果这个值为2，则
移动开发最新三分钟学会图片（ImageView）拖动和放大缩小，2024年最新快速学会
最新发布
2401_84132685的博客
05-12 622
答应大伙的备战金三银四，大厂面试真题来啦！这份资料我从春招开始，就会将各博客、论坛。网站上等优质的Android开发中高级面试题收集起来，然后全网寻找最优的解答方案。每一道面试题都是百分百的大厂面经真题+最优解答。包知识脉络 + 诸多细节。节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。《960全网最全Android开发笔记》《379页Android开发面试宝典》包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。
Android 简单的图片缩放方法
weixin_30437481的博客
03-21 92
很简单的一个图片缩放方法，注意要比例设置正确否则可能会内存溢出 相关问题 java.lang.IllegalArgumentException: bitmap size exceeds 32bits 可查看http://blog.csdn.net/zhouzme/article/details/21732095 public static Bitmap ...
Android中图片缩放方法
sqk1988-IT心园
08-23 1151
http://www.cnblogs.com/leizhenzi/archive/2011/05/14/2046431.html 方法1：按固定比例进行缩放 在开发图片浏览器等软件是，很多时候要显示图片的缩略图，而一般情况下，我们要将图片按照固定大小取缩略图，一般取缩略图的方
缩放图片并加载到内存中
wdx_1136346879的博客
04-21 396
_计算机图形处理的原理 计算机在表示图形的时候使用像素点来表示，每个像素点都是使用一个颜色来表示， 每个颜色都是6个十六进制的数值来表示的，计算机在底层表示图形时就是使用01001字符串来表示的，处理图形时就是修改0101的序列。     缩放加载图片： 1、得到设备屏幕的分辨率： 2、得到原图的分辨率： 3、通过比较得到一个合适的比例值： 4、使用比例值缩放一张图
Android使用PhotoView实现图片双击放大单击退出效果
08-28
用户双击图片时，图片会自动放大；再次双击，图片会恢复原大小。 总结起来，`PhotoView`库提供了一个方便的方式来展示可缩放的图片，并且包含了双击放大和单击退出的交互功能。通过简单的配置和监听器设置，我们就...
Android使用Matrix实现图片缩放，移动
06-27
在Android开发中，图片处理是一项常见的任务，尤其是在创建交互式应用时，用户可能需要缩放、移动或旋转图片。本文将深入探讨如何使用Android的Matrix类来实现这一功能，同时避免内存溢出（OOM）问题。 Matrix是...
Android应用中实现手势控制图片缩放的完全攻略
09-02
本文将详细介绍如何在Android应用中实现手势控制图片缩放，采用Matrix矩阵的方法，同时讲解触摸点设置和冲突处理。 首先，我们需要了解Matrix类。Matrix在Android中用于图像变换，它是一个3×3的矩阵，用来表示平移...
Android图像缩放
qq407221874的博客
07-09 356
//从资源中获取位图     BitmapDrawable bd = (BitmapDrawable) getResources().getDrawable(R.drawable.pic2);     Bitmap bitmap = bd.getBitmap(); ##### BitmapFactory 解码图像信息（宽高、像素点、裁剪）可以借助裁剪功能处理大图加载的OOM问题（Out O
android 图片缩放 多点缩放
02-22
android imageview图片自由缩放，支持多点
android 图片，按钮移动
03-31
可以让android 里面的按钮图片，跟着手随意移动
Android实现图片手势缩放、移动、双击放大缩小
11-13
Android实现图片手势缩放、移动、双击放大缩小。
Android 图片缩放-Matrix
Droger (卓哥)
02-23 5372
<br />Android中使用Matrix实现图片的缩放和旋转，通过本文学习 ，你将学会如何通过Matrix操作图像。<br />Matrix的操作，总共分为translate（平移），rotate（旋转），scale（缩放）和skew（倾斜）四种，每一种变换在<br /><br /> Android的API里都提供了set, post和pre三种操作方式,除了translate，其他三种操作都可以指定中心点。<br /><br />     set是直接设置Matrix的值，每次set一次
Android中进行图片缩放显示
张平的专栏
12-21 2267
Android中进行图片缩放显示
Android图片缩放总结及比较
热门推荐
懒人的技术笔记
08-01 5万+
在Android中对大图片进行缩放真的很不尽如人意，不知道是不是我的方法不对。下面我列出3种对图片缩放的方法，并给出相应速度。请高人指教。 第一种是BitmapFactory和BitmapFactory.Options。 首先，BitmapFactory.Options有
Android | 图片缩放、自动居中
鷾
09-03 1431
图片缩放、自动居中
图片放大缩小移动
weixin_30275415的博客
10-22 146
/** * @ClassName: MatrixImageView * @Description: 带放大、缩小、移动效果的ImageView * @author LinJ * @date 2015-1-7 上午11:15:07 * */ public class MatrixImageView extends ImageView{ pri...
android textureview 实现双指缩放，单指移动
06-06
要在 TextureView 上实现双指缩放和单指移动，您可以使用 ScaleGestureDetector 和 GestureDetector 类。以下是一个简单的示例代码，演示如何在 TextureView 上实现这些手势： ```java public class MyActivity extends Activity implements OnGestureListener, OnScaleGestureListener { private TextureView mTextureView; private ScaleGestureDetector mScaleGestureDetector; private GestureDetector mGestureDetector; private float mScaleFactor = 1.0f; private float mPosX = 0.0f; private float mPosY = 0.0f; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 初始化 TextureView、ScaleGestureDetector 和 GestureDetector mTextureView = new TextureView(this); mScaleGestureDetector = new ScaleGestureDetector(this, this); mGestureDetector = new GestureDetector(this, this); // 将 TextureView 添加到布局中 setContentView(mTextureView); } @Override public boolean onTouchEvent(MotionEvent event) { // 将触摸事件交给 ScaleGestureDetector 和 GestureDetector 处理 mScaleGestureDetector.onTouchEvent(event); mGestureDetector.onTouchEvent(event); return true; } @Override public boolean onDown(MotionEvent e) { return true; } @Override public boolean onSingleTapConfirmed(MotionEvent e) { // 处理单击事件 return true; } @Override public boolean onDoubleTap(MotionEvent e) { // 处理双击事件 return true; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // 处理拖动事件 if (e2.getPointerCount() == 1) { mPosX -= distanceX; mPosY -= distanceY; updateTextureView(); } return true; } @Override public boolean onScale(ScaleGestureDetector detector) { // 处理缩放事件 mScaleFactor *= detector.getScaleFactor(); mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f)); updateTextureView(); return true; } @Override public boolean onScaleBegin(ScaleGestureDetector detector) { return true; } @Override public void onScaleEnd(ScaleGestureDetector detector) { } private void updateTextureView() { // 更新 TextureView 的缩放和移动 mTextureView.setScaleX(mScaleFactor); mTextureView.setScaleY(mScaleFactor); mTextureView.setTranslationX(mPosX); mTextureView.setTranslationY(mPosY); } } ``` 在上面的代码中，我们实现了 OnGestureListener 和 OnScaleGestureListener 接口，并在 onCreate 方法中初始化了 TextureView、ScaleGestureDetector 和 GestureDetector 对象。我们还重写了 onTouchEvent 方法，将触摸事件交给 ScaleGestureDetector 和 GestureDetector 处理。最后，我们实现了 OnGestureListener 接口中的方法，处理单指移动事件，实现了 OnScaleGestureListener 接口中的方法，处理双指缩放事件，并添加了一个 updateTextureView 方法，用于更新 TextureView 的缩放和移动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值