Android实现滑块拼图验证码功能

╰+攻爆jí腚メ 2022-10-31 10:56 589阅读 0赞

滑块拼图验证码应该算是很常见的功能了，验证码是可以区分用户是人还是机器。可以防止破解密码、刷票等恶意行为。本文将介绍Android拼图滑块验证码控件的实现过程。希望能帮助到大家。

先看最终的效果图：

![在这里插入图片描述][20210222140544475.gif_pic_center]

本文只是做了个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: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电子书籍，需要的童鞋关注公众号【龙旋】回复：“e\_books” 即可获取哦！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd4dWFuemhpZ3U_size_16_color_FFFFFF_t_70_pic_center]

欢迎关注公众号【龙旋】，获得更多福利、精彩内容哦！

![在这里插入图片描述][20210202163757948.jpg_pic_center]

[20210222140544475.gif_pic_center]: /images/20221024/59107a704fc749a694e2f78a3991d0ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd4dWFuemhpZ3U_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/fb932d447a424cce887e636ad98e0c01.png
[20210202163757948.jpg_pic_center]: /images/20221024/5ac651e314a54833941d788108f00326.png