自定义ImageView

继续坚持写博客，懒毛病尽快改掉。今天写了一个图片查看控件。初步功能具有移动，缩放效果。并且限制了移动的范围，使它不能完全移出边界。放大倍数限制默认给了4，有特别需要的同学可以自己修改，给个自定义参数来设置。双击图片能还原回初始大小和中间对齐的状态。效果图如下：

上面是初始中间对齐状态。

这个是移动状态

这个是缩放状态。

好了，下面贴上代码：

package com.example.huangyi.test.widge;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.PointF;import android.graphics.RectF;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.support.annotation.Nullable;import android.support.v4.view.GestureDetectorCompat;import android.util.AttributeSet;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;import com.example.huangyi.test.R;/** * Created by huangyi on 17-5-25. */public class ZoomImageView extends View {    private static final int DEF_SIZE = 200;    private static final float MAX_MULTIPLE = 4; //允许放大的最大倍数    private static final float SIZDE_PADDING = 50; //最大剩余的值，不让全移除边界    private Bitmap mBitmap;    private Paint mPaint;    private Matrix mMatrix;         //用于对图片进行变换的矩阵    private RectF originalRect;     //图片初始时边框所对应的矩形    private RectF translateRect;    //变换后图片边框所对应的矩形    private int pointer = 0;        //触摸点个数    private PointF lastP = new PointF();    //在移动图片中，记录上一次的触摸点    private int lastPId = -1;   //在移动图片中，上次触摸点的id，避免多根手指触摸，然后第一根抬起后造成图片跳动    private float lastDistance = -1;     //缩放图片时，上一次两个手指的距离.    private GestureDetectorCompat gestureDetector;    public ZoomImageView(Context context) {        super(context);        init(context,null);    }    public ZoomImageView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init(context, attrs);    }    public ZoomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context,attrs);    }    private void init(Context context, AttributeSet attrs){        if(attrs != null){            TypedArray ta = context.getResources().obtainAttributes(attrs, R.styleable.ZoomImageView);            Drawable image = ta.getDrawable(R.styleable.ZoomImageView_ximage);            mBitmap = drawable2Bitmap(image);            ta.recycle();        }        mPaint = new Paint();        mPaint.setAntiAlias(true);        mMatrix = new Matrix();        translateRect = new RectF(0,0,mBitmap.getWidth(),mBitmap.getHeight());        originalRect = new RectF(translateRect);        ZoomGestureListener zoomGestureListener = new ZoomGestureListener();        gestureDetector = new GestureDetectorCompat(getContext(),zoomGestureListener);        gestureDetector.setOnDoubleTapListener(zoomGestureListener);    }    //双击就使图片恢复初始中心对齐状态    class ZoomGestureListener extends GestureDetector.SimpleOnGestureListener{        @Override        public boolean onDoubleTap(MotionEvent e) {            mMatrix.reset();                                            //让图片初始的时候与空间中心对齐            mMatrix.postTranslate(getWidth()/2-mBitmap.getWidth()/2,getHeight()/2-mBitmap.getHeight()/2);            mMatrix.mapRect(translateRect);            postInvalidate();            return true;        }    }    /**     * 把drawable转化为bitmap     * @param d     * @return     */    private Bitmap drawable2Bitmap(Drawable d){        if(d instanceof BitmapDrawable){            return ((BitmapDrawable) d).getBitmap();        }else{            Bitmap b = Bitmap.createBitmap(d.getIntrinsicWidth(),d.getIntrinsicHeight(),Bitmap.Config.ARGB_8888);            Canvas c = new Canvas(b);            d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());            d.draw(c);            return b;        }    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int wSize = MeasureSpec.getSize(widthMeasureSpec);        int hSize = MeasureSpec.getSize(heightMeasureSpec);        int wMode = MeasureSpec.getMode(widthMeasureSpec);        int hMode = MeasureSpec.getMode(heightMeasureSpec);        //在wrap_content的时候就给一个默认的尺寸        if(wMode == MeasureSpec.AT_MOST){            wSize = Math.min(wSize,DEF_SIZE);        }        if(hMode == MeasureSpec.AT_MOST){            hSize = Math.min(hSize,DEF_SIZE);        }        setMeasuredDimension(MeasureSpec.makeMeasureSpec(wSize,wMode),                MeasureSpec.makeMeasureSpec(hSize,hMode));        mMatrix.reset();                                            //让图片初始的时候与空间中心对齐        mMatrix.postTranslate(wSize/2-mBitmap.getWidth()/2,hSize/2-mBitmap.getHeight()/2);        mMatrix.mapRect(translateRect);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawBitmap(mBitmap,mMatrix,mPaint);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        gestureDetector.onTouchEvent(event);        switch (event.getActionMasked()){            case MotionEvent.ACTION_DOWN:                if(isTouchOnBitmap(event,translateRect)){       //第一个触摸点在图片上才能进行操作                    pointer = 1;                    lastP.set(event.getX(),event.getY());                    lastPId = event.getPointerId(0);                    return true;                }else {                    return false;                }            case MotionEvent.ACTION_POINTER_DOWN:                pointer +=1;                lastDistance = (float) getDistance(event.getX(0),event.getY(0),event.getX(1),event.getY(1));                break;            case MotionEvent.ACTION_MOVE:                if(pointer == 1  && event.getPointerId(0) == lastPId){       //只有一根手指时就是移动                    moveBitmap(event);                }else if(pointer >= 2){ //两根手指就是放大缩小                    scaleBitmap(event);                }                lastP.set(event.getX(),event.getY());                break;            case MotionEvent.ACTION_POINTER_UP:                pointer -=1;                if(event.getPointerId(0) != lastPId){   //松开了最先按下的那个手指，就要更新第一个点的信息，避免跳动                    lastP.set(event.getX(),event.getY());                    lastPId = event.getPointerId(0);                }                break;            case MotionEvent.ACTION_UP:                pointer = 0;                lastDistance = -1;                break;        }        return super.onTouchEvent(event);    }    /**     * 触摸点是否在图片上，只有触摸点在图片上才能移动图片     * @param event     * @param rectF     * @return     */    private boolean isTouchOnBitmap(MotionEvent event,RectF rectF){        return rectF.contains(event.getX(),event.getY());    }    /**     * 单根手指时移动图片     * @param event     */    private void moveBitmap(MotionEvent event){        float disX = event.getX()-lastP.x;        float disY = event.getY()-lastP.y;        if(translateRect.top + disY > getHeight() - SIZDE_PADDING ||            //边界检测，不让全移出边界外                translateRect.bottom + disY < SIZDE_PADDING ||                translateRect.left + disX > getWidth() - SIZDE_PADDING ||                translateRect.right +disX < SIZDE_PADDING){            return;        }        mMatrix.postTranslate(disX,disY);        mMatrix.mapRect(translateRect,originalRect);        //更新translateRect,代表了变换后的图片的位置        postInvalidate();    }    /**     * 两根手指时放大缩小图片     * @param event     */    private void scaleBitmap(MotionEvent event){        float curDis = (float) getDistance(event.getX(0),event.getY(0),event.getX(1),event.getY(1));        if(lastDistance == -1){            lastDistance = curDis;        }        float scale = curDis/lastDistance;        if(translateRect.width()/originalRect.width()*scale > MAX_MULTIPLE){    //倍数不能大于MAX_MULTIPLE            return;        }        lastDistance = curDis;        PointF centerP = getCenter(event.getX(0),event.getY(0),event.getX(1),event.getY(1));        mMatrix.postScale(scale,scale,centerP.x,centerP.y);        mMatrix.mapRect(translateRect,originalRect);                //更新translateRect,代表了变换后的图片的位置        postInvalidate();    }    /**     * 获得两点的距离     * @param x1     * @param y1     * @param x2     * @param y2     * @return     */    private double getDistance(float x1,float y1,float x2,float y2){        return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2))   ;    }    /**     * 获得两点的中心点     * @param x1     * @param y1     * @param x2     * @param y2     * @return     */    private PointF getCenter(float x1,float y1,float x2,float y2){        return new PointF((x1+x2)/2.0f,(y1+y2)/2.0f);    }}

下面是自定义参数，只写了一个。同学们可以根据需要自己写更多的定制项。

    <declare-styleable name="ZoomImageView">        <attr name="ximage" format="reference"></attr>    </declare-styleable>

布局文件：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.huangyi.test.MainActivity">    <com.example.huangyi.test.widge.ZoomImageView        android:id="@+id/zoom"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center"        app:ximage="@drawable/carton"/></FrameLayout>

整个代码主要就是围绕对Metrix的操作变换和多点触摸的编写。