想必图片的拖动和放大缩小是每个人都使用过的功能，最常见于手机相册里，你可以通过一个手指拖动你的照片，同样也可以使用双指通过缩放手势对图片进行相应的缩放。那么这是如何实现的呢？
先来看效果图：
实现原理：
想要学会一样东西，光靠死记硬背是不行的，你得理解！
首先得知道，拖动以及缩放是你对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
|
|
收藏
淘帖
踩
