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));

使用就是这么简单。