图片滑块验证

测试结果：滑动滑块，当滑块重叠在白色方块上面就验证成功；

在framework副模块创建一个view包，然后创建一个TouchOicVerifyView类继承自View类。

package View;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.example.framework.R;

/**
 * Created By LicaiWen
 * To DO:
 */
//绘制图片验证
public class TouchPictureVerifyView extends View {
    //验证图的背景和它的画笔
    private Bitmap bgBitmap;
    private Paint bgBitmapPaint;
    //验证图的移动方块和它的画笔
    private Bitmap mMoveBitmap;
    private Paint mMoveBitmapPaint;
    //验证图的空白块和它的画笔
    private Bitmap mNullBitmap;
    private Paint mNullBitmapPaint;
    //验证图的宽高
    private int vWidth,vHeight;
    //空白块的大小xy坐标；
    private int  mNullCard_Size;
    private int NullCardX,NullCardY;
    //移动方块的x坐标
    private int moveX=200;
    //移动方块和白方块重叠允许误差值
    private int errorValue=10;
    //监听器，用于记录图片验证的结果
    private OnViewResultListener onViewResultListener;
    //当手指在滑动块内部的时候才可以滑动
    private boolean canMove;

    public TouchPictureVerifyView(Context context) {
        super(context);
        init();
    }

    private void init() {

        bgBitmapPaint=new Paint();
       mMoveBitmapPaint=new Paint();
        mNullBitmapPaint=new Paint();

    }

    public TouchPictureVerifyView(Context context,  AttributeSet attrs) {
        super(context, attrs);
    }

    public TouchPictureVerifyView(Context context,  AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
//获取改变后的TouchPictureVerifyView组件的宽高，因为当你在布局文件使用这个组件的时候，可能会设置这个组件的宽高，所以要获取这个组件被 设置之后的宽高。
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        vHeight=h;
        vWidth=w;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBg(canvas);
        drawNullCard(canvas);
        drawMoveCard(canvas);
    }

    //绘制背景
    private void drawBg(Canvas canvas) {
//获取图片的bitmap
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.img_bg);
        //创建一个空的bitmap
        bgBitmap=Bitmap.createBitmap(vWidth,vHeight,Bitmap.Config.ARGB_8888);//这里的宽高并不等于图片的宽高
        //将图片绘制到空的bitmap中
        Canvas canvas1=new Canvas(bgBitmap);
        canvas1.drawBitmap(bitmap,null,new Rect(0,0,vWidth,vHeight),bgBitmapPaint);
        //将bitmap绘制到view上
        canvas.drawBitmap(bgBitmap,null,new Rect(0,0,vWidth,vHeight),bgBitmapPaint);
    }
//绘制移动方块
    private void drawMoveCard(Canvas canvas) {
        mMoveBitmap=Bitmap.createBitmap(bgBitmap,NullCardX,NullCardY,mNullCard_Size,mNullCard_Size);
        canvas.drawBitmap(mMoveBitmap,moveX,NullCardY,mMoveBitmapPaint);
    }

    //绘制空白块
    private void drawNullCard(Canvas canvas) {
        //获取图片
  mNullBitmap=BitmapFactory.decodeResource(getResources(),R.drawable.img_null_card);
  mNullCard_Size=(int)mNullBitmap.getWidth();
  NullCardX=(int)vWidth/3*2;
  NullCardY=(int)vHeight/2-(mNullCard_Size/2);
  //绘制在view上

  canvas.drawBitmap(mNullBitmap,NullCardX,NullCardY,mNullBitmapPaint);
    }
//给组件设置 onTouch事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //判断点击的坐标在滑动放方块的内部才能活动方块
                if(event.getX()>moveX && event.getX()<moveX+mNullCard_Size && event.getY()>NullCardY &&event.getY()<NullCardY+mNullCard_Size){
                    canMove=true;
                }
            case MotionEvent.ACTION_MOVE:
                //防止越界：
                if(canMove) {
                    if (event.getX() > 0 && event.getX() + mNullCard_Size < vWidth) {
                        moveX = (int) event.getX();
                        invalidate();
                    }
                }
                break;
                //抬起验证
            case MotionEvent.ACTION_UP:
            //当抬起手指的时候，要重新设定canMove为false，否则在第二次接触屏幕的时候没有点击滑动方块内部也能拖动方块
                canMove=false;
                if(moveX>NullCardX-errorValue &&moveX<NullCardX+errorValue){
                    if(onViewResultListener!=null){
                        onViewResultListener.onResult();
                    }
                }
        }
        return true;
    }
        //创建接口让这个组件能监听验证成功，做出反应
      public interface OnViewResultListener{
        void onResult();
    }

    public void setOnViewResultListener(OnViewResultListener onViewResultListener){
        this.onViewResultListener=onViewResultListener;
    }
  
}

创建TestActivity测试

package Test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Toast;

import com.example.meet.R;

import View.TouchPictureVerifyView;

public class TestActivity extends AppCompatActivity {
private TouchPictureVerifyView touchPic_verify;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        touchPic_verify=(TouchPictureVerifyView)findViewById(R.id.touchPic_verify);
        touchPic_verify.setOnViewResultListener(new TouchPictureVerifyView.OnViewResultListener() {
            @Override
            public void onResult() {
                Toast.makeText(TestActivity.this,"验证通过",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

TestActivity的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="Test.TestActivity">
    <View.TouchPictureVerifyView
        android:id="@+id/touchPic_verify"
        android:layout_width="match_parent"
        android:layout_height="250dp"></View.TouchPictureVerifyView>

</LinearLayout>