1 简介

先来一张效果图

Android控件实现图片缩放功能

TIM图片.gif

上图中灰色的一块是ImageVIEw控件，ImageVIEw中的图片进行左右上下移动，以及双指缩放。

对于androID控件的缩放移动，点这里----android控件的缩放，移动

2 使用步骤

布局layout

<?xml version="1.0" enCoding="utf-8"?>
<linearLayout xmlns:androID="http://scheR_846_11845@as.androID.com/apk/res/androID"
 androID:orIEntation="vertical"
 androID:ID="@+ID/root"
 androID:layout_wIDth="match_parent"
 androID:layout_height="match_parent"
 androID:BACkground="@color/mywhite"
 androID:gravity="center_horizontal"
 androID:fitsSystemwindows="true">
 <ImageVIEw
 androID:BACkground="@color/light_gery"
 androID:scaleType="matrix"
 androID:src="@drawable/ic_sure"
 androID:ID="@+ID/hair_iv"
 androID:layout_margintop="50dp"
 androID:layout_wIDth="300dp"
 androID:layout_height="300dp"/>
</linearLayout>

先看关于手势触摸的判断，需要判断用户是单指触摸还是双指，分别在OnTounch的监听事件中判断。

注：先重写onLongClick()方法，不然会影响Ontouch里面的触摸监听。

 private static final int nONE = 0;
 private static final int DRAG = 1;
 private static final int ZOOM = 2;
 private int mode = NONE;
hairIv.setonLongClickListener(new VIEw.onLongClickListener() {
 @OverrIDe
 public Boolean onLongClick(VIEw v) {
 return true;
 }
 });
 hairIv.setontouchListener(new VIEw.ontouchListener() {
 @OverrIDe
 public Boolean ontouch(VIEw v,MotionEvent event) {
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动
 if (mode == DRAG) {
 // 是一个手指拖动
 Log.d(tag,"mode = DRAG" );
 } else if (mode == ZOOM) {
 // 两个手指滑动
 Log.d(tag,"mode = ZOOM" );
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 return true;
 }
 });

这些写上之后就可以先看一下单指，双指的触摸事件有没有被正确处理

通过AndroID提供的Matrix类对图像进行处理，关于Matrix的原理可以看一下Android官方文档Matrix部分，也可以找一些其他的博客，这里只看使用。

定义要用到的变量

 private Matrix matrix = new Matrix();
 private Matrix savedMatrix = new Matrix();
 // 第一个按下的手指的点
 private PointF startPoint = new PointF();
 // 两个按下的手指的触摸点的中点
 private PointF mIDPoint = new PointF();
 // 初始的两个手指按下的触摸点的距离
 private float oridis = 1f;

在ontouch中完善

@OverrIDe
 public Boolean ontouch(VIEw v,MotionEvent event) {
 ImageView view = (ImageVIEw) v;
 final int x = (int) event.getRawX();
 final int y = (int) event.getRawY();
 Log.d(tag,"ontouch: x= " + x + "y=" + y);
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 matrix.set(vIEw.getimageMatrix());
 savedMatrix.set(matriX);
 startPoint.set(event.getX(),event.getY());
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 oridis = distance(event);
 if (oridis > 10f) {
 savedMatrix.set(matriX);
 mIDPoint = mIDPoint(event);
 mode = ZOOM;
 }
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动事件
 if (mode == DRAG) {
 // 是一个手指拖动
 matrix.set(savedMatriX);
 matrix.postTranslate(event.getX() - startPoint.x,event.getY()
  - startPoint.y);
 } else if (mode == ZOOM) {
 // 两个手指滑动
 float newdist = distance(event);
 if (newdist > 10f) {
 matrix.set(savedMatriX);
 float scale = newdist / oridis;
 matrix.postscale(scale,scale,mIDPoint.x,mIDPoint.y);
 }
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 vIEw.setimageMatrix(matriX);
 return true;
 }

其中用到的计算位置和距离的方法

 /**
 * 计算两个手指头之间的中心点的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 触摸事件
 * @return 返回中心点的坐标
 */
 private PointF mIDPoint(MotionEvent event) {
 float x = (event.getX(0) + event.getX(1)) / 2;
 float y = (event.getY(0) + event.getY(1)) / 2;
 return new PointF(x,y);
 }
 /**
 * 计算两个手指间的距离
 *
 * @param event 触摸事件
 * @return 放回两个手指之间的距离
 */
 private float distance(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);//两点间距离公式
 }

3 源码

public class ImageActivity extends AppCompatActivity{
 @BindVIEw(R.ID.hair_iv)
 ImageVIEw hairIv;
 private static final int nONE = 0;
 private static final int DRAG = 1;
 private static final int ZOOM = 2;
 private int mode = NONE;
 private Matrix matrix = new Matrix();
 private Matrix savedMatrix = new Matrix();
 // 第一个按下的手指的点
 private PointF startPoint = new PointF();
 // 两个按下的手指的触摸点的中点
 private PointF mIDPoint = new PointF();
 // 初始的两个手指按下的触摸点的距离
 private float oridis = 1f;
 @OverrIDe
 protected voID onCreate(Bundle savedInstanceStatE) {
 super.onCreate(savedInstanceStatE);
 setContentVIEw(R.layout.activity_imagE);
 ButterKnife.bind(this);
 hairIv.setonLongClickListener(new VIEw.onLongClickListener() {
 @OverrIDe
 public Boolean onLongClick(VIEw v) {
 return true;
 }
 });
 hairIv.setontouchListener(new VIEw.ontouchListener() {
 @OverrIDe
 public Boolean ontouch(VIEw v,mIDPoint.y);
 }
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 vIEw.setimageMatrix(matriX);
 return true;
 }
 });
 }
 /**
 * 计算两个手指头之间的中心点的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 触摸事件
 * @return 返回中心点的坐标
 */
 private PointF mIDPoint(MotionEvent event) {
 float x = (event.getX(0) + event.getX(1)) / 2;
 float y = (event.getY(0) + event.getY(1)) / 2;
 return new PointF(x,y);
 }
 /**
 * 计算两个手指间的距离
 *
 * @param event 触摸事件
 * @return 放回两个手指之间的距离
 */
 private float distance(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);//两点间距离公式
 }
 }