欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能

 更新時(shí)間：2021年02月23日 09:35:36   作者：longxuanzhigu  
這篇文章主要介紹了Android實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

先看最終的效果圖：

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

一、實(shí)現(xiàn)步驟：

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)證成功。

二、實(shí)現(xià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)后為了和畫(huà)布大小保持一致,避免出現(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)聽(tīng)
    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)聽(tīng)
    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)聽(tīng)
    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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論