Android单张图片查看、单指移动、双指缩放、双击最大化或最小化

jopen 5年前

Android平台上查看单张图片时,通常情况下需要实现图片查看、单指移动、双指缩放、双击最大化或最小化功能。

目前网络上的实现方式,都没有将此功能封装为类,零落在类和xml文件中,代码难以阅读,功能难以复用。

代码如下:
package com.example.test;        import android.content.Context;    import android.graphics.Bitmap;    import android.graphics.Canvas;    import android.graphics.Matrix;    import android.graphics.PointF;    import android.graphics.drawable.BitmapDrawable;    import android.util.AttributeSet;    import android.util.FloatMath;    import android.util.Log;    import android.view.MotionEvent;    import android.widget.ImageView;        public class TouchImageView extends ImageView {            private PointF down = new PointF();        private PointF mid = new PointF();        <pre code_snippet_id="168679" snippet_file_name="blog_20140123_1_7635608" name="code" class="java"><pre code_snippet_id="168679" snippet_file_name="blog_20140123_1_7635608" name="code" class="java">  private float oldDist = 1f;        private Matrix matrix = new Matrix();        private Matrix preMatrix = new Matrix();        private Matrix savedMatrix = new Matrix();            private static final int NONE = 0;        private static final int DRAG = 1;        private static final int ZOOM = 2;        private int mode = NONE;            private boolean isBig = false;            private int widthScreen;        private int heightScreen;            private int touchImgWidth;        private int touchImgHeight;            private float defaultScale;            private long lastClickTime = 0;            private Bitmap touchImg = null;            private static final int DOUBLE_CLICK_TIME_SPACE = 300;        private static final int DOUBLE_POINT_DISTANCE = 10;        private static float MAX_SCALE = 3.0f;            public TouchImageView(Context context) {            super(context);        }            public TouchImageView(Context context, AttributeSet attrs) {            super(context, attrs);        }            public TouchImageView(Context context, AttributeSet attrs, int defStyleAttr) {            super(context, attrs, defStyleAttr);        }            public void initImageView(int screenWidth, int screenHeight) {            widthScreen = screenWidth;            heightScreen = screenHeight;                touchImg = ((BitmapDrawable) getDrawable()).getBitmap();            touchImgWidth = touchImg.getWidth();            touchImgHeight = touchImg.getHeight();            float scaleX = (float) widthScreen / touchImgWidth;            float scaleY = (float) heightScreen / touchImgHeight;            defaultScale = scaleX < scaleY ? scaleX : scaleY;                float subX = (widthScreen - touchImgWidth * defaultScale) / 2;            float subY = (heightScreen - touchImgHeight * defaultScale) / 2;            setScaleType(ScaleType.MATRIX);            preMatrix.reset();            preMatrix.postScale(defaultScale, defaultScale);            preMatrix.postTranslate(subX, subY);            matrix.set(preMatrix);            invalidate();        }            @Override        protected void onDraw(Canvas canvas) {            if (null != touchImg) {                canvas.save();                canvas.drawBitmap(touchImg, matrix, null);                canvas.restore();            }        }            @Override        public boolean onTouchEvent(MotionEvent event) {            switch (event.getAction() & MotionEvent.ACTION_MASK) {            case MotionEvent.ACTION_DOWN:                mode = DRAG;                down.x = event.getX();                down.y = event.getY();                savedMatrix.set(matrix);                    if (event.getEventTime() - lastClickTime < DOUBLE_CLICK_TIME_SPACE) {                    changeSize(event.getX(), event.getY());                }                lastClickTime = event.getEventTime();                break;            case MotionEvent.ACTION_POINTER_DOWN:                oldDist = spacing(event);                if (oldDist > DOUBLE_POINT_DISTANCE) {                    mode = ZOOM;                    // oldRotation = rotation(event);                    savedMatrix.set(matrix);                    midPoint(mid, event);                }                break;            case MotionEvent.ACTION_MOVE:                if (mode == ZOOM) {                    float newDist = spacing(event);                    float scale = newDist / oldDist;                    if (scale > 1.01 || scale < 0.99) {                        preMatrix.set(savedMatrix);                        preMatrix.postScale(scale, scale, mid.x, mid.y);// 缩放                        if (canZoom()) {                            matrix.set(preMatrix);                            invalidate();                        }                    }                } else if (mode == DRAG) {                    if (1.0f < distance(event, down)) {                        preMatrix.set(savedMatrix);                            preMatrix.postTranslate(event.getX() - down.x, 0);                        if (event.getX() > down.x) {                            if (canDrag(DRAG_RIGHT)) {                                savedMatrix.set(preMatrix);                            } else {                                preMatrix.set(savedMatrix);                            }                        } else {                            if (canDrag(DRAG_LEFT)) {                                savedMatrix.set(preMatrix);                            } else {                                preMatrix.set(savedMatrix);                            }                        }                        preMatrix.postTranslate(0, event.getY() - down.y);                        if (event.getY() > down.y) {                            if (canDrag(DRAG_DOWN)) {                                savedMatrix.set(preMatrix);                            } else {                                preMatrix.set(savedMatrix);                            }                        } else {                            if (canDrag(DRAG_TOP)) {                                savedMatrix.set(preMatrix);                            } else {                                preMatrix.set(savedMatrix);                            }                        }                            matrix.set(preMatrix);                        invalidate();                        down.x = event.getX();                        down.y = event.getY();                        savedMatrix.set(matrix);                    }                }                break;            case MotionEvent.ACTION_UP:                mode = NONE;                springback();                break;            case MotionEvent.ACTION_POINTER_UP:                mode = NONE;                break;            }            return true;        }            private void springback() {            preMatrix.set(matrix);            float[] x = new float[4];            float[] y = new float[4];            getFourPoint(x, y);            if (x[1] - x[0] > widthScreen) {                if (x[0] > 0) {                    preMatrix.postTranslate(-x[0], 0);                    matrix.set(preMatrix);                    invalidate();                } else if (x[1] < widthScreen) {                    preMatrix.postTranslate(widthScreen - x[1], 0);                    matrix.set(preMatrix);                    invalidate();                }            } else if (x[1] - x[0] < widthScreen - 1f) {                preMatrix.postTranslate((widthScreen - (x[1] - x[0])) / 2 - x[0], 0);                matrix.set(preMatrix);                invalidate();            }                if (y[2] - y[0] > heightScreen) {                if (y[0] > 0) {                    preMatrix.postTranslate(0, -y[0]);                    matrix.set(preMatrix);                    invalidate();                } else if (y[2] < heightScreen) {                    preMatrix.postTranslate(0, heightScreen - y[2]);                    matrix.set(preMatrix);                    invalidate();                }            } else if (y[2] - y[0] < heightScreen - 1f) {                preMatrix.postTranslate(0, (heightScreen - (y[2] - y[0])) / 2                        - y[0]);                matrix.set(preMatrix);                invalidate();            }        }            private void getFourPoint(float[] x, float[] y) {            float[] f = new float[9];            preMatrix.getValues(f);            // 图片4个顶点的坐标            x[0] = f[Matrix.MSCALE_X] * 0 + f[Matrix.MSKEW_X] * 0                    + f[Matrix.MTRANS_X];            y[0] = f[Matrix.MSKEW_Y] * 0 + f[Matrix.MSCALE_Y] * 0                    + f[Matrix.MTRANS_Y];            x[1] = f[Matrix.MSCALE_X] * touchImg.getWidth() + f[Matrix.MSKEW_X] * 0                    + f[Matrix.MTRANS_X];            y[1] = f[Matrix.MSKEW_Y] * touchImg.getWidth() + f[Matrix.MSCALE_Y] * 0                    + f[Matrix.MTRANS_Y];            x[2] = f[Matrix.MSCALE_X] * 0 + f[Matrix.MSKEW_X]                    * touchImg.getHeight() + f[Matrix.MTRANS_X];            y[2] = f[Matrix.MSKEW_Y] * 0 + f[Matrix.MSCALE_Y]                    * touchImg.getHeight() + f[Matrix.MTRANS_Y];            x[3] = f[Matrix.MSCALE_X] * touchImg.getWidth() + f[Matrix.MSKEW_X]                    * touchImg.getHeight() + f[Matrix.MTRANS_X];            y[3] = f[Matrix.MSKEW_Y] * touchImg.getWidth() + f[Matrix.MSCALE_Y]                    * touchImg.getHeight() + f[Matrix.MTRANS_Y];        }            private final static int DRAG_LEFT = 0;        private final static int DRAG_RIGHT = 1;        private final static int DRAG_TOP = 2;        private final static int DRAG_DOWN = 3;            private boolean canDrag(final int direction) {            float[] x = new float[4];            float[] y = new float[4];            getFourPoint(x, y);                // 出界判断            if ((x[0] > 0 || x[2] > 0 || x[1] < widthScreen || x[3] < widthScreen)                    && (y[0] > 0 || y[1] > 0 || y[2] < heightScreen || y[3] < heightScreen)) {                return false;            }            if (DRAG_LEFT == direction) {                // 左移出界判断                if (x[1] < widthScreen || x[3] < widthScreen) {                    return false;                }            } else if (DRAG_RIGHT == direction) {                // 右移出界判断                if (x[0] > 0 || x[2] > 0) {                    return false;                }            } else if (DRAG_TOP == direction) {                // 上移出界判断                if (y[2] < heightScreen || y[3] < heightScreen) {                    return false;                }            } else if (DRAG_DOWN == direction) {                // 下移出界判断                if (y[0] > 0 || y[1] > 0) {                    return false;                }            } else {                return false;            }            return true;        }            private boolean canZoom() {            float[] x = new float[4];            float[] y = new float[4];            getFourPoint(x, y);            // 图片现宽度            double width = Math.sqrt((x[0] - x[1]) * (x[0] - x[1]) + (y[0] - y[1])                    * (y[0] - y[1]));            double height = Math.sqrt((x[0] - x[2]) * (x[0] - x[2]) + (y[0] - y[2])                    * (y[0] - y[2]));            // 缩放比率判断            if (width < touchImgWidth * defaultScale - 1                    || width > touchImgWidth * MAX_SCALE + 1) {                return false;            }                // 出界判断            if (width < widthScreen && height < heightScreen) {                return false;            }            return true;        }            // 触碰两点间距离        private static float spacing(MotionEvent event) {            float x = event.getX(0) - event.getX(1);            if (x < 0) {                x = -x;            }            float y = event.getY(0) - event.getY(1);            if (y < 0) {                y = -y;            }            return FloatMath.sqrt(x * x + y * y);        }            // 取手势中心点        private static void midPoint(PointF point, MotionEvent event) {            float x = event.getX(0) + event.getX(1);            float y = event.getY(0) + event.getY(1);            point.set(x / 2, y / 2);        }            // 取两点之间的距离        private static float distance(MotionEvent point2, PointF point1) {            float x = point1.x - point2.getX();            if (x < 0) {                x = -x;            }            float y = point1.y - point2.getY();            if (y < 0) {                y = -y;            }            return FloatMath.sqrt(x * x + y * y);        }            private void changeSize(float x, float y) {            if (isBig) {                float subX = (widthScreen - touchImgWidth * defaultScale) / 2;                float subY = (heightScreen - touchImgHeight * defaultScale) / 2;                preMatrix.reset();                preMatrix.postScale(defaultScale, defaultScale);                preMatrix.postTranslate(subX, subY);                matrix.set(preMatrix);                invalidate();                    isBig = false;            } else {                float transX = (widthScreen - touchImgWidth * MAX_SCALE) / 2;                float transY = (heightScreen - touchImgHeight * MAX_SCALE) / 2;                preMatrix.reset();                preMatrix.postScale(MAX_SCALE, MAX_SCALE);                preMatrix.postTranslate(transX, transY);                matrix.set(preMatrix);                invalidate();                    isBig = true;            }        }    }    </pre>    <pre></pre>    <pre></pre>    <p></p>    <pre></pre>    <pre></pre>    <p><br>    </p>    <p><br>    </p>    <p></p>    <p>测试代码如下:</p>    <p><br>    </p>    <p>activity_main.xml文件:</p>    <p></p>    <pre code_snippet_id="168679" snippet_file_name="blog_20140123_2_8257273" name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:tools="http://schemas.android.com/tools"        android:id="@+id/layout_id"        android:layout_width="match_parent"        android:layout_height="match_parent"        tools:context=".MainActivity" >            <com.example.test.TouchImageView            android:id="@+id/img_id"            android:layout_width="400dip"            android:layout_height="800dip"            android:src="@drawable/banner"            android:scaleType="fitCenter" />        </LinearLayout>    </pre><br>    <p><br>    </p>    <p>MainActivity.java文件:</p>    <p></p>    <p></p>    <pre code_snippet_id="168679" snippet_file_name="blog_20140123_3_2367928" name="code" class="java">package com.example.test;        import android.app.Activity;    import android.os.Bundle;    import android.util.DisplayMetrics;    import android.view.Menu;    import android.view.ViewTreeObserver.OnGlobalLayoutListener;    import android.widget.LinearLayout;        public class MainActivity extends Activity {            private TouchImageView imgView;            @Override        protected void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);                DisplayMetrics dm = new DisplayMetrics();            getWindowManager().getDefaultDisplay().getMetrics(dm);                TouchImageView imgView = (TouchImageView) findViewById(R.id.img_id);            imgView.initImageView(dm.widthPixels, dm.heightPixels - 80);        }            @Override        public boolean onCreateOptionsMenu(Menu menu) {            // Inflate the menu; this adds items to the action bar if it is present.            getMenuInflater().inflate(R.menu.main, menu);            return true;        }        }