Android拼图滑块验证码控件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sdfsdfdfa/article/details/79120665

      大咖好,博主毕业工作半年多了。今天给大噶呈献博主博客处女作——Android拼图滑块验证码控件。由于初写博客,很多地方可能不够好,望各位多多给点意见。工作半年才送出第一篇博客很惭愧555。

概述

      验证码是可以区分用户是人还是计算机。可以防止破解密码、刷票等恶意行为。客户端上多数用在关键操作上,比如购买、登录、注册等场景。本文将介绍Android拼图滑块验证码控件是如何一步一步编写形成的。希望能帮助到大家。
       当然,如果仅仅是实现效果如何实现就太没技术含量了。本文将通过介绍如何编写此控件的同时,介绍Android自定义控件的一些技巧。

效果图

这里写图片速度

分析

      由效果图可以看到一张图片,一个可拖动滑块条,拖动滑块条,滑块拼图跟随滑动,滑动拼图到正确位置并松开手指,图下方会出现验证信息,滑动到错误位置并松开,也会出现验证信息。
      看到这样的效果,很多人估计都能看出来,这是一个ViewGroup包装了一个ImageView和Seekbar。没错,控件确实是LinearLayout包裹着一个ImageView和Seekar,然而Android自带的ImageView和Seekbar并不能实现效果,需要改造。如何改造后面再说。现在来看看整体控件的结构:
这里写图片描述

      从图看到,控件是由PictureVertifyView和TextSeekbar组合在一个Captcha里面。也就是前面所说的一个LinearLayout包裹一个ImageView和Seekbar,并将这些形成一个小团体。其中团体的老大我就叫他Captcha,PictureVertifyView和TextSeekbar就是他的小跟班,社团跟客户谈业务只能由老大进行,老大将工作吩咐给跟班,跟班们根据自己的能力做自己的本职,PictureVertifyView就是做拼图这块的,TextSeekbar就是做滑动条这块的,最终组合成一个能完成客户需求的整体。
      废话不多说,开始写干货。

实现

1. 编写PictureVertifyView类

      PictureVertifyView就是效果图上部分的拼图块,也是Captcha控件的核心。主要完成拼图的绘制,逻辑。

1.1PictureVertifyView类的状态

      首先PictureVertifyView有6种状态(点击、滑动、松开手指、验证成功、验证失败、初始化),这些状态将影响PictureVertifyView的绘制。至于怎么影响,后面将会说明。

    private static final int STATE_DOWN = 1;
    private static final int STATE_MOVE = 2;
    private static final int STATE_LOOSEN = 3;
    private static final int STATE_IDEL = 4;
    private static final int STATE_ACCESS = 5;
    private static final int STATE_UNACCESS = 6;
    private int mState = STATE_IDEL;
 //手指按下
 void down(int progress) {
        startTouchTime = System.currentTimeMillis();
        mState = STATE_DOWN;
        currentPosition = (int) (progress / 100f * (getWidth() -                     Utils.dp2px(getContext(), 50)));
        invalidate();
    }
   //手指滑动,改变缺块图片位置
    void move(int progress) {
        mState = STATE_MOVE;
        currentPosition = (int) (progress / 100f * (getWidth() - Utils.dp2px(getContext(), 50)));
        invalidate();
    }
   //手指松开,进行验证
    void loose() {
        mState = STATE_LOOSEN;
        looseTime = System.currentTimeMillis();
        checkAccess();
        invalidate();
    }

  //复位到初始状态,当复位的初始状态,所有东西都会重置
    void reset() {
        mState = STATE_IDEL;
        verfityBlock.recycle();
        verfityBlock = null;
        info = null;
        blockShape = null;
        invalidate();
    }
   //验证不通过
    void unAccess() {
        mState = STATE_UNACCESS;
        invalidate();
    }
   //验证通过
    void access() {
        mState = STATE_ACCESS;
        invalidate();
    }
1.2拼图缺块位置信息生成

      拼图缺块信息既是拼图缺块的位置,这里将封装成一个实体类PositionINfo如下:

 public class PositionInfo {
        //缺块在整张图片的左上角x轴位置
        int left;
        //缺块在整张图片的左上角y轴位置
        int top;

        public PositionInfo(int left, int top) {
            this.left = left;
            this.top = top;
        }
    }

      对于验证码拼图缺块的位置是要在图片范围内随机生成的。代码如下:

 @Override
    public PositionInfo getBlockPostionInfo(int width, int height) {
        Random random = new Random();
        int edge = Utils.dp2px(getContext(), 50);
        int left = random.nextInt(width - edge);
        //Avoid robot frequently and quickly click the start point to access the captcha.
        if (left < edge) {
            left = edge;
        }
        int top = random.nextInt(height - edge);
        if (top < 0) {
            top = 0;
        }
        return new PositionInfo(left, top);
    }

      这里面对缺块作了边界限制,如下图:
这里写图片描述

      从图上看到,图片的左上角的点坐标限制在里面的矩形中,这样做的目的是防止缺块超出图片边界。看到这里有人要疑惑,为了防止缺块超出整张图片范围,限制右、下边界可以理解,为什么还要限制左边界。原因很简单,Captcha是基于按下和松开TextSeekbar来判断是否要进行验证。万一机器人模拟快速点击滑动条的初始位置,而缺块正好又生成在图片最左边,这样不就不需要滑动就能通过验证了吗。虽然缺块生成在图片的最左边几率很小,但是我还是拒绝这种欧气的产生。

1.3缺块的形状

      缺块的形状就是一个Path类,如何编写?这还用问吗?你弄个圆也行,弄个三角形也行,这里我就弄个不知道名字的形状好了,代码如下:

    public Path getBlockShape(int blockSize) {
        int gap = Utils.dp2px(getContext(), blockSize/5f);
        Path path = new Path();
        path.moveTo(0, gap);
        path.rLineTo(Utils.dp2px(getContext(), blockSize/2.5f), 0);
        path.rLineTo(0, -gap);
        path.rLineTo(gap, 0);
        path.rLineTo(0, gap);
        path.rLineTo(2 * gap, 0);
        path.rLineTo(0, 4 * gap);
        path.rLineTo(-5 * gap, 0);
        path.rLineTo(0, -1.5f * gap);
        path.rLineTo(gap, 0);
        path.rLineTo(0, -gap);
        path.rLineTo(-gap, 0);
        path.close();
        return path;
    }
//不过注意了,你设计的Path的狂傲要限制在blockSize(缺块大小)内。
1.4生成缺块图片

      上面介绍了缺块的形状,这里我们讲讲如何生成缺块图片。缺块图片是要在原图根据缺块形状裁的,至于怎么裁,代码如下:

 private Bitmap createBlockBitmap() {
       //创建一张白纸
        Bitmap tempBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        //将这张白纸片放入画布中
        Canvas canvas = new Canvas(tempBitmap);
        //由于PictureVertifyView是继承ImageView,这里我们直接拿到ImageView的Drawable图片并限制其宽高以达到Drawable是和ImageView的宽高是一致的
        getDrawable().setBounds(0, 0, getWidth(), getHeight());
        //把画布的可画范围限制在缺块形状中,当然这个blockShape已经根据缺块位置进行偏移
        canvas.clipPath(blockShape);
        //画画
        getDrawable().draw(canvas);
        //先忽略下面这句好吗
        mStrategy.decoreateSwipeBlockBitmap(canvas,blockShape);
        return cropBitmap(tempBitmap);
    }

      这时tempBitmap是这样的:外矩形是透明的,内矩形就是缺块的内容,而整张tempBitmap的大小跟ImageView的大小一样,很多无用面积,而我们需要的是里面那张。别急cropBitmp方法就是帮我们裁出里面那部分。
这里写图片描述

    private Bitmap cropBitmap(Bitmap bmp) {
        Bitmap result = null;
        int size = Utils.dp2px(getContext(), blockSize);
        //一句代码就裁出来了,就是这么简单
        result = Bitmap.createBitmap(bmp, info.left, info.top, size, size);
        bmp.recycle();
        return result;
    }
1.5 绘制

      在看绘制代码前,我们先来看看下面这张图,看看怎么绘制。
这里写图片描述

      实际上绘制并不复杂,就是在ImageView的基础上加上一个缺块的阴影遮盖原来图片的一部分,再加上裁出来的缺块图片。由于本控件的滑动条是水平滑动的,所以缺块图片和缺块阴影在同一水平线上,只是水平位置不同。验证是否通过是判断currentPostion和left是否大概相等。怎么个大概?我代码是写10个像素。
      好了,贴代码:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制前,我们要判断是否有缺块的位置信息,缺块形状和图片,没有的话要先获得它们的实例,其中mStrategy的作用,我们后面将会说到。
        if (info == null) {
            info = mStrategy.getBlockPostionInfo(getWidth(), getHeight());
        }
        if (blockShape == null) {
            blockShape = mStrategy.getBlockShape(blockSize);
            blockShape.offset(info.left, info.top);
        }
        if (verfityBlock == null) {
            verfityBlock = createBlockBitmap();
        }
        //上文已经说过,状态会影响绘制内容,其中当状态为非验证成功时,会绘制阴影,当状态为滑动或初始时绘制滑动的缺块图片(写代码最怕为改名字,有些名字很尴尬,请多多包涵)
        if (mState != STATE_ACCESS) {
            canvas.drawPath(blockShape, shadowPaint);
        }
        if (mState == STATE_MOVE || mState == STATE_IDEL) 
            canvas.drawBitmap(verfityBlock, currentPosition, info.top, bitmapPaint);
        }

    }
1.6 验证算法

       前面提到,当松开手指,缺块图片和缺块阴影重合的时候就是验证通过,否则失败,其代码很简单:

private void checkAccess() {
//判断currentPostion(滑块水平位置)和info.left(阴影水平位置)是否在容差以内
        if (Math.abs(currentPosition - info.left) < TOLERANCE) {
            access();
            //listener监听器用于监听验证成功失败事件
            if (listener != null) {
            //小操作,用于记录用户验证所需要的时间,详细看工程代码
                long deltaTime = looseTime - startTouchTime;
                listener.onAccess(deltaTime);
            }
        } else {
            unAccess();
            if (listener != null) {
                listener.onFailed();
            }
        }
    }

2.编写TextSeekbar

      TextSeekbar就是效果图下面那个滑动条,它相当于团队里老板的市场调研,观察客户的喜好再告诉给老板,老板再叫PictureVertifyView做什么。TextSeekbar继承于Seekbar,功能很简单,就是在绘制完Seekbar的时候多绘制一行字,代码如下:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawText("向右滑动滑块完成拼图", getWidth() / 2, getHeight() / 2 + textPaint.getTextSize() / 2 - 4, textPaint);
    }
//注意,这个地方有点偷工减料了,文字垂直方向的偏移并没有准确计算,只是在手机上调试视觉上就是差不多这样,这里深感抱歉。

3.编写Captcha老大

      前文说过,Captcha就是团队老大,外面客户谈业务只能跟它谈,再将工作分配给小弟。Captcha就相当于团队的门面,其实门面嘛是可有可无的。有了PictureVertifyView和TextSeekbar就可以进行业务工作,但是国不能一日无君,社团不能一日无老大。老大是对内统筹下属工作,对外是外界与团队进行沟通的对象。
      Captcha其实就是一个LinearLayout包裹PictureVertifyView和TextSeekbar的组合控件,当然也可以是FrameLayout等。
      Captcha的编写与编写组合控件的步骤一样,编写xml布局文件,编写控制逻辑。

3.1xml布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/container_backgroud"
    android:padding="10dp"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_height="200dp">

        <com.luozm.captcha.PictureVertifyView
            android:id="@+id/vertifyView"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="fitXY" />

        <LinearLayout
            android:visibility="gone"
            android:id="@+id/accessRight"
            android:background="#7F000000"
            android:orientation="horizontal"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="28dp">

            <ImageView
                android:src="@drawable/right"
                android:layout_marginLeft="10dp"
                android:layout_width="20dp"
                android:layout_gravity="center"
                android:layout_height="20dp" />

            <TextView
                android:id="@+id/accessText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:textColor="#FFFFFF"
                android:text="验证通过,耗时1000毫秒"
                android:textSize="14sp"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/accessFailed"
            android:background="#7F000000"
            android:orientation="horizontal"
            android:visibility="gone"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="28dp">

            <ImageView
                android:src="@drawable/wrong"
                android:layout_marginLeft="10dp"
                android:layout_width="20dp"
                android:layout_gravity="center"
                android:layout_height="20dp" />

            <TextView
                android:id="@+id/accessFailedText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:textColor="#FFFFFF"
                android:textSize="14sp"/>

        </LinearLayout>


    </FrameLayout>


    <com.luozm.captcha.TextSeekbar
        android:id="@+id/seekbar"
        android:layout_gravity="center"
        style="@style/MySeekbarSytle"
        android:splitTrack="false"
        android:thumbOffset="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp" />

</LinearLayout>

      布局很简单,除了前文介绍的TextSeekbar和PictureVertifyView外还有一个覆盖在PictureVertifyView底部的用于显示验证信息的布局。

3.2控制逻辑

      Captcha的作用就是统筹子控件的逻辑,相当于一个Activity界面统筹各个控件工作完成一个功能。在这里,Captcha主要是通过TextSeekbar的拖动事件触发PictureVertifyView状态的改变。其代码如下:

seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                if (isDown) {
                    isDown = false;
                    if (progress > 10) {
                        isResponse = false;
                    } else {
                        isResponse = true;
                        accessFailed.setVisibility(GONE);
                        vertifyView.down(0);
                    }
                }
                if (isResponse) {
                    vertifyView.move(progress);
                } else {
                    seekBar.setProgress(0);
                    isResponse = false;
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                isDown = true;
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                if (isResponse) {
                    vertifyView.loose();
                }
            }
        });

      由于Android自带的Seekbar的progress值是随用户手指的位置改变,即使手指并非按下滑动块也能改变其值。因此,上面代码作了用户按下滑动块才能拖动,避免progress值的瞬变。

4.策略模式

      刚写这个控件的时候,只是为了完成项目中登录验证的功能,PictureVertifyView的拼图形状,拼图效果都是写死的。而为了让控件的使用者可以自行定制想要的拼图效果,采用策略模式对控件进行大改造,将定义拼图效果的方法移至策略类当中。其类图大概如下图:
这里写图片描述
      读者在前文中应该留意到mStrategy这个引用。这就是PictureVertifyView通过引用CaptchaStrategy的一个实现类从而确定自己要用到的拼图效果。CaptchaStrategy的代码如下:

public abstract class CaptchaStrategy {

    protected Context mContext;

    public CaptchaStrategy(Context ctx) {
        this.mContext = ctx;
    }

    protected Context getContext() {
        return mContext;
    }

    /**
     * 定义缺块的形状
     *
     * @param blockSize 单位dp,注意转化为px
     * @return path of the shape
     */
    public abstract Path getBlockShape(int blockSize);

    /**
     * 定义缺块的位置信息生成算法
     *
     * @param width  picture width
     * @param height picture height
     * @return position info of the block
     */
    public abstract PositionInfo getBlockPostionInfo(int width, int height);

    /**
     * 获得缺块阴影的Paint
     */
    public abstract Paint getBlockShadowPaint();

    /**
     * 获得滑块图片的Paint
     */
    public abstract Paint getBlockBitmapPaint();

    /**
     * 装饰滑块图片,在绘制图片后执行,即绘制滑块前景
     */
    public void decoreateSwipeBlockBitmap(Canvas canvas,Path shape) {

    }
}

      它的默认实现类为DefaultCaptchaStrategy,代码如下:

public class DefaultCaptchaStrategy extends CaptchaStrategy {

    public DefaultCaptchaStrategy(Context ctx) {
        super(ctx);
    }

    @Override
    public Path getBlockShape(int blockSize) {
        int gap = Utils.dp2px(getContext(), blockSize/5f);
        Path path = new Path();
        path.moveTo(0, gap);
        path.rLineTo(Utils.dp2px(getContext(), blockSize/2.5f), 0);
        path.rLineTo(0, -gap);
        path.rLineTo(gap, 0);
        path.rLineTo(0, gap);
        path.rLineTo(2 * gap, 0);
        path.rLineTo(0, 4 * gap);
        path.rLineTo(-5 * gap, 0);
        path.rLineTo(0, -1.5f * gap);
        path.rLineTo(gap, 0);
        path.rLineTo(0, -gap);
        path.rLineTo(-gap, 0);
        path.close();
        return path;
    }

    @Override
    public PictureVertifyView.PositionInfo getBlockPostionInfo(int width, int height) {
        Random random = new Random();
        int edge = Utils.dp2px(getContext(), 50);
        int left = random.nextInt(width - edge);
        //Avoid robot frequently and quickly click the start point to access the captcha.
        if (left < edge) {
            left = edge;
        }
        int top = random.nextInt(height - edge);
        if (top < 0) {
            top = 0;
        }
        return new PositionInfo(left, top);
    }

    @Override
    public Paint getBlockShadowPaint() {
        Paint shadowPaint = new Paint();
        shadowPaint.setColor(Color.parseColor("#000000"));
        shadowPaint.setAlpha(165);
        return shadowPaint;
    }

    @Override
    public Paint getBlockBitmapPaint() {
        Paint paint = new Paint();
        return paint;
    }


    @Override
    public void decoreateSwipeBlockBitmap(Canvas canvas, Path shape) {
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#FFFFFF"));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setPathEffect(new DashPathEffect(new float[]{20,20},10));
        Path path = new Path(shape);
        canvas.drawPath(path,paint);
    }
}

总结

      通过拼图滑块验证码控件的编写,了解到自定义控件的一些技巧和步骤。此外还能免费在项目中用到拼图验证码(因为市面上网易的云盾验证码,极验都是付费的)。
      最后,给伸手党一个福利,控件已上传到jcenter。使用者可移至gayhub查看使用。
Captcha Github

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页