测试结果:滑动滑块,当滑块重叠在白色方块上面就验证成功;
文章图片
在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的布局文件