可缩放性ImageView(可以放大缩小)

由于项目需求的原因,最近一直在研究可缩放性ImageView,用本文来记录一下最近所学:

该ImageView的实现功能有:

1)初步打开时,图片按比例满屏(填充ImageView)显示。

2)在放大缩小过程中,可以控制最大放大比例和最小缩小比例。

3)在缩放过程中,若图片的宽或高小于ImageView,则在图片在宽或高居中显示。

4)在放大后,可以移动图片,并且限制好移动的边界,不会超出图片。

5)实现双击放大或缩小的功能。(若当前图片显示为最大的比例则缩小为最小比例,若不是最小比例则放大了最大比例)

在讲代码之前,首先应该说说一个类,Matrix。因为我们在处理图片的过程中,需要图片的位移,缩放等等,而Matrix刚好就是帮我们封装好了这些数据,具体的,大家可以看看这篇文章:android 从matrix获取处理过的图片的实际宽度重点是了解Matrix里面数组的含义。

上代码,具体的说明代码都有一一介绍:

MyZoomImageView.java文件:

[java]  view plain  copy
  1. package com.xiaoyan.doubletouch;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Matrix;  
  5. import android.graphics.PointF;  
  6. import android.graphics.drawable.Drawable;  
  7. import android.util.AttributeSet;  
  8. import android.util.FloatMath;  
  9. import android.view.MotionEvent;  
  10. import android.view.View;  
  11. import android.view.ViewTreeObserver;  
  12. import android.view.ViewTreeObserver.OnGlobalLayoutListener;  
  13. import android.widget.ImageView;  
  14.   
  15. /** 
  16.  * 缩放ImageView 
  17.  *  
  18.  * @author xiejinxiong 
  19.  *  
  20.  */  
  21. public class MyZoomImageView extends ImageView {  
  22.   
  23.     /** ImageView高度 */  
  24.     private int imgHeight;  
  25.     /** ImageView宽度 */  
  26.     private int imgWidth;  
  27.     /** 图片高度 */  
  28.     private int intrinsicHeight;  
  29.     /** 图片宽度 */  
  30.     private int intrinsicWidth;  
  31.     /** 最大缩放级别 */  
  32.     private float mMaxScale = 2.0f;  
  33.     /** 最小缩放级别 */  
  34.     private float mMinScale = 0.2f;  
  35.     /** 用于记录拖拉图片移动的坐标位置 */  
  36.     private Matrix matrix = new Matrix();  
  37.     /** 用于记录图片要进行拖拉时候的坐标位置 */  
  38.     private Matrix currentMatrix = new Matrix();  
  39.     /** 记录第一次点击的时间 */  
  40.     private long firstTouchTime = 0;  
  41.     /** 时间点击的间隔 */  
  42.     private int intervalTime = 250;  
  43.     /** 第一次点完坐标 */  
  44.     private PointF firstPointF;  
  45.   
  46.     public MyZoomImageView(Context context) {  
  47.         super(context);  
  48.         initUI();  
  49.     }  
  50.   
  51.     public MyZoomImageView(Context context, AttributeSet attrs) {  
  52.         super(context, attrs);  
  53.         initUI();  
  54.     }  
  55.   
  56.     public MyZoomImageView(Context context, AttributeSet attrs, int defStyle) {  
  57.         super(context, attrs, defStyle);  
  58.         // TODO Auto-generated constructor stub  
  59.         initUI();  
  60.     }  
  61.   
  62.     /** 
  63.      * 初始化UI 
  64.      */  
  65.     private void initUI() {  
  66.   
  67.         this.setScaleType(ScaleType.FIT_CENTER);  
  68.         this.setOnTouchListener(new TouchListener());  
  69.   
  70.         getImageViewWidthHeight();  
  71.         getIntrinsicWidthHeight();  
  72.     }  
  73.   
  74.     /** 
  75.      * 获得图片内在宽高 
  76.      */  
  77.     private void getIntrinsicWidthHeight() {  
  78.         Drawable drawable = this.getDrawable();  
  79.   
  80.         // 初始化bitmap的宽高  
  81.         intrinsicHeight = drawable.getIntrinsicHeight();  
  82.         intrinsicWidth = drawable.getIntrinsicWidth();  
  83.     }  
  84.   
  85.     private final class TouchListener implements OnTouchListener {  
  86.   
  87.         /** 记录是拖拉照片模式还是放大缩小照片模式 */  
  88.         private int mode = 0;// 初始状态  
  89.         /** 拖拉照片模式 */  
  90.         private static final int MODE_DRAG = 1;  
  91.         /** 放大缩小照片模式 */  
  92.         private static final int MODE_ZOOM = 2;  
  93.         /** 用于记录开始时候的坐标位置 */  
  94.         private PointF startPoint = new PointF();  
  95.         /** 两个手指的开始距离 */  
  96.         private float startDis;  
  97.         /** 两个手指的中间点 */  
  98.         private PointF midPoint;  
  99.   
  100.         public boolean onTouch(View v, MotionEvent event) {  
  101.   
  102.             /** 通过与运算保留最后八位 MotionEvent.ACTION_MASK = 255 */  
  103.             switch (event.getAction() & MotionEvent.ACTION_MASK) {// 单点监听和多点触碰监听  
  104.             // 手指压下屏幕  
  105.             case MotionEvent.ACTION_DOWN:  
  106.                 mode = MODE_DRAG;  
  107.                 // 记录ImageView当前的移动位置  
  108.                 currentMatrix.set(getImageMatrix());  
  109.                 startPoint.set(event.getX(), event.getY());  
  110.                 matrix.set(currentMatrix);  
  111.                 makeImageViewFit();  
  112.                 break;  
  113.             // 手指在屏幕上移动,改事件会被不断触发  
  114.             case MotionEvent.ACTION_MOVE:  
  115.                 // 拖拉图片  
  116.                 if (mode == MODE_DRAG) {  
  117.                     // System.out.println("ACTION_MOVE_____MODE_DRAG");  
  118.                     float dx = event.getX() - startPoint.x; // 得到x轴的移动距离  
  119.                     float dy = event.getY() - startPoint.y; // 得到x轴的移动距离  
  120.                     // 在没有移动之前的位置上进行移动z  
  121.                     matrix.set(currentMatrix);  
  122.                     float[] values = new float[9];  
  123.                     matrix.getValues(values);  
  124.                     dx = checkDxBound(values, dx);  
  125.                     dy = checkDyBound(values, dy);  
  126.                     matrix.postTranslate(dx, dy);  
  127.   
  128.                 }  
  129.                 // 放大缩小图片  
  130.                 else if (mode == MODE_ZOOM) {  
  131.                     float endDis = distance(event);// 结束距离  
  132.                     if (endDis > 10f) { // 两个手指并拢在一起的时候像素大于10  
  133.                         float scale = endDis / startDis;// 得到缩放倍数  
  134.                         matrix.set(currentMatrix);  
  135.   
  136.                         float[] values = new float[9];  
  137.                         matrix.getValues(values);  
  138.   
  139.                         scale = checkFitScale(scale, values);  
  140.   
  141.                         matrix.postScale(scale, scale, midPoint.x, midPoint.y);  
  142.   
  143.                     }  
  144.                 }  
  145.                 break;  
  146.             // 手指离开屏幕  
  147.             case MotionEvent.ACTION_UP:  
  148.                 setDoubleTouchEvent(event);  
  149.   
  150.             case MotionEvent.ACTION_POINTER_UP:  
  151.                 // System.out.println("ACTION_POINTER_UP");  
  152.                 mode = 0;  
  153.                 // matrix.set(currentMatrix);  
  154.                 float[] values = new float[9];  
  155.                 matrix.getValues(values);  
  156.                 makeImgCenter(values);  
  157.                 break;  
  158.             // 当屏幕上已经有触点(手指),再有一个触点压下屏幕  
  159.             case MotionEvent.ACTION_POINTER_DOWN:  
  160.                 // System.out.println("ACTION_POINTER_DOWN");  
  161.                 mode = MODE_ZOOM;  
  162.                 /** 计算两个手指间的距离 */  
  163.                 startDis = distance(event);  
  164.                 /** 计算两个手指间的中间点 */  
  165.                 if (startDis > 10f) { // 两个手指并拢在一起的时候像素大于10  
  166.                     midPoint = mid(event);  
  167.                     // 记录当前ImageView的缩放倍数  
  168.                     currentMatrix.set(getImageMatrix());  
  169.                 }  
  170.                 break;  
  171.             }  
  172.             setImageMatrix(matrix);  
  173.             return true;  
  174.         }  
  175.   
  176.         /** 计算两个手指间的距离 */  
  177.         private float distance(MotionEvent event) {  
  178.             float dx = event.getX(1) - event.getX(0);  
  179.             float dy = event.getY(1) - event.getY(0);  
  180.             /** 使用勾股定理返回两点之间的距离 */  
  181.             return FloatMath.sqrt(dx * dx + dy * dy);  
  182.         }  
  183.   
  184.         /** 计算两个手指间的中间点 */  
  185.         private PointF mid(MotionEvent event) {  
  186.             float midX = (event.getX(1) + event.getX(0)) / 2;  
  187.             float midY = (event.getY(1) + event.getY(0)) / 2;  
  188.             return new PointF(midX, midY);  
  189.         }  
  190.   
  191.         /** 
  192.          * 和当前矩阵对比,检验dy,使图像移动后不会超出ImageView边界 
  193.          *  
  194.          * @param values 
  195.          * @param dy 
  196.          * @return 
  197.          */  
  198.         private float checkDyBound(float[] values, float dy) {  
  199.   
  200.             float height = imgHeight;  
  201.             if (intrinsicHeight * values[Matrix.MSCALE_Y] < height)  
  202.                 return 0;  
  203.             if (values[Matrix.MTRANS_Y] + dy > 0)  
  204.                 dy = -values[Matrix.MTRANS_Y];  
  205.             else if (values[Matrix.MTRANS_Y] + dy < -(intrinsicHeight  
  206.                     * values[Matrix.MSCALE_Y] - height))  
  207.                 dy = -(intrinsicHeight * values[Matrix.MSCALE_Y] - height)  
  208.                         - values[Matrix.MTRANS_Y];  
  209.             return dy;  
  210.         }  
  211.   
  212.         /** 
  213.          * 和当前矩阵对比,检验dx,使图像移动后不会超出ImageView边界 
  214.          *  
  215.          * @param values 
  216.          * @param dx 
  217.          * @return 
  218.          */  
  219.         private float checkDxBound(float[] values, float dx) {  
  220.   
  221.             float width = imgWidth;  
  222.             if (intrinsicWidth * values[Matrix.MSCALE_X] < width)  
  223.                 return 0;  
  224.             if (values[Matrix.MTRANS_X] + dx > 0)  
  225.                 dx = -values[Matrix.MTRANS_X];  
  226.             else if (values[Matrix.MTRANS_X] + dx < -(intrinsicWidth  
  227.                     * values[Matrix.MSCALE_X] - width))  
  228.                 dx = -(intrinsicWidth * values[Matrix.MSCALE_X] - width)  
  229.                         - values[Matrix.MTRANS_X];  
  230.             return dx;  
  231.         }  
  232.   
  233.         /** 
  234.          * MSCALE用于处理缩放变换 
  235.          *  
  236.          *  
  237.          * MSKEW用于处理错切变换 
  238.          *  
  239.          *  
  240.          * MTRANS用于处理平移变换 
  241.          */  
  242.   
  243.         /** 
  244.          * 检验scale,使图像缩放后不会超出最大倍数 
  245.          *  
  246.          * @param scale 
  247.          * @param values 
  248.          * @return 
  249.          */  
  250.         private float checkFitScale(float scale, float[] values) {  
  251.             if (scale * values[Matrix.MSCALE_X] > mMaxScale)  
  252.                 scale = mMaxScale / values[Matrix.MSCALE_X];  
  253.             if (scale * values[Matrix.MSCALE_X] < mMinScale)  
  254.                 scale = mMinScale / values[Matrix.MSCALE_X];  
  255.             return scale;  
  256.         }  
  257.   
  258.         /** 
  259.          * 促使图片居中 
  260.          *  
  261.          * @param values 
  262.          *            (包含着图片变化信息) 
  263.          */  
  264.         private void makeImgCenter(float[] values) {  
  265.   
  266.             // 缩放后图片的宽高  
  267.             float zoomY = intrinsicHeight * values[Matrix.MSCALE_Y];  
  268.             float zoomX = intrinsicWidth * values[Matrix.MSCALE_X];  
  269.             // 图片左上角Y坐标  
  270.             float leftY = values[Matrix.MTRANS_Y];  
  271.             // 图片左上角X坐标  
  272.             float leftX = values[Matrix.MTRANS_X];  
  273.             // 图片右下角Y坐标  
  274.             float rightY = leftY + zoomY;  
  275.             // 图片右下角X坐标  
  276.             float rightX = leftX + zoomX;  
  277.   
  278.             // 使图片垂直居中  
  279.             if (zoomY < imgHeight) {  
  280.                 float marY = (imgHeight - zoomY) / 2.0f;  
  281.                 matrix.postTranslate(0, marY - leftY);  
  282.             }  
  283.   
  284.             // 使图片水平居中  
  285.             if (zoomX < imgWidth) {  
  286.   
  287.                 float marX = (imgWidth - zoomX) / 2.0f;  
  288.                 matrix.postTranslate(marX - leftX, 0);  
  289.   
  290.             }  
  291.   
  292.             // 使图片缩放后上下不留白(即当缩放后图片的大小大于imageView的大小,但是上面或下面留出一点空白的话,将图片移动占满空白处)  
  293.             if (zoomY >= imgHeight) {  
  294.                 if (leftY > 0) {// 判断图片上面留白  
  295.                     matrix.postTranslate(0, -leftY);  
  296.                 }  
  297.                 if (rightY < imgHeight) {// 判断图片下面留白  
  298.                     matrix.postTranslate(0, imgHeight - rightY);  
  299.                 }  
  300.             }  
  301.   
  302.             // 使图片缩放后左右不留白  
  303.             if (zoomX >= imgWidth) {  
  304.                 if (leftX > 0) {// 判断图片左边留白  
  305.                     matrix.postTranslate(-leftX, 0);  
  306.                 }  
  307.                 if (rightX < imgWidth) {// 判断图片右边不留白  
  308.                     matrix.postTranslate(imgWidth - rightX, 0);  
  309.                 }  
  310.             }  
  311.         }  
  312.   
  313.     }  
  314.   
  315.     /** 
  316.      * 获取ImageView的宽高 
  317.      */  
  318.     private void getImageViewWidthHeight() {  
  319.         ViewTreeObserver vto2 = getViewTreeObserver();  
  320.         vto2.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {  
  321.             @SuppressWarnings("deprecation")  
  322.             public void onGlobalLayout() {  
  323.                 getViewTreeObserver().removeGlobalOnLayoutListener(this);  
  324.                 imgWidth = getWidth();  
  325.                 imgHeight = getHeight();  
  326.   
  327.             }  
  328.         });  
  329.     }  
  330.   
  331.     /** 
  332.      * 使得ImageView一开始便显示最适合的宽高比例,便是刚好容下的样子 
  333.      */  
  334.     private void makeImageViewFit() {  
  335.         if (getScaleType() != ScaleType.MATRIX) {  
  336.             setScaleType(ScaleType.MATRIX);  
  337.   
  338.             matrix.postScale(1.0f, 1.0f, imgWidth / 2, imgHeight / 2);  
  339.         }  
  340.     }  
  341.   
  342.     /** 
  343.      * 双击事件触发 
  344.      *  
  345.      * @param values 
  346.      */  
  347.     private void setDoubleTouchEvent(MotionEvent event) {  
  348.   
  349.         float values[] = new float[9];  
  350.         matrix.getValues(values);  
  351.         // 存储当前时间  
  352.         long currentTime = System.currentTimeMillis();  
  353.         // 判断两次点击间距时间是否符合  
  354.         if (currentTime - firstTouchTime >= intervalTime) {  
  355.             firstTouchTime = currentTime;  
  356.             firstPointF = new PointF(event.getX(), event.getY());  
  357.         } else {  
  358.             // 判断两次点击之间的距离是否小于30f  
  359.             if (Math.abs(event.getX() - firstPointF.x) < 30f  
  360.                     && Math.abs(event.getY() - firstPointF.y) < 30f) {  
  361.                 // 判断当前缩放比例与最大最小的比例  
  362.                 if (values[Matrix.MSCALE_X] < mMaxScale) {  
  363.                     matrix.postScale(mMaxScale / values[Matrix.MSCALE_X],  
  364.                             mMaxScale / values[Matrix.MSCALE_X], event.getX(),  
  365.                             event.getY());  
  366.                 } else {  
  367.                     matrix.postScale(mMinScale / values[Matrix.MSCALE_X],  
  368.                             mMinScale / values[Matrix.MSCALE_X], event.getX(),  
  369.                             event.getY());  
  370.                 }  
  371.             }  
  372.   
  373.         }  
  374.     }  
  375.   
  376.     /** 
  377.      * 设置图片的最大和最小的缩放比例 
  378.      *  
  379.      * @param mMaxScale 
  380.      * @param mMinScale 
  381.      */  
  382.     public void setPicZoomHeightWidth(float mMaxScale, float mMinScale) {  
  383.         this.mMaxScale = mMaxScale;  
  384.         this.mMinScale = mMinScale;  
  385.     }  
  386.   
  387. }  
xml文件:

[html]  view plain  copy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.      xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context="com.xiaoyan.doubletouch.MainActivity" >  
  6.   
  7.     <com.xiaoyan.doubletouch.MyZoomImageView  
  8.         android:id="@+id/imageView"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent"  
  11.         android:src="@drawable/a" />  
  12.   
  13. RelativeLayout>  

具体实现效果:

最初显示:

可缩放性ImageView(可以放大缩小)_第1张图片

放大显示:

可缩放性ImageView(可以放大缩小)_第2张图片

你可能感兴趣的:(可缩放性ImageView(可以放大缩小))