如何在Android中实现一个滑块拼图验证码功能

本篇文章给大家分享的是有关如何在Android中实现一个滑块拼图验证码功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

一、实现步骤：

定义自定义属性； 2、确认目标位置，这里使用的是阴影图片来遮盖背景图片； 3、创建与目标位置相结合的滑块图片； 4、设置目标阴影图片和滑块图片可以随机旋转,并保持一致； 5、创建拖拽条，使滑块随着拖拽条的拖拽而移动； 6、判断是否验证成功。

二、实现流程：

定义自定义属性 创建一个attr文件来定义一些自定义属性

   <declare-styleable name="ImageAuthenticationView">    <!--滑块的高度-->    <attr name="unitHeight" fORMat="dimension" />    <!--滑块的宽度-->    <attr name="unitWidth" format="dimension" />    <!--滑块占图片高度的比例-->    <attr name="unitHeightScale" format="integer" />    <!--滑块占图片宽度的比例-->    <attr name="unitWidthScale" format="integer" />    <!--滑块边框的图片资源-->    <attr name="unitShadeSrc" format="reference" />    <!--阴影部分的图片资源-->    <attr name="unitShowSrc" format="reference" />    <!--是否需要旋转-->    <attr name="needRotate" format="boolean" />    <!--验证时的误差值-->    <attr name="deviate" format="integer" />  </declare-styleable>

确认目标位置，这里使用的是阴影图片来遮盖背景图片

   private Bitmap drawTargetBitmap() {    // 绘制图片    Bitmap showB;    if (null != mShowBp) {      showB = handleBitmap(mShowBp, mUintWidth, mUintHeight);    } else {      showB = handleBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.puzzle_show), mUintWidth, mUintHeight);    }    // 如果需要旋转图片,进行旋转，旋转后为了保持和滑块大小一致,需要重新缩放比例    if (needRotate) {      showB = handleBitmap(rotateBitmap(rotate, showB), mUintWidth, mUintHeight);    }    return showB;  }

创建与目标位置相结合的滑块图片

   private Bitmap drawResultBitmap(Bitmap bp) {    // 绘制图片    Bitmap shadeB;    if (null != mShadeBp) {      shadeB = handleBitmap(mShadeBp, mUintWidth, mUintHeight);    } else {      shadeB = handleBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.puzzle_shade), mUintWidth, mUintHeight);    }    // 如果需要旋转图片,进行旋转,旋转后为了和画布大小保持一致,避免出现图像显示不全,需要重新缩放比例    if (needRotate) {      shadeB = handleBitmap(rotateBitmap(rotate, shadeB), mUintWidth, mUintHeight);    }    Bitmap resultBmp = Bitmap.createBitmap(mUintWidth, mUintHeight,        Bitmap.Config.ARGB_8888);    Paint paint = new Paint();    paint.setAntiAlias(true);    canvas canvas = new Canvas(resultBmp);    canvas.drawBitmap(shadeB, new Rect(0, 0, mUintWidth, mUintHeight),        new Rect(0, 0, mUintWidth, mUintHeight), paint);    // 选择交集去上层图片    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));    canvas.drawBitmap(bp, new Rect(0, 0, mUintWidth, mUintHeight),        new Rect(0, 0, mUintWidth, mUintHeight), paint);    return resultBmp;  }

设置目标阴影图片和滑块图片可以随机旋转,并保持一致

   public Bitmap rotateBitmap(int degree, Bitmap bitmap) {    Matrix matrix = new Matrix();    matrix.postRotate(degree);    Bitmap bm = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),        bitmap.getHeight(), matrix, true);    return bm;  }

创建拖拽条，使滑块随着拖拽条的拖拽而移动

  //滑块监听    mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {      @Override      public void onProgressChanged(SeekBar seekBar, int i, boolean b) {        //设置滑块移动距离        mDY.setUnitMoveDistance(mDY.getAverageDistance(seekBar.getMax()) * i);      }      @Override      public void onStartTrackingTouch(SeekBar seekBar) {      }      @Override      public void onStopTrackingTouch(SeekBar seekBar) {        //验证是否拼接成功        mDY.testPuzzle();      }    });

判断是否验证成功

  public void testPuzzle() {    if (Math.abs(mUnitMoveDistance - mUnitRandomX) <= DEFAULT_DEVIATE) {      if (null != mlistener) {        mlistener.onSuccess();      }    } else {      if (null != mlistener) {        mlistener.onFail();      }    }  }

三、完整代码

自定义控件内容太多这里就不放出来了，完整Demo源码会放在文章后面；

代码逻辑

public class MainActivity extends Activity {  //滑块  private SeekBar mSeekBar;  //自定义的控件  private ImageAuthenticationView mDY;  private Button btn;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    initView();    initListener();  }  private void initView() {    mDY = findViewById(R.id.dy_v);    mSeekBar = findViewById(R.id.sb_dy);    btn = findViewById(R.id.btn);  }  private void initListener() {    //滑块监听    mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {      @Override      public void onProgressChanged(SeekBar seekBar, int i, boolean b) {        //设置滑块移动距离        mDY.setUnitMoveDistance(mDY.getAverageDistance(seekBar.getMax()) * i);      }      @Override      public void onStartTrackingTouch(SeekBar seekBar) {      }      @Override      public void onStopTrackingTouch(SeekBar seekBar) {        //验证是否拼接成功        mDY.testPuzzle();      }    });    //控件监听    mDY.setPuzzleListener(new ImageAuthenticationView.onPuzzleListener() {      @Override      public void onSuccess() {        //mSeekBar.setEnabled(false);//禁止滑动        Toast.makeText(MainActivity.this, "验证成功", Toast.LENGTH_SHORT).show();      }      @Override      public void onFail() {        Toast.makeText(MainActivity.this, "验证失败", Toast.LENGTH_SHORT).show();        mSeekBar.setProgress(0);      }    });    //重置    btn.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {        //mSeekBar.setEnabled(true);        mSeekBar.setProgress(0);        mDY.reSet();      }    });  }}

布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="Http://schemas.android.com/apk/res/android"  xmlns:dy="http://schemas.android.com/apk/res-auto"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:gravity="center"  android:orientation="vertical"  android:paddingLeft="10dp"  android:paddingTop="10dp"  android:paddingRight="10dp"  android:paddingBottom="10dp"  tools:context=".MainActivity">  <com.sjl.keeplive.slideImg.ImageAuthenticationView    android:id="@+id/dy_v"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:scaleType="centerCrop"    android:layout_marginBottom="10dp"    android:src="@mipmap/test"    dy:needRotate="true"    dy:unitHeight="60dp"    dy:unitShadeSrc="@mipmap/puzzle_shade"    dy:unitShowSrc="@mipmap/puzzle_show"    dy:unitWidth="80dp" />  <SeekBar    android:id="@+id/sb_dy"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/bg_seekbar"    android:max="100" />  <Button    android:id="@+id/btn"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="重置"/></LinearLayout>

以上就是如何在Android中实现一个滑块拼图验证码功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。