仿支付宝手势密码

这篇来分享一下绘制手势密码的实现（主要是设置手势密码、校验手势密码）：

一、大致界面介绍：

                      

                       图1                                                                                                                 图2                                                      

                       

                         图3                                                                                                                图4

图1：手势密码绘制界面 【主要是绘制上方的9个提示图标和9个宫格密码图标】

图2：设置手势密码 【监听手势的输入，TouchEvent的事件处理，获取输入的手势密码，同时显示在上方的提示区域】

图3：再绘制一次，两次密码不一致提示界面 【这里在实现的时候，错误提示文字加了“左右晃动的动画”，错误路径颜色标记为红色】

图4：校验手势密码，输入的密码错误，给予红色路径+错误文字提示

二、实现思路：

1. 正上方的提示区域，用一个类(LockIndicator.java)来实现，自定义view来绘制9个提示图标；

2. 手势密码绘制区域，用一个类(GestureContentView.java)来实现，它继承自ViewGroup里面, 添加9个ImageView来表示图标, 在onLayout（）方法中设置它们的位置；

3. 手势路径绘制， 用一个类(GestureDrawline.java)来实现，复写onTouchEvent()方法，在这个方法里面监听TouchEvent事件: ACTION_DOWN、ACTION_MOVE、ACTION_UP事件，来绘制手势连接不同点之间的路径；

4. 9个点的对象，用一个类(GesturePoint.java)来实现，保存它的位置、状态、背景图片等相关信息；

5. 手势密码的获取，判断手指当前的位置，根据滑动路径经过的点，按顺序保存绘制的点的顺序(这里的点顺序从上到下分别是：1,2,3,4,5,6,7,8,9)，不能有重复的点。

三、代码实现步骤：

1.要用一个类来表示这9个点中的第一个点。里面保留有当前点的上下左右的各个位置等属性

2.自定义GroupView，用来装9个点，9个点的显示是通过ImageView。复写onLayout这个方法，让点按需求排列

3.定义一个可以画线的View，复写onTouchEvent方法，在这个方法里面进行画直线的操作

4.判断用户手指当前的位置，取出当前的位置去与那9个点中的每个点的位置进行比较，如果用户点的位置在某一个点之内，那么当那个点置换背景图片。

具体实现代码如下：

1. LockIndicator.java 图案提示类