图片滑块验证

测试结果:滑动滑块,当滑块重叠在白色方块上面就验证成功;
图片滑块验证
文章图片

在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 intmNullCard_Size; private int NullCardX,NullCardY; //移动方块的x坐标 private int moveX=200; //移动方块和白方块重叠允许误差值 private int errorValue=https://www.it610.com/article/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()NullCardY &&event.getY() 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

创建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的布局文件

    推荐阅读