Android通过OnTouchListener缩放、拖拽ImageView图片

正在做一个项目，在很多地方有用到图片，要求图片都可以单击(双击)查看大图。在网上找的代码都是直接在activity里设置ImageView 的OnTouchListener事件来实现的。如果有多个地方要用到的话，代码重复量很大，所以自己封装了一下，当然了，OnTouchListener的代码还是在网上借鉴来的，上代码：

package org.vstinspection.activity.uihelper;

import org.vstinspection.utils.AppUtils;

import android.graphics.Bitmap;

import android.graphics.Matrix;

import android.graphics.PointF;

import android.graphics.RectF;

import android.util.FloatMath;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.widget.ImageView;

public class ImageViewTouchListener implements OnTouchListener {

private ImageView imageView;

private Bitmap bm;

private CustomDialog dialog;

public ImageViewTouchListener(CustomDialog dialog, ImageView imageView,

Bitmap bm) {

this.imageView = imageView;

this.bm = Bitmap.createBitmap(bm, 0, 0, bm.getWidth() - 1,

bm.getHeight() - 1);

this.dialog = dialog;

init();

}

private void init() {

center(true,true);

imageView.setImageMatrix(matrix);

}

/** 记录是拖拉照片模式还是放大缩小照片模式 */

private int mode = 0;// 初始状态

/** 拖拉照片模式 */

private static final int MODE_DRAG = 1;

/** 放大缩小照片模式 */

private static final int MODE_ZOOM = 2;

/** 用于记录开始时候的坐标位置 */

private PointF startPoint = new PointF();

/** 用于记录拖拉图片移动的坐标位置 */

private Matrix matrix = new Matrix();

/** 用于记录图片要进行拖拉时候的坐标位置 */

private Matrix currentMatrix = new Matrix();

/** 两个手指的开始距离 */

private float startDis;

/** 两个手指的中间点 */

private PointF midPoint;

@Override

public boolean onTouch(View v, MotionEvent event) {

/** 通过与运算保留最后八位 MotionEvent.ACTION_MASK = 255 */

switch (event.getAction() & MotionEvent.ACTION_MASK) {

// 手指压下屏幕

case MotionEvent.ACTION_DOWN:

if (AppUtils.Utils.isFastDoubleClick(500)) {

dialog.dismiss();

return true;

}

mode = MODE_DRAG;

// 记录ImageView当前的移动位置

currentMatrix.set(imageView.getImageMatrix());

startPoint.set(event.getX(), event.getY());

break;

// 手指在屏幕上移动，改事件会被不断触发

case MotionEvent.ACTION_MOVE:

// 拖拉图片

if (mode == MODE_DRAG) {

float dx = event.getX() - startPoint.x; // 得到x轴的移动距离

float dy = event.getY() - startPoint.y; // 得到x轴的移动距离

// 在没有移动之前的位置上进行移动

matrix.set(currentMatrix);

matrix.postTranslate(dx, dy);

}

// 放大缩小图片

else if (mode == MODE_ZOOM) {

float endDis = distance(event);// 结束距离

if (endDis > 10f) { // 两个手指并拢在一起的时候像素大于10

float scale = endDis / startDis;// 得到缩放倍数

matrix.set(currentMatrix);

matrix.postScale(scale, scale, midPoint.x, midPoint.y);

}

}

break;

// 手指离开屏幕

case MotionEvent.ACTION_UP:

// 当触点离开屏幕，但是屏幕上还有触点(手指)

case MotionEvent.ACTION_POINTER_UP:

mode = 0;

break;

// 当屏幕上已经有触点(手指)，再有一个触点压下屏幕

case MotionEvent.ACTION_POINTER_DOWN:

mode = MODE_ZOOM;

/** 计算两个手指间的距离 */

startDis = distance(event);

/** 计算两个手指间的中间点 */

if (startDis > 10f) { // 两个手指并拢在一起的时候像素大于10

midPoint = mid(event);

// 记录当前ImageView的缩放倍数

currentMatrix.set(imageView.getImageMatrix());

}

break;

}

imageView.setImageMatrix(matrix);

CheckView();

return true;

}

/** 计算两个手指间的距离 */

private float distance(MotionEvent event) {

float dx = event.getX(1) - event.getX(0);

float dy = event.getY(1) - event.getY(0);

/** 使用勾股定理返回两点之间的距离 */

return FloatMath.sqrt(dx * dx + dy * dy);

}

/** 计算两个手指间的中间点 */

private PointF mid(MotionEvent event) {

float midX = (event.getX(1) + event.getX(0)) / 2;

float midY = (event.getY(1) + event.getY(0)) / 2;

return new PointF(midX, midY);

}

private void CheckView() {

float p[] = new float[9];

matrix.getValues(p);

if (mode == 2) {

if (p[0] < 1f) {

matrix.setScale(1f, 1f);

}

if (p[0] > 4f) {

matrix.setScale(4f, 4f);

}

}

center(true, true);

}

/**

* 横向、纵向居中

*/

protected void center(boolean horizontal, boolean vertical) {

Matrix m = new Matrix();

m.set(matrix);

RectF rect = new RectF(0, 0, bm.getWidth(), bm.getHeight());

m.mapRect(rect);

float height = rect.height();

float width = rect.width();

float deltaX = 0, deltaY = 0;

if (vertical) {

// 图片小于屏幕大小，则居中显示。大于屏幕，上方留空则往上移，下方留空则往下移

int screenHeight = UIHelper.height;

if (height < screenHeight) {

deltaY = (screenHeight - height) / 2 - rect.top;

} else if (rect.top > 0) {

deltaY = -rect.top;

} else if (rect.bottom < screenHeight) {

deltaY = imageView.getHeight() - rect.bottom;

}

}

if (horizontal) {

int screenWidth = UIHelper.width;

if (width < screenWidth) {

deltaX = (screenWidth - width) / 2 - rect.left;

} else if (rect.left > 0) {

deltaX = -rect.left;

} else if (rect.right < screenWidth) {

deltaX = screenWidth - rect.right;

}

}

matrix.postTranslate(deltaX, deltaY);

}

}

ps:我是以弹出Dialog的方式实现的，在dialog里设置ImageView的OnTouchListener

具体用法:

在具体要缩放图片的Activity里调用方法:PopuDialogUtil.popuImageDialog(Context,Bitmap);

public static void popuImageDialog(Context context, Bitmap bm) {

if (bm == null) {

return;

}

final CustomDialog dialog = new CustomDialog(context,

R.layout.imageview1, LayoutParams.MATCH_PARENT,

LayoutParams.MATCH_PARENT);

ImageView imageView = (ImageView) dialog.findViewById(R.id.image);

imageView.setImageBitmap(bm);

imageView.setOnTouchListener(new ImageViewTouchListener(dialog,

imageView, bm));

dialog.show();

}

顺便附上CustomDialog 代码(实现无外/黑框的弹出框)

public CustomDialog(Context context, int layout, int width, int height) {

super(context, R.style.DialogStyle);

setContentView(layout);

Window window = getWindow();

WindowManager.LayoutParams params = window.getAttributes();

params.width = width;

params.height = height;

params.gravity = Gravity.CENTER;

window.setAttributes(params);

setCanceledOnTouchOutside(true);// 点击对话框外部取消对话框显示

}

R.style.DialogStyle：

<style name="DialogStyle" parent="@android:Theme.Dialog">

<item name="android:windowFrame">@null</item>

<item name="android:windowNoTitle">true</item>

<item name="android:windowBackground">@null</item>

<item name="android:windowIsFloating">true</item>

<item name="android:windowContentOverlay">@null</item>

</style>

很详尽吧，不用谢啦~~~~