Android實現滑塊拼圖驗證碼功能

滑塊拼圖驗證碼應該算是很常見的功能了，驗證碼是可以區分用戶是人還是機器?？梢苑乐蛊平饷艽a、刷票等惡意行為。本文將介紹Android拼圖滑塊驗證碼控件的實現過程。希望能幫助到大家。

先看最終的效果圖：

本文只是做了個Demo，并沒有加入到實際的項目中，所以各位童鞋可以根據自己的需求就行修改即可。

1、定義自定義屬性； 2、確認目標位置，這里使用的是陰影圖片來遮蓋背景圖片； 3、創建與目標位置相結合的滑塊圖片； 4、設置目標陰影圖片和滑塊圖片可以隨機旋轉,并保持一致； 5、創建拖拽條，使滑塊隨著拖拽條的拖拽而移動； 6、判斷是否驗證成功。

1、定義自定義屬性 創建一個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>

2、確認目標位置，這里使用的是陰影圖片來遮蓋背景圖片

/** * 創建目標圖片(陰影部分) */ 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; }

3、創建與目標位置相結合的滑塊圖片

/** * 創建結滑塊圖片 * * @param bp */ 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; }

4、設置目標陰影圖片和滑塊圖片可以隨機旋轉,并保持一致

/** * 旋轉圖片 * * @param degree * @param bitmap * @return */ 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; }

5、創建拖拽條，使滑塊隨著拖拽條的拖拽而移動

//滑塊監聽 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(); } });

6、判斷是否驗證成功

/** * 驗證是否拼接成功 */ public void testPuzzle() { if (Math.abs(mUnitMoveDistance - mUnitRandomX) <= DEFAULT_DEVIATE) { if (null != mlistener) {mlistener.onSuccess(); } } else { if (null != mlistener) {mlistener.onFail(); } } }三、完整代碼

1、自定義控件內容太多這里就不放出來了，完整Demo源碼會放在文章后面；

2、代碼邏輯

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(); } }); }}

3、布局文件

<?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: android:layout_width='match_parent' android:layout_height='wrap_content' android:scaleType='centerCrop' android:layout_marginBottom='10dp' android:src='http://www.wxshucaidpc.com/bcjs/@mipmap/test' dy:needRotate='true' dy:unitHeight='60dp' dy:unitShadeSrc='@mipmap/puzzle_shade' dy:unitShowSrc='@mipmap/puzzle_show' dy:unitWidth='80dp' /> <SeekBar android: android:layout_width='match_parent' android:layout_height='wrap_content' android:background='@drawable/bg_seekbar' android:max='100' /> <Button android: android:layout_width='wrap_content' android:layout_height='wrap_content' android:text='重置'/></LinearLayout>

源碼下載

到此這篇關于Android實現滑塊拼圖驗證碼功能的文章就介紹到這了,更多相關Android 滑塊拼圖驗證碼內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！