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

先看最終的效果圖：

本文只是做了個(gè)Demo，并沒(méi)有加入到實(shí)際的項(xiàng)目中，所以各位童鞋可以根據(jù)自己的需求就行修改即可。

1、定義自定義屬性； 2、確認(rèn)目標(biāo)位置，這里使用的是陰影圖片來(lái)遮蓋背景圖片； 3、創(chuàng)建與目標(biāo)位置相結(jié)合的滑塊圖片； 4、設(shè)置目標(biāo)陰影圖片和滑塊圖片可以隨機(jī)旋轉(zhuǎn),并保持一致； 5、創(chuàng)建拖拽條，使滑塊隨著拖拽條的拖拽而移動(dòng)； 6、判斷是否驗(yàn)證成功。

1、定義自定義屬性 創(chuàng)建一個(gè)attr文件來(lái)定義一些自定義屬性

<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' /> <!--是否需要旋轉(zhuǎn)--> <attr name='needRotate' format='boolean' /> <!--驗(yàn)證時(shí)的誤差值--> <attr name='deviate' format='integer' /> </declare-styleable>

2、確認(rèn)目標(biāo)位置，這里使用的是陰影圖片來(lái)遮蓋背景圖片

/** * 創(chuàng)建目標(biāo)圖片(陰影部分) */ 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); } // 如果需要旋轉(zhuǎn)圖片,進(jìn)行旋轉(zhuǎn)，旋轉(zhuǎn)后為了保持和滑塊大小一致,需要重新縮放比例 if (needRotate) { showB = handleBitmap(rotateBitmap(rotate, showB), mUintWidth, mUintHeight); } return showB; }

3、創(chuàng)建與目標(biāo)位置相結(jié)合的滑塊圖片

/** * 創(chuàng)建結(jié)滑塊圖片 * * @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); } // 如果需要旋轉(zhuǎn)圖片,進(jìn)行旋轉(zhuǎn),旋轉(zhuǎn)后為了和畫布大小保持一致,避免出現(xiàn)圖像顯示不全,需要重新縮放比例 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、設(shè)置目標(biāo)陰影圖片和滑塊圖片可以隨機(jī)旋轉(zhuǎn),并保持一致

/** * 旋轉(zhuǎn)圖片 * * @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、創(chuàng)建拖拽條，使滑塊隨著拖拽條的拖拽而移動(dòng)

//滑塊監(jiān)聽 mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int i, boolean b) {//設(shè)置滑塊移動(dòng)距離mDY.setUnitMoveDistance(mDY.getAverageDistance(seekBar.getMax()) * i); } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) {//驗(yàn)證是否拼接成功mDY.testPuzzle(); } });

6、判斷是否驗(yàn)證成功

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

1、自定義控件內(nèi)容太多這里就不放出來(lái)了，完整Demo源碼會(huì)放在文章后面；

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() { //滑塊監(jiān)聽 mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int i, boolean b) {//設(shè)置滑塊移動(dòng)距離mDY.setUnitMoveDistance(mDY.getAverageDistance(seekBar.getMax()) * i); } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) {//驗(yàn)證是否拼接成功mDY.testPuzzle(); } }); //控件監(jiān)聽 mDY.setPuzzleListener(new ImageAuthenticationView.onPuzzleListener() { @Override public void onSuccess() {//mSeekBar.setEnabled(false);//禁止滑動(dòng)Toast.makeText(MainActivity.this, '驗(yàn)證成功', Toast.LENGTH_SHORT).show(); } @Override public void onFail() {Toast.makeText(MainActivity.this, '驗(yàn)證失敗', 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.intensediesel.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>

源碼下載

到此這篇關(guān)于Android實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能的文章就介紹到這了,更多相關(guān)Android 滑塊拼圖驗(yàn)證碼內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！