金融产品手势解锁是常见的东西了,这里把我自己实现的记录一下。
自定义View的流程一般都是onMeasure跟onDraw,根据自己的需要在attrs中自定义一些对外的属性。
1.测量
通过测量可以设置View的宽高。
View有两个重要的测量模式:
MeasureSpec.EXACTLY跟MeasureSpec.AT_MOST,另外还有一个用的比较少,这里不考虑。
EXACTLY是测量的精确值,一般是match_parent或者给定具体的dp值。
AT_MOST是需要去计算的,wrap_content。

这里我是直接把width的值看作是match_parent了,如果想要自己去计算可以通过space加上背景圆圈的大小来算出,跟下面的height的warp算法一样。
2.绘制

绘制分为背景绘制,连线绘制还有手势移动时的线绘制。
背景绘制:手势解锁一般背景都是N行N列的大圆圈,通过画笔画空心圆就行了。

其实到这里背景层就已经绘制完毕了,接下来绘制跟手势有关的。通过touchEvent事件拿到手指的移动位置,这里判断了手指按下时是否在符合规定的圆内,如果没有折让其move一直判断找出第一个点坐标。还需要解决手指抬起时把线结束在圆心位置。

这个是绘制之前保存下来的手势点

这个是画手指正在移动的线

需要考虑手指移动的点是否在规定的圆内,这里我没有判断线切圆的情况。

至此,手势解锁就大功告成!
项目GitHub: https://github.com/coderxuyueping/GestureView