1.回顾
上篇学习了，开源框架中：个性通知效果，7种动画实现；非常不错；
2.重点
（1）实现自定义控件ImageView
（2）自由的放大和缩小
（3）自由移动
3.背景
（1） 因为需要使用到 图片预览效果，包括 触控放大缩小，双击 放大缩小，自由移动；
（2） 就在 慕课网上看了 hyman 老师的课程 《打造个性的图片预览与多点触控课程》；
（3）学习过程中收获很多，懂一些原理知识；
（4） 但是 最终效果 稍微有点参差，在自由移动的时候，只能在放大的地方自由移动，但不影响平常使用就很好了；
（5）后自己在开源框架中，挖取了 图片预览的 自定义ImageView ，封装成了 jar包，非常完美；
4.课程学习原理源码
package com.example.view;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Matrix;import android.graphics.RectF;import android.graphics.drawable.Drawable;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.util.Log;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.ScaleGestureDetector;import android.view.ScaleGestureDetector.OnScaleGestureListener;import android.view.View;import android.view.View.OnTouchListener;import android.view.ViewConfiguration;import android.view.ViewTreeObserver.OnGlobalLayoutListener;import android.widget.ImageView;@SuppressLint("NewApi")public class ZoomImageView extends ImageView implements OnGlobalLayoutListener,OnScaleGestureListener, OnTouchListener {/*** 自由的放大 和 缩小 放大 可以 自由的 移动 处理 和viewpager 事件冲突* * * 1.Matrix 2.ScaleGestureDetector 3.GestureDetector 4.事件分发机制* * * 1.实现* */// 第一次运行 初始化private boolean isOnce = false;// 缩放比例private float initScale;private float minScale;private float maxScale;// 缩放实现private Matrix matrix;// 多点触控private ScaleGestureDetector scaleGestureDetector;// 自由移动的比较值private int touchSlop;// 双击 放大缩小private GestureDetector gestureDetector;// 判断双击中private boolean isDoubletag = false;/*** 重写 3个 构造方法* * @param context* @param attrs* @param defStyleAttr*/public ZoomImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);//matrix = new Matrix();setScaleType(ScaleType.MATRIX);// 初始化操作写在 3个参数的 构造函数里scaleGestureDetector = new ScaleGestureDetector(context, this);setOnTouchListener(this);// 初始化 比较值touchSlop = ViewConfiguration.get(context).getScaledDoubleTapSlop();// 双击放大缩小gestureDetector = new GestureDetector(context,new GestureDetector.SimpleOnGestureListener() {@Overridepublic boolean onDoubleTap(MotionEvent e) {// 双击事件if (isDoubletag) {return isDoubletag;}float x = e.getX();float y = e.getY();if (getScale() < minScale) {postDelayed(new AutoScaleRunnable(minScale, x, y),16);isDoubletag = true;} else {postDelayed(new AutoScaleRunnable(initScale, x, y),16);isDoubletag = true;}return true;}});}/*** 自动放大 缩小 缓慢的缩放* * @author yuan**/private class AutoScaleRunnable implements Runnable {private float mTargetScale;private float x;private float y;private final float BIGGER = 1.07f;private final float SMALL = 0.93f;private float tmpScale;/*** 实现构造方法* * @param mTargetScale* @param x* @param y*/public AutoScaleRunnable(float mTargetScale, float x, float y) {this.mTargetScale = mTargetScale;this.x = x;this.y = y;if (getScale() < mTargetScale) {tmpScale = BIGGER;}if (getScale() > mTargetScale) {tmpScale = SMALL;}}@Overridepublic void run() {//matrix.postScale(tmpScale, tmpScale, x, y);checkBorderAndCenterWhenScale();setImageMatrix(matrix);float currentScale = getScale();if ((tmpScale > 1.0f && currentScale < mTargetScale)|| (tmpScale < 1.0f && currentScale > mTargetScale)) {postDelayed(this, 16);} else {float scale = mTargetScale / currentScale;matrix.postScale(scale, scale, x, y);checkBorderAndCenterWhenScale();setImageMatrix(matrix);isDoubletag = false;}}}public ZoomImageView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public ZoomImageView(Context context) {this(context, null);}@Overrideprotected void onAttachedToWindow() {// 注册 GlobalListenersuper.onAttachedToWindow();getViewTreeObserver().addOnGlobalLayoutListener(this);}@SuppressLint("NewApi")@Overrideprotected void onDetachedFromWindow() {// 移除 GlobalListenersuper.onDetachedFromWindow();getViewTreeObserver().removeOnGlobalLayoutListener(this);}@Overridepublic void onGlobalLayout() {// 初始化if (!isOnce) {// 控件的宽和高int width = getWidth();int height = getHeight();// 获得图片的宽和高Drawable d = getDrawable();if (d == null) {return;}int imgWidth = d.getIntrinsicWidth();int imgHeight = d.getIntrinsicHeight();// 缩放比例float scale = 1.0f;if (imgWidth > width && imgHeight < height) {scale = width * 1.0f / imgWidth;} else if (imgHeight > height && imgWidth < width) {scale = height * 1.0f / imgHeight;} else if ((imgWidth > width && imgHeight > height)|| (imgWidth < width && imgHeight < height)) {scale = Math.min(width * 1.0f / imgWidth, height * 1.0f/ imgHeight);}/*** 初始化 缩放比例*/initScale = scale;maxScale = scale * 4;minScale = scale * 2;Log.i("TAG", scale + "");/*** 将图片移动到 图片中心* */int mx = width / 2 - imgWidth / 2;int my = height / 2 - imgHeight / 2;/*** Matrix 3*3 矩阵 xScale xskew xTrans yScale yskew yTrans 0 0 0* * 使用 post 操作*/matrix.postTranslate(mx, my);matrix.postScale(initScale, initScale, width / 2, height / 2);setImageMatrix(matrix);isOnce = true;}}/*** 拿到当前图片的缩放值* * @return*/public float getScale() {float[] values = new float[9];matrix.getValues(values);return values[Matrix.MSCALE_X];}@Overridepublic boolean onScale(ScaleGestureDetector detector) {// 缩放比例 initScale maxScalefloat scaleFactor = detector.getScaleFactor();if (getDrawable() == null) {return true;}float scale = getScale();// 缩放控制if ((scale < maxScale && scaleFactor > 1.0f)|| (scale > initScale && scaleFactor < 1.0f)) {if (scale * scaleFactor < initScale) {scaleFactor = initScale / scale;} else if (scale * scaleFactor > maxScale) {scale = maxScale / scale;}matrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(),detector.getFocusY());checkBorderAndCenterWhenScale();setImageMatrix(matrix);}return false;}@Overridepublic boolean onScaleBegin(ScaleGestureDetector detector) {// 返回truereturn true;}@Overridepublic void onScaleEnd(ScaleGestureDetector detector) {// TODO Auto-generated method stub}// ---------------------------------------------------------自由移动// 存储最后的位置private int lastPointCount;private float Lx;private float Ly;private boolean isDrag;private boolean isCheckLeftAndRight, isCheckTopAndBottom = false;@Overridepublic boolean onTouch(View v, MotionEvent event) {Log.i("TAG","onTouch"+1);// 双击的时候不让其 移动if (gestureDetector.onTouchEvent(event)) {return true;}// 设置 onTouch 事件scaleGestureDetector.onTouchEvent(event);// 自由移动实现float x = 0, y = 0;int pointerCount = event.getPointerCount();for (int i = 0; i < pointerCount; i++) {x += event.getX(i);y += event.getY(i);}Log.i("TEST","pointerCount:"+pointerCount+"X:"+x+"Y:"+y);x /= pointerCount;y /= pointerCount;if (lastPointCount != pointerCount) {isDrag = false;Lx = x;Ly = y;}lastPointCount = pointerCount;RectF f = getMatrixRectF();// 处理事件冲突问题！！switch (event.getAction()) {case MotionEvent.ACTION_DOWN:Log.i("TAG","onTouch"+2);// 解决事件冲突// 当图片的 高度和宽度 大于屏幕的寬高度的时候，为图片的事件，否则为viewPagerif (ischong(f)) {if (getParent() instanceof ViewPager) {getParent().requestDisallowInterceptTouchEvent(true);}}break;case MotionEvent.ACTION_MOVE:Log.i("TAG","onTouch"+3);// 解决事件冲突if (ischong(f)) {if (getParent() instanceof ViewPager) {getParent().requestDisallowInterceptTouchEvent(true);}}// 正在移动float dx = x - Lx;float dy = y - Ly;if (!isDrag) {isDrag = isMoveAction(dx, dy);}if (isDrag) {if (getDrawable() != null) {isCheckLeftAndRight = isCheckTopAndBottom = true;// 如果高度 小于控件宽度，不允许横向移动if (f.width() < getWidth()) {isCheckLeftAndRight = false;dx = 0;}if (f.height() < getHeight()) {isCheckTopAndBottom = false;dy = 0;}matrix.postTranslate(dx, dy);checkBorderWhenTranslate();setImageMatrix(matrix);setFocusable(true);}}Ly = y;Lx = x;break;case MotionEvent.ACTION_CANCEL:Log.i("TAG","onTouch"+4);lastPointCount = 0;break;}return true;}/*** 解决 事件冲突* * @param f* @return*/private boolean ischong(RectF f) {return (f.width() > getWidth() + 0.01)|| (f.height() > getHeight() + 0.01);}/*** 移动 判断边界*/private void checkBorderWhenTranslate() {RectF rectf = getMatrixRectF();float dx = 0;float dy = 0;int width = getWidth();int height = getHeight();if (rectf.top > 0 && isCheckTopAndBottom) {dy = -rectf.top;}if (rectf.bottom < height && isCheckTopAndBottom) {dy = height - rectf.bottom;}if (rectf.right < width && isCheckLeftAndRight) {dx = width - rectf.right;}if (rectf.left > 0 && isCheckLeftAndRight) {dx = -rectf.left;}matrix.postTranslate(dx, dy);}/*** 判断是否移动* * @param dx* @param dy* @return*/private boolean isMoveAction(float dx, float dy) {return Math.sqrt(dx * dx + dy * dy) > touchSlop;}// ------------------------------------------------比例缩放/*** 获得 图片放大缩小 以后的宽和高* * @return*/private RectF getMatrixRectF() {Matrix smatrix = matrix;RectF rectF = new RectF();Drawable drawable = getDrawable();if (drawable != null) {rectF.set(0, 0, drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());smatrix.mapRect(rectF);}return rectF;}/*** 防止缩放时，出现白边*/private void checkBorderAndCenterWhenScale() {RectF rectf = getMatrixRectF();float dx = 0;float dy = 0;int width = getWidth();int height = getHeight();// 防止出现 白边if (rectf.width() >= width) {if (rectf.left > 0) {dx = -rectf.left;}if (rectf.right < width) {dx = width - rectf.right;}}if (rectf.height() >= height) {if (rectf.top > 0) {dy = -rectf.top;}if (rectf.bottom < height) {dy = height - rectf.bottom;}}// 如果 宽度和高度 小于 控件宽度和高度，则让其 居中；if (rectf.width() < width) {dx = width / 2 - rectf.right + rectf.width() / 2;}if (rectf.height() < height) {dy = height / 2 - rectf.bottom + rectf.height() / 2;}matrix.postTranslate(dx, dy);}}
5.调用
<com.example.view.ZoomImageViewandroid:id="@+id/img_scale"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="matrix"android:src="@drawable/img" />
6.总结
通过 这篇课 可以学到很多 原理知识；
下篇将 分享 另一个非常完美的 图片预览 demo
