图片滑动验证Demo

首先说一下思路，首先绘制一个闭合路径来作为可移动的图片块的形状，在对应的背景图片位置绘制该路径并填充为灰色，接着在新建一个同样大小的图片，背景设为透明，以及一个对应新的Canvas，利用该路径切割Canvas，并绘制背景图片，此时该图片只有路径区域显示背景图片对应位置其他区域为透明，接着重写onDraw(),接着绘制这两张图片，并通过监听move事件移动背景透明的图片。效果如图：

下面是源码：
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
* Created by lc on 16-12-26.
*/

public class MySlideImage extends View {
private int backgroundId;//验证图片资源ID
private int drawX;//随机生成的x坐标
private int drawY;//随机生成的Y坐标
private boolean backgroundHasDraw = false;//是否时第一次绘制
private int width;//资源图片宽度
private int height;//资源图片高度
private int targetWidth;//图片块宽度
private int targetHeight;//图片块高度
private MoveFinishBack mMoveFinishBack = null;//验证完成后回调接口
private Path mPath;//图片块路径
Bitmap mBitmap;//验证图片
private float lastX = 0;//监听滑动事件上一次坐标
private int targetLength;//可移动图片块所在图片距离左边缘距离，范围为（-drawX,0)
private int moveLength = 12;//底部圆心距离左边缘距离

public MySlideImage(Context context) {    super(context);}public MySlideImage(Context context, AttributeSet attrs) {    super(context, attrs);    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MySlideImage);    backgroundId = array.getResourceId(R.styleable.MySlideImage_imageSrc, 0);    mBitmap = getBitmapById(backgroundId);    width = mBitmap.getWidth();    height = mBitmap.getHeight();    Log.d("lc", "backgroundId = " + backgroundId + "height  = " + height + " width = " + width);    array.recycle();}/*    创建可移动图块，只有路径所围成的区域可见，其他为透明 */public Bitmap createMoveDrawable() {    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//创建可移动图片    Canvas canvas = new Canvas(bitmap);    canvas.clipPath(getPath());//截取画布，目的只显示需要的图片区域    Paint paint = new Paint();    paint.setAntiAlias(true);    if (mBitmap != null) {        // canvas.drawBitmap(mBitmap, new Rect(drawX,drawY,drawX+targetWidth,drawY+targetHeight), new RectF(drawX,drawY,drawX+targetWidth,drawY+targetHeight), paint);        canvas.drawBitmap(mBitmap, 0, 0, paint);    } else {        Log.d("lc", "createTargetDrawable ：bitmap is null");    }    return bitmap;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    setMeasuredDimension(width, height + 30);}/*    创建底部背景 */public void createTargetDrawable(Canvas canvas) {    Paint paint = new Paint();    paint.setColor(Color.GRAY);    paint.setAntiAlias(true);    paint.setStyle(Paint.Style.FILL_AND_STROKE);    if (mBitmap != null) {        canvas.drawBitmap(mBitmap, 0, 0, paint);    } else {        Log.d("lc", "createTargetDrawable ：bitmap is null");    }    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));    paint.setColor(Color.GREEN);    canvas.drawPath(getPath(), paint);    backgroundHasDraw = true;}public void getRandomXY() {    double random = Math.random();    random = random > (5 * 1.00 / 6) ? (5 * 1.00 / 6) : (random > 1.00 / 6 ? random : 1.00 / 6);    Log.d("lc", " random = " + random);    drawX = (int) (width * random);    drawY = (int) (height * random);    Log.d("lc", " drawX = " + drawX + " drawY = " + drawY);    targetHeight = height / 6;    targetWidth = width / 6;    Log.d("lc", " targetHeight = " + targetHeight + " targetWidth = " + targetWidth);}@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    Paint paint = new Paint();    paint.setAntiAlias(true);    if (!backgroundHasDraw) {        getRandomXY();        targetLength = -drawX;        moveLength = 12;    }    drawSeekBar(canvas, paint);    createTargetDrawable(canvas);    canvas.drawBitmap(createMoveDrawable(), targetLength, 0, paint);    drawSeekButton(canvas, paint);}public Bitmap getBitmapById(int resourceId) {    return BitmapFactory.decodeResource(getContext().getResources(), resourceId);}public Path getPath() {    if (mPath == null) {        mPath = new Path();        mPath.moveTo(drawX, drawY);        mPath.lineTo(drawX + 10, drawY);        mPath.lineTo(drawX + 10, drawY + 15);        mPath.lineTo(drawX + targetWidth, drawY + 15);        mPath.lineTo(drawX + targetWidth, drawY + targetHeight);        mPath.lineTo(drawX, drawY + targetHeight);        mPath.lineTo(drawX, drawY);    }    return mPath;}/*    绘制底部绿色bar */public void drawSeekBar(Canvas canvas, Paint paint) {    paint.setColor(Color.GREEN);    paint.setStyle(Paint.Style.FILL_AND_STROKE);    canvas.drawRoundRect(new RectF(5, height + 10, width - 5, height + 20), 0.5f, 0.5f, paint);}/*    绘制底部红色圆 */public void drawSeekButton(Canvas canvas, Paint paint) {    paint.setColor(Color.RED);    paint.setStyle(Paint.Style.FILL_AND_STROKE);    canvas.drawCircle(moveLength, height + 12, 12, paint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {    int action = event.getAction();    switch (action) {        case MotionEvent.ACTION_DOWN:            lastX = event.getX();            Log.d("lc", "action down");            break;        case MotionEvent.ACTION_MOVE:            float currentX = event.getX();            int length = (int) (currentX - lastX);            Log.d("lc", "action move  length = " + length);            moveLength = Math.max(12, Math.min(width - 12, moveLength + length));            targetLength = Math.max(-drawX, Math.min(width - targetWidth, targetLength + length));            invalidate();            lastX = currentX;            break;        case MotionEvent.ACTION_UP:            boolean finished = false;            if (Math.abs(targetLength) < 6) {                finished = true;                Log.d("lc", " action up " + finished);                targetLength = 0;                postInvalidateDelayed(300);            } else {                Log.d("lc", " action up " + finished);                moveLength = 12;                targetLength = -drawX;                postInvalidateDelayed(300);            }            if (mMoveFinishBack != null) {                if (finished) {                    mMoveFinishBack.MoveFinish(true);                } else {                    mMoveFinishBack.MoveFinish(false);                }            }            break;    }    return true;}public void setCallBack(MoveFinishBack moveFinishBack) {    this.mMoveFinishBack = moveFinishBack;}/*    自定义路径以及设置图片块宽高 */public void setPathAndRect(Path path,int height,int width) {    mPath = path;    targetWidth = width;    targetHeight = height;}/*    刷新图片 */public void refreshImage(){    backgroundHasDraw = false;    mPath = null;    invalidate();}interface MoveFinishBack {    void MoveFinish(boolean correct);}}说明：    1.上面代码中未对图片大小进行判断，所以测试大的图片时需要先对其进行尺寸压缩。    2.图片块的位置采用随机值    3.上例中图片的资源Id是通过自定义属性获得    4.部分手机(图片块只显示为一个矩形)需要在清单文件中关闭硬件加速才能看到完整效果