效果图:
需要注意的是在布局中要设置imageview android:scaleType="matrix"
代码如下:
XImageView.java
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.widget.ImageView;
public class XImageView extends ImageView {
private Matrix matrix;
private float startX;
private float startY;
private PointF pointerMidByEvent;
private float startDisByXY;
// 第一步:手指拖动图片
// 第二步:实现手指放大
public XImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public XImageView(Context context, AttributeSet attrs) {
super(context, attrs);
initParams();
}
public XImageView(Context context) {
super(context);
}
private void initParams() {
matrix = new Matrix();
// 设置默认
setImageMatrix(matrix);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 触摸手指数量
int pointerCount = event.getPointerCount();
System.out.println("event.getPointerCount() = "+event.getPointerCount());
if (pointerCount == 1) {
// 目前我们只是一个手指触摸(拖动图片)
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 绝对位置 -- event.getRawX(); event.getRawY();
// 记录我们手指按下的时候的位置(相对位置)
startX = event.getX();
startY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
// 当前手指触摸的位置
float x2 = event.getX();
float y2 = event.getY();
// dx,dy--增量 delta
matrix.postTranslate((x2 - startX), (y2 - startY));
setImageMatrix(matrix);
startX = x2;
startY = y2;
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
} else if (event.getPointerCount() == 2) {
// 两个手指触摸放大(第二根手指触摸)
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_POINTER_DOWN:
System.out.println("----pointerCount == 2-------");
// 获取两点之间的距离
startDisByXY = getDisByXY(event);
// 计算缩放的中心点坐标(开始触摸的时候中心点坐标)
pointerMidByEvent = getPointerMidByEvent(event);
break;
case MotionEvent.ACTION_MOVE:
// 当前触摸的两个手指之间的距离
float disByXY = getDisByXY(event);
// 计算放大的倍数
float scale = disByXY / startDisByXY;
System.out.println("pointerMidByEvent = "+pointerMidByEvent);
matrix.postScale(scale, scale, pointerMidByEvent.x,
pointerMidByEvent.y);
setImageMatrix(matrix);
break;
default:
break;
}
}
return super.onTouchEvent(event);
}
/**
* 计算两点之间的中心点
*
* @param event
* @return
*/
private PointF getPointerMidByEvent(MotionEvent event) {
// 得到第一个手指的坐标
float x1 = event.getX();
float y1 = event.getY();
// 得到第二根手指触摸的位置
float x2 = event.getX(1);
float y2 = event.getY(1);
PointF pointF = new PointF();
pointF.x = (x1 + x2) / 2;
pointF.y = (y1 + y2) / 2;
return pointF;
}
/**
* 计算两个手指直接的中心位置(缩放中心点)
*
*
* @param event
* return value --- 两点之间的距离
*/
private float getDisByXY(MotionEvent event) {
// 得到第一个手指的坐标
float x1 = event.getX();
float y1 = event.getY();
// 得到第二根手指触摸的位置
float x2 = event.getX(1);
float y2 = event.getY(1);
// FloatMath.sqrt--开平方
return FloatMath.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}
}
MainActivity.java:
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >
<com.tz.dream.image.XImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:scaleType="matrix"
android:src="@drawable/image_bg" />
</RelativeLayout>
整理自教程