Android自定义View实现拖动滑块完成验证

本文较长&＃xff0c;阅读大约十分钟

此效果源自于星球的星友的提问&＃xff1a;

周末忙里偷闲把效果实现了一下&＃xff0c;其实这个效果一般都是在Web上的验证&＃xff0c;手机App多半还是短信验证码等方式&＃xff0c;或者WebView加载的JS中的效果&＃xff0c;不过要自定义View一下&＃xff0c;这里我以我的思路来写一个自定义View&＃xff0c;不过重在思路哈&＃xff0c;不想写开源&＃xff0c;很多的细节也就没注意&＃xff0c;首先我们分析一下这个验证码的组成部分

1.背景图

2.空缺图

3.移动图

4.成功提示

5.滑块进度条

那么我们首先创建一个View叫做PictureV&＃xff0c;先来绘制背景吧&＃xff1b;

这里我先加载了一张图片作为mBitmap&＃xff0c;然后创建了控件宽高大小一致的bgBitmap&＃xff0c;让mBitmap填充在bgBitmap上&＃xff0c;这是因为我们并不确认一张图片的大小到底是多少&＃xff0c;所以通过createBitmap创建与View等宽高的画布&＃xff0c;最后将bgBitmap绘制在View上&＃xff0c;显示的结果如下&＃xff1a;

然后&＃xff0c;我们开始绘制空缺的图片&＃xff0c;这里我随便找了一个小方块来进行绘制&＃xff0c;看代码&＃xff1a;

绘制空的方块只需要加载一张图片绘制出来就好了&＃xff0c;这里我通过获得nullBitmap的宽度来作为小方块的高宽&＃xff0c;因为我的实现是正方形的&＃xff0c;其次计算了他默认出现的地方&＃xff0c;也就是LINE_W,LINE_H&＃xff0c;当然&＃xff0c;你也可以动态随机&＃xff0c;这个也是同理&＃xff0c;运行一下&＃xff1a;

可以看到方块了&＃xff0c;那么我们现在还得绘制一块移动的方块并且截取空白方块的位置&＃xff0c;代码如下&＃xff1a;

由于移动的方块是需要截取空白处的&＃xff0c;所以我们还是利用了createBitmap创建一个新的位图&＃xff0c;他的高宽就是我们的空白块高宽&＃xff0c;并且他的大小是我们之前绘制空白块的宽度&＃xff0c;也就是CARD_SIZE&＃xff0c;这里要注意的是我们绘制位图的时候x轴&＃xff0c;也就是平行线需要使用一个变量来表示&＃xff0c;等一下滑动的时候要动态修改的&＃xff0c;来看下效果&＃xff1a;

这个效果看起来还是不错的&＃xff0c;我们现在需要其实可以处理滑动事件了&＃xff0c;因为我们这个案例是支持手势滑动的&＃xff0c;来看下Touch的代码&＃xff1a;

这个方法中不仅处理了滑动事件&＃xff0c;也处理了计时的任务&＃xff0c;我们在按下的时候开始计时&＃xff0c;当抬起的时候则关闭计时&＃xff0c;这个时候就知道你移动一次所需要的时间&＃xff0c;方便我们绘制结果提示&＃xff0c;接着来看move方法吧&＃xff0c;首先我们的拖动不能超过屏幕左右侧&＃xff0c;所以我们左侧直接大于0&＃xff0c;右侧的话则需要屏幕宽度减去方块大小&＃xff0c;才赋值给moveX,然后刷新一下View就可以看到效果了&＃xff0c;我们来看下Gif图片&＃xff1a;

当然&＃xff0c;MOVE处理移动&＃xff0c;那么UP就要处理结果了&＃xff0c;我需要知道你到底成功了没有&＃xff0c;那么我们可以看到&＃xff0c;在UP中&＃xff0c;我们首先先remove掉计时器&＃xff0c;不管你成功与否&＃xff0c;这一次的计时算是结束了&＃xff0c;然后我们判断你的移动块是否在空白块的位置&＃xff0c;也就是LINE_W和LINE_H&＃xff0c;这里我设置了一个errorValue 误差值&＃xff0c;防止一些手残党对不准&＃xff0c;当位置吻合&＃xff0c;说明移动成功了&＃xff0c;那我们通过接口通知外部调用对象&＃xff0c;并且这里有一个变量isSucceed设置为true再刷新&＃xff0c;是为了onDraw里的绘制成功提示&＃xff1a;

moveTime就是我们计算的时间了&＃xff0c;来看下drawSucceedText这个方法&＃xff1a;

这里绘制了两部分&＃xff0c;一个是背景一个是文字&＃xff0c;背景直接RectF&＃xff0c;至于他的位置&＃xff0c;我们是放在底部&＃xff0c;所以mHeight减去我们希望的高度即可&＃xff0c;然后文本就比较麻烦了&＃xff0c;因为我们要绘制居中&＃xff0c;通过测量得出baseY&＃xff0c;文本绘制居中这个可以参考资料或者网上一些人的讲解

这样就可以实现绘制的文本居中了&＃xff0c;然后我们运行看下效果

到这里看起来效果还是不错的&＃xff0c;不过我们还有一个滑动进度条要实现&＃xff0c;本来正常来讲&＃xff0c;直接绘制得了&＃xff0c;直接绘制一个进度&＃xff0c;一个滑块&＃xff0c;根据滑动来实现拖动进度&＃xff0c;不过这里我直接偷懒吧&＃xff0c;使用进度条来实现&＃xff0c;嘎嘎~~

那要怎么做呢&＃xff1f;首先新增一个SeekBar

然后PictureV新增一个接口&＃xff0c;对外输出值&＃xff0c;输出两个值&＃xff0c;一个是最大值&＃xff0c;一个是当前进度

而我们默认的当前值是moveX&＃xff0c;而最大值则是宽度减去方块大小&＃xff0c;接着需要新增一个对外调用的方法updateX

这个方法是提供给外部调用的&＃xff0c;和我们的滑动事件是一样的&＃xff0c;处理好moveX的赋值以及对成功与否的判断即可&＃xff0c;来看下MainActivity中的调用&＃xff1a;

来看下运行效果&＃xff1a;

这里的时间其实是没有计算到的因为没有在ACTION_DOWN中开始计时&＃xff0c;不过本来就是偷懒的&＃xff0c;这个小细节也懒得管了&＃xff0c;最后放上PictureV的全部代码&＃xff1a;

最后运行一个Gif:

大体的实现思路是如此&＃xff0c;也并没有进行封装处理&＃xff0c;只是想告诉同学们一种实现方式&＃xff0c;当然&＃xff0c;要想做到图片上的那个效果&＃xff0c;还需要进行细化&＃xff0c;可以根据这个View自己去魔改一下即可&＃xff0c;思路 > Demo

Demo下载地址&＃xff1a;

https://pan.baidu.com/s/19sDesmsGyZJfsj0Xm3U96g

提取码&＃xff1a;w0iw

有兴趣的可以加入我的知识星球哦&＃xff0c;只要点击阅读原文即可哦~

关于知识星球的介绍可以在公众号点击右下角的【和我学习】或者公众号发送【Hi Android】【知识星球】都可以