Android實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能
更新時(shí)間：2021年02月23日 09:35:36 作者：longxuanzhigu
這篇文章主要介紹了Android實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
滑塊拼圖驗(yàn)證碼應(yīng)該算是很常見的功能了，驗(yàn)證碼是可以區(qū)分用戶是人還是機(jī)器?？梢苑乐蛊平饷艽a、刷票等惡意行為。本文將介紹Android拼圖滑塊驗(yàn)證碼控件的實(shí)現(xiàn)過程。希望能幫助到大家。
先看最終的效果圖：
本文只是做了個(gè)Demo，并沒有加入到實(shí)際的項(xiàng)目中，所以各位童鞋可以根據(jù)自己的需求就行修改即可。
一、實(shí)現(xiàn)步驟：
1、定義自定義屬性； 2、確認(rèn)目標(biāo)位置，這里使用的是陰影圖片來遮蓋背景圖片； 3、創(chuàng)建與目標(biāo)位置相結(jié)合的滑塊圖片； 4、設(shè)置目標(biāo)陰影圖片和滑塊圖片可以隨機(jī)旋轉(zhuǎn),并保持一致； 5、創(chuàng)建拖拽條，使滑塊隨著拖拽條的拖拽而移動(dòng)； 6、判斷是否驗(yàn)證成功。
二、實(shí)現(xiàn)流程：
1、定義自定義屬性 創(chuàng)建一個(gè)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" />
<!--是否需要旋轉(zhuǎn)-->
<attr name="needRotate" format="boolean" />
<!--驗(yàn)證時(shí)的誤差值-->
<attr name="deviate" format="integer" />
</declare-styleable>
2、確認(rèn)目標(biāo)位置，這里使用的是陰影圖片來遮蓋背景圖片
/**
* 創(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)容太多這里就不放出來了，完整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: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>
到此這篇關(guān)于Android實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能的文章就介紹到這了,更多相關(guān)Android 滑塊拼圖驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Android實(shí)現(xiàn)拼圖小游戲
- 基于Android平臺(tái)實(shí)現(xiàn)拼圖小游戲
- Android實(shí)現(xiàn)美女拼圖游戲詳解
- Android實(shí)現(xiàn)九宮格拼圖游戲
- Android自定義View實(shí)現(xiàn)拼圖小游戲
- Android利用ViewDragHelper輕松實(shí)現(xiàn)拼圖游戲的示例
- Android拼圖游戲 玩轉(zhuǎn)從基礎(chǔ)到應(yīng)用手勢(shì)變化
- Android 簡(jiǎn)單的實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能
- Android Studio做超好玩的拼圖游戲 附送詳細(xì)注釋源碼
- Android實(shí)現(xiàn)九格智能拼圖算法
相關(guān)文章
Android?自定義來電秀實(shí)現(xiàn)總結(jié)
這篇文章主要為大家介紹了Android?自定義來電秀實(shí)現(xiàn)總結(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解Android應(yīng)用中屏幕尺寸的獲取及dp和px值的轉(zhuǎn)換
這篇文章主要介紹了Android應(yīng)用中屏幕尺寸的獲取及dp和px值的轉(zhuǎn)換方法,這里主要介紹將dp轉(zhuǎn)化為px值的例子,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了Android Retrofit框架的使用，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-03-03
Android利用代碼控制設(shè)備上其他音樂播放器的方法
這篇文章主要給大家介紹了關(guān)于Android利用代碼如何控制設(shè)備上其他音樂播放器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
Android實(shí)現(xiàn)登陸頁(yè)logo隨鍵盤收放動(dòng)態(tài)伸縮（完美解決鍵盤彈出遮擋控件的問題）
這篇文章主要介紹了Android實(shí)現(xiàn)登陸頁(yè)logo隨鍵盤收放動(dòng)態(tài)伸縮（完美解決鍵盤彈出遮擋控件的問題）的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Android音頻錄制MediaRecorder之簡(jiǎn)易的錄音軟件實(shí)現(xiàn)代碼
這篇文章主要介紹了Android音頻錄制MediaRecorder之簡(jiǎn)易的錄音軟件實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2014-01-01
Android中通過反射實(shí)現(xiàn)圓角ImageView代碼實(shí)例
這篇文章主要介紹了Android中通過反射實(shí)現(xiàn)圓角ImageView代碼實(shí)例,本文直接給出核心實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Android編程中軟鍵盤基本用法,結(jié)合實(shí)例形式分析了Android軟鍵盤的顯示、隱藏與使用注意事項(xiàng),需要的朋友可以參考下2016-10-10
android 橫豎屏限制的配置方法，需要的朋友可以參考一下2013-05-05
Android實(shí)現(xiàn)listview滑動(dòng)時(shí)漸隱漸現(xiàn)頂部欄實(shí)例代碼
android中實(shí)現(xiàn)listview滑動(dòng)時(shí)漸隱漸現(xiàn)頂部欄只是在獲取listview的滑動(dòng)距離上可能沒法直接獲取，需要?jiǎng)討B(tài)的去計(jì)算。感興趣的朋友一起看看吧2016-10-10