Android View 查看大图（支持拖拽，缩放，旋转）

嗨 大家好，我是不服不行 。

今天为大家带来一个手机界面中的这个，这个一个常客。经常被使用在图片查看之中,让我们先看看效果。

额，由于是模拟器，所以不方便展现缩放和旋转效果。 

那么是如何实现的，仅仅只涉及到一个类。ps：此类纯手写，主要是为了练习 Scroller的用法和熟悉onTouchEvent()流程。

public class PictureView extends FrameLayout {
	private Scroller mScroller;

	private boolean is2doAnim = false;
	private boolean is2Scale = false;
	private boolean is2Rotate = false;
	private int duration = 600;

	/** 单个手指按下的位置 */
	private float downX, downY;
	/** 单个手指按下的时候 图像距离原点的值 */
	private int translateX, translateY;
	/** 对图片进行移动和缩放变换的矩阵 */
	private Matrix matrix = new Matrix();
	/** 待展示的Bitmap对象 */
	private Bitmap sourceBitmap;
	/** 双手都按下时的手指间距离 */
	private double downDistance;
	/** 图片的缩放倍数 */
	private float scaleSize = 1;
	private float tmpScaleSize = scaleSize;
	/** 双手都按下时的手指方向相对于y轴的角度 */
	private double downDegress;
	/** 图片的旋转角度 */
	private float degrees = 0;
	private float tmpDegress = degrees;
	/** 控件自身宽高 */
	private int mWidth, mHeight;
	/** 手指松开将会还原到基本的最大缩放倍数 */
	private static final float MAX_SCALE_SIZE = 9;
	/** 手指松开将会还原到基本的最小缩放倍数 */
	private static final float MIN_SCALE_SIZE = 1;
	/** 最大缩放倍数 */
	private static final float LIMIT_MAX_SCALE_SIZE = MAX_SCALE_SIZE * 1.3f;
	/** 最小缩放倍数 */
	private static final float LIMIT_MIN_SCALE_SIZE = MIN_SCALE_SIZE * 0.5f;
	/** 手指抬起后，图片收尾旋转的任务 每次恢复的角度 */
	private static final int RESET_DEGRESS = 3;

	private Handler handler = new Handler();

	public PictureView(Context context) {
		this(context, null);
	}

	public PictureView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public PictureView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		setBackgroundColor(0xff000000);
		mScroller = new Scroller(context, new DecelerateInterpolator());

		post(new Runnable() {
			@Override public void run() {
				scrollTo(-calcCenterX(), -calcCenterY());
			}
		});
	}

	public void setImageBitmap(Bitmap source) {
		sourceBitmap = source;
	}

	@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
		super.onLayout(changed, left, top, right, bottom);
		if (changed) {
			mWidth = right - left;
			mHeight = bottom - top;
		}
	}

	@Override public boolean onTouchEvent(MotionEvent event) {
		if (sourceBitmap != null) {
			switch (event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				translateX = getScrollX(); // 记录再次按压时，图片相对于原点位置
				translateY = getScrollY();
				downX = event.getRawX();
				downY = event.getRawY();

				is2doAnim = false; // 取消拖拽回中心的动画
				return true;
			case MotionEvent.ACTION_MOVE:
				if (event.getPointerCount() > 1) {
					// 双指按压，缩放模式
					is2Scale = true;
					if (downDistance == 0) {
						downDistance = calcDistanceBetweenFingers(event);
					}
					if (downDegress == 0) {
						downDegress = calcDegressBetweenFingers(event);
					}
					if (is2Rotate) {
						rotateContent(event);
						return true;
					}
					// 如果 双指移动产生一定角度，旋转模式
					if (Math.abs(downDegress - calcDegressBetweenFingers(event)) > 20f) {
						is2Rotate = true;
					}
					scaleContent(event);
				} else {
					if (is2Scale) {
						return true;
					}
					// 单指拖拽模式
					scrollTo(translateX + (int) (downX - event.getRawX()) / 2, translateY + (int) (downY - event.getRawY()) / 2);
				}
				break;
			case MotionEvent.ACTION_POINTER_UP:
				tmpScaleSize = scaleSize;
				tmpDegress = degrees;
				break;
			case MotionEvent.ACTION_CANCEL:
			case MotionEvent.ACTION_UP:
				is2doAnim = true;
				is2Scale = false;
				is2Rotate = false;
				downDistance = 0;
				downDegress = 0;
				tmpScaleSize = scaleSize;
				tmpDegress = degrees;
				dealTouchMoveResult();
				break;
			}
		}
		return super.onTouchEvent(event);
	}

	private void dealTouchMoveResult() {
		startMoveAnim();
		startScaleAnim();
		startRotateAnim();
	}

	private void startMoveAnim() {
		if (isWidthOverflow() && isHeightOverflow()) {
			// 图片缩放后的宽度高度都溢出屏幕
			int overflowX = 0;
			if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f < -getScrollX()) {
				// 手指向右滑动，图片距离左边缘的距离
				overflowX = -(int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
			} else if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f + (mWidth - sourceBitmap.getWidth() * scaleSize) > -getScrollX()) {
				// 手指向左滑动，图片距离右边缘的距离
				overflowX = (int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
			}
			int overflowY = 0;
			if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2 < -getScrollY()) {
				// 手指向下滑动，图片距离上边缘的距离
				overflowY = -(int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
			} else if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2f + (mHeight - sourceBitmap.getHeight() * scaleSize) > -getScrollY()) {
				// 手指向上滑动，图片距离下边缘的距离
				overflowY = (int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
			}

			startMoveAnim(getScrollX(), getScrollY(), overflowX != 0 ? (-getScrollX() - calcCenterX() + overflowX) : 0,
					overflowY != 0 ? (-getScrollY() - calcCenterY() + overflowY) : 0, duration);
		} else if (isWidthOverflow()) {
			// 图片缩放后仅宽度溢出屏幕
			if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f < -getScrollX()) {
				// 手指向右滑动，图片距离左边缘的距离
				int overflowX = (int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX() - overflowX, -getScrollY() - calcCenterY(),
						duration);
			} else if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f + (mWidth - sourceBitmap.getWidth() * scaleSize) > -getScrollX()) {
				// 手指向左滑动，图片距离右边缘的距离
				int overflowX = (int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX() + overflowX, -getScrollY() - calcCenterY(),
						duration);
			} else {
				startMoveAnim(getScrollX(), getScrollY(), 0, -getScrollY() - calcCenterY(), duration);
			}
		} else if (isHeightOverflow()) {
			// 图片缩放后仅高度溢出屏幕
			if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2 < -getScrollY()) {
				// 手指向下滑动，图片距离上边缘的距离
				int overflowY = (int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), -getScrollY() - calcCenterY() - overflowY,
						duration);
			} else if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2f + (mHeight - sourceBitmap.getHeight() * scaleSize) > -getScrollY()) {
				// 手指向上滑动，图片距离下边缘的距离
				int overflowY = (int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), -getScrollY() - calcCenterY() + overflowY,
						duration);
			} else {
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), 0, duration);
			}
		} else {
			// 回到中心点
			startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), -getScrollY() - calcCenterY(), duration);
		}
	}

	private void startMoveAnim(int startX, int startY, int dx, int dy, int duration) {
		mScroller.startScroll(startX, startY, dx, dy, duration);
		invalidate();
	}

	private void startScaleAnim() {
		handler.removeCallbacks(runSize);
		handler.post(runSize);
	}

	private void startRotateAnim() {
		handler.removeCallbacks(runDegress);
		handler.post(runDegress);
	}

	/**
	 * 手指抬起后，图片收尾缩放的任务
	 */
	private Runnable runSize = new Runnable() {
		@Override public void run() {
			if (scaleSize > MAX_SCALE_SIZE) {
				scaleSize = scaleSize - 0.4f;
				tmpScaleSize = scaleSize;
				invalidate();
				handler.postDelayed(runSize, 10);
			} else if (scaleSize < MIN_SCALE_SIZE) {
				scaleSize = scaleSize + 0.1f;
				tmpScaleSize = scaleSize;
				invalidate();
				handler.postDelayed(runSize, 10);
			}
		}
	};

	/**
	 * 手指抬起后，图片收尾旋转的任务
	 */
	private Runnable runDegress = new Runnable() {
		@Override public void run() {
			float d = degrees % 90;
			if (d > 45 || (d > -45 && d < 0)) {
				degrees = degrees + RESET_DEGRESS;
				d = degrees % 90;
				if (d > 0 && d < RESET_DEGRESS) {
					degrees = degrees - d;
				} else if (d < -90 + RESET_DEGRESS) {
					degrees = degrees - (90 + d);
				}

				tmpDegress = degrees;
				invalidate();
				handler.postDelayed(runDegress, 10);
			} else if (d < -45 || (d > 0 && d < 45)) {
				degrees = degrees - RESET_DEGRESS;
				d = degrees % 90;
				if (d < 0 && d > -RESET_DEGRESS) {
					degrees = degrees - d;
				} else if (d > 90 - RESET_DEGRESS) {
					degrees = degrees + (90 - d);
				}

				tmpDegress = degrees;
				invalidate();
				handler.postDelayed(runDegress, 10);
			}
		}
	};

	@Override public void computeScroll() {
		if (is2doAnim && mScroller.computeScrollOffset()) {
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
		super.computeScroll();
	}

	/**
	 * 根据手指触摸事件，计算手指距离
	 */
	private double calcDistanceBetweenFingers(MotionEvent event) {
		float disX = Math.abs(event.getX(0) - event.getX(1));
		float disY = Math.abs(event.getY(0) - event.getY(1));
		return Math.sqrt(disX * disX + disY * disY);
	}

	/**
	 * 根据手指触摸事件，计算旋转角度
	 */
	private double calcDegressBetweenFingers(MotionEvent event) {
		float x = event.getX(0) - event.getX(1);
		float y = event.getY(0) - event.getY(1);
		double degress = Math.toDegrees(Math.atan(y / x));
		if (x > 0 && y > 0) {
			degress = degress + 0;
		} else if (x < 0 && y > 0) {
			degress = degress + 180;
		} else if (x < 0 && y < 0) {
			degress = degress + 180;
		} else if (x > 0 && y < 0) {
			degress = degress + 360;
		}
		return degress;
	}

	/**
	 * 通过影响 scaleSize 的值，改变onDraw()的绘制结果 ，作用于图片缩放
	 */
	private void scaleContent(MotionEvent event) {
		scaleSize = (float) (tmpScaleSize + (calcDistanceBetweenFingers(event) - downDistance) / (mWidth / 4));
		if (scaleSize > LIMIT_MAX_SCALE_SIZE) {
			scaleSize = LIMIT_MAX_SCALE_SIZE;
		} else if (scaleSize < LIMIT_MIN_SCALE_SIZE) {
			scaleSize = LIMIT_MIN_SCALE_SIZE;
		}
		invalidate();
	}

	/**
	 * 通过影响 degress 的值，改变onDraw()的绘制结果 ，作用于图片旋转
	 */
	private void rotateContent(MotionEvent event) {
		degrees = tmpDegress + (float) (calcDegressBetweenFingers(event) - downDegress);
		invalidate();
	}

	@Override protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		if (sourceBitmap != null) {
			matrix.reset();
			matrix.postScale(scaleSize, scaleSize, sourceBitmap.getWidth() / 2, sourceBitmap.getHeight() / 2);
			matrix.postRotate(degrees, sourceBitmap.getWidth() / 2, sourceBitmap.getHeight() / 2);

			canvas.drawBitmap(sourceBitmap, matrix, null);
		}
	}

	/**
	 * 当前图片宽度是否超出屏幕宽度
	 */
	private boolean isWidthOverflow() {
		return sourceBitmap.getWidth() * scaleSize > mWidth;
	}

	/**
	 * 当前图片高度是否超出屏幕高度
	 */
	private boolean isHeightOverflow() {
		return sourceBitmap.getHeight() * scaleSize > mHeight;
	}

	/**
	 * 中心坐标点 x轴
	 */
	private int calcCenterX() {
		if (sourceBitmap != null) {
			return (mWidth - sourceBitmap.getWidth()) / 2;
		}
		return mWidth / 2;
	}

	/**
	 * 中心坐标点 y轴
	 */
	private int calcCenterY() {
		if (sourceBitmap != null) {
			return (mHeight - sourceBitmap.getWidth()) / 2;
		}
		return mHeight / 2;
	}
}

分析：首先图片是怎么在界面上显示的呢？ 很容易发现到唯一 的一个对外公开的方法setImageBitmap()，所以界面上显示的图片数据源应该就是它了。那么再次定位到onDraw()方法。被设置在这个控件的数据源被一些处理后通过canvas画在了界面上。当然第一步处理是缩放，第二步处理是旋转，所以本类的核心参数由此而知为scaleSize和degrees。

那么整体流程便是这样的： 通过触摸来影响scaleSize和degress的值，之后调用invalidate()重绘视图来完成图片缩放和旋转的功能。 

那么拖拽呢？拖拽当然玩的就是 Scroller ~

那么重新定位到功能的起点 onTouchEvent()。其中存在event.getPointerCount()的方法，此方法用大腿想想就知道是为了处理双手按压的逻辑，因此可以先忽略掉。那么单指的时候其实就是简单的调用了scrollTo()，图片随手指的移动而移动。之后在抬起的时候dealTouchMoveResult()中通过startMoveAnim()来进行手指抬起的收尾逻辑。

然后当2个手指按下便会记录downDistance和downDegress参数，随着之后手指间的距离的变化改变scaleSize影响绘制的结果，同时一直记录手指是否有旋转的趋势，如果手指间的移动角度较大，便进入旋转模式，随着之后手指间的角度的变化改变degrees影响绘制的结果。整体是不是很清晰明了呢~

如何使用：

<com.example.view.PictureView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/view_pircture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

PictureView pictureView = (PictureView) findViewById(R.id.view_pircture);
pictureView.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.head));

使用就是这么简单。