黑马程序员技术交流社区

标题: 三分钟学会图片（ImageView）拖动和放大缩小 [打印本页]

---

作者: 长沙-小知姐姐    时间: 2020-4-14 11:01
标题: 三分钟学会图片（ImageView）拖动和放大缩小
想必图片的拖动和放大缩小是每个人都使用过的功能，最常见于手机相册里，你可以通过一个手指拖动你的照片，同样也可以使用双指通过缩放手势对图片进行相应的缩放。那么这是如何实现的呢？

先来看效果图：



实现原理：
想要学会一样东西，光靠死记硬背是不行的，你得理解！

首先得知道，拖动以及缩放是你对View的一个手势交互，那么我们要让View对你的手势有一系列的反馈（如：移动、缩放等），你肯定需要重写View的交互事件（onTouch）接下来咱们来逐步分析一下：

首先是 单指 拖动：

单指拖动，你要随着你手指的移动，去移动你的图片，那么什么是最重要的？当然是你手指的原始位置和移动后的位置！有了这两个重要因素，你就能实现一个跟随手指拖动的效果！

然后是 双指 缩放

单指拖动是需要拖动的前后位置，那么双指缩放，想一下，你这里需要的是什么？没错，是缩放比！只需要通过获取你双指的缩放操作的比例，然后对图片进行相应的缩放就可以实现！

代码
XML（就是一个ImageView，有几个属性我设置在JAVA代码中）

<ImageView
        android:id="@+id/imagevieqw"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

JAVA（框架）

这里先给出一个大致框架，方便新手逐步理解

这里我是在后台设置ImageView的src属性，然后ImageView的ScaleType必须是matrix，在xml中设置是一样的效果

这里写了四个int值，用来储存当前操作的状态

然后这里是调用了OnTouchListener接口（可以通过匿名内部类的方法实现），然后在onTouch事件里判断手势，然后可以重写相应的事件

public class ScaleImageActivity extends AppCompatActivity implements View.OnTouchListener {
    private ImageView mImagevieqw;
    private int MODE;//当前状态
    public static final int MODE_NONE = 0;//无操作
    public static final int MODE_DRAG = 1;//单指操作
    public static final int MODE_SCALE = 2;//双指操作
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scale_image);
        mImagevieqw = findViewById(R.id.imagevieqw);
        mImagevieqw.setOnTouchListener(this);
        //设置图片资源
        mImagevieqw.setImageResource(R.mipmap.tesila);
        //设置ImageView的缩放类型
        mImagevieqw.setScaleType(ImageView.ScaleType.MATRIX);
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()&event.getActionMasked()){
            case MotionEvent.ACTION_DOWN://单指触碰
                break;
            case MotionEvent.ACTION_POINTER_DOWN://双指触碰
                break;
            case MotionEvent.ACTION_MOVE://滑动（单+双）
                break;
            case MotionEvent.ACTION_UP://单指离开
            case MotionEvent.ACTION_POINTER_UP://双指离开
                break;
        }
        return true;
    }
}

JAVA（单指拖动）

这里在大框架的基础上实现单指拖动图片的功能

这里实例化了两个Matrix（矩阵），分别用来储存 操作前&操作后 的矩阵状态，PointF对象是用来储存位移前的坐标的

然后在滑动事件里面，利用if语句通过判断当前操作状态，来处理相应的事件（因为单指和双指滑动事件都属于滑动事件，利用if来分开写），具体代码的作用都有注释，最后不要忘记了mImagevieqw.setImageMatrix(endMatrix);，否则代码写对了也不会有效果，就像你已经把一道算术题想好了，写好了，没写上答案！

public class ScaleImageActivity extends AppCompatActivity implements View.OnTouchListener {

    private ImageView mImagevieqw;

    private int MODE;//当前状态
    public static final int MODE_NONE = 0;//无操作
    public static final int MODE_DRAG = 1;//单指操作
    public static final int MODE_SCALE = 2;//双指操作

    private Matrix startMatrix = new Matrix();
    private Matrix endMatrix = new Matrix();
    private PointF startPointF = new PointF();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scale_image);
        mImagevieqw = findViewById(R.id.imagevieqw);
        mImagevieqw.setOnTouchListener(this);
        //设置图片资源
        mImagevieqw.setImageResource(R.mipmap.background);
        //设置ImageView的缩放类型
        mImagevieqw.setScaleType(ImageView.ScaleType.MATRIX);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()&event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN://单指触碰
                //起始矩阵先获取ImageView的当前状态
                startMatrix.set(mImagevieqw.getImageMatrix());
                //获取起始坐标
                startPointF.set(event.getX(), event.getY());
                //此时状态是单指操作
                MODE = MODE_DRAG;
                break;
            case MotionEvent.ACTION_POINTER_DOWN://双指触碰

                break;
            case MotionEvent.ACTION_MOVE://滑动（单+双）

                if (MODE == MODE_DRAG) {//单指滑动时
                    //先把初始位置传给变化后位置
                    endMatrix.set(startMatrix);
                    //向矩阵传入位移距离
                    endMatrix.postTranslate(event.getX() - startPointF.x, event.getY() - startPointF.y);
                }

                break;
            case MotionEvent.ACTION_UP://单指离开
            case MotionEvent.ACTION_POINTER_UP://双指离开
                //手指离开后，重置状态
                MODE = MODE_NONE;
                break;
        }
        //事件结束后，把矩阵的变化同步到ImageView上
        mImagevieqw.setImageMatrix(endMatrix);
        return true;
    }
}

JAVA（完整）

双指缩放较单指拖动而言略微麻烦一点点，因为你需要计算的是两点间的距离变化，而不是一个点的位移距离

这里需要获取操作前两个触碰点的距离，然后再计算操作后两个点的距离，计算出缩放比例，传到矩阵对象，最后调用ImageView的setImageMatrix()方法来改变ImageView就行了，逻辑还是比较简单的，只需要理解了逻辑顺序，然后学会获取坐标等等，实现这个还是挺简单的！

public class ScaleImageActivity extends AppCompatActivity implements View.OnTouchListener {

    private ImageView mImagevieqw;

    private int MODE;//当前状态
    public static final int MODE_NONE = 0;//无操作
    public static final int MODE_DRAG = 1;//单指操作
    public static final int MODE_SCALE = 2;//双指操作

    private Matrix startMatrix = new Matrix();//初始矩阵
    private Matrix endMatrix = new Matrix();//变化后的矩阵
    private PointF startPointF = new PointF();//初始坐标
    private float distance;//初始距离
    private float scaleMultiple;//缩放倍数

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scale_image);
        mImagevieqw = findViewById(R.id.imagevieqw);
        mImagevieqw.setOnTouchListener(this);
        //设置图片资源
        mImagevieqw.setImageResource(R.mipmap.background);
        //设置ImageView的缩放类型
        mImagevieqw.setScaleType(ImageView.ScaleType.MATRIX);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()&event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN://单指触碰

                //起始矩阵先获取ImageView的当前状态
                startMatrix.set(mImagevieqw.getImageMatrix());
                //获取起始坐标
                startPointF.set(event.getX(), event.getY());
                //此时状态是单指操作
                MODE = MODE_DRAG;

                break;
            case MotionEvent.ACTION_POINTER_DOWN://双指触碰

                //最后的状态传给起始状态
                startMatrix.set(endMatrix);
                //获取距离
                distance = getDistance(event);
                //状态改为双指操作
                MODE = MODE_SCALE;

                break;
            case MotionEvent.ACTION_MOVE://滑动（单+双）
                if (MODE == MODE_DRAG) {//单指滑动时
                    //获取初始矩阵
                    endMatrix.set(startMatrix);
                    //向矩阵传入位移距离
                    endMatrix.postTranslate(event.getX() - startPointF.x, event.getY() - startPointF.y);
                } else if (MODE == MODE_SCALE) {//双指滑动时
                    //计算缩放倍数
                    scaleMultiple = getDistance(event)/distance;
                    //获取初始矩阵
                    endMatrix.set(startMatrix);
                    //向矩阵传入缩放倍数
                    endMatrix.postScale(scaleMultiple, scaleMultiple,startPointF.x,startPointF.y);
                }
                break;
            case MotionEvent.ACTION_UP://单指离开
            case MotionEvent.ACTION_POINTER_UP://双指离开
                //手指离开后，重置状态
                MODE = MODE_NONE;
                break;
        }
        //事件结束后，把矩阵的变化同步到ImageView上
        mImagevieqw.setImageMatrix(endMatrix);
        return true;
    }

    //获取距离
    private static float getDistance(MotionEvent event) {//获取两点间距离
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (float) Math.sqrt(x * x + y * y);
    }

}

当然，这里是比较简单的实现，实际上还有很多需要完善的地方，比如需要设置一些最大最小缩放比例等等!
————————————————

原文链接：「Android_YU https://blog.csdn.net/qq_44720366/article/details/105490286

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2