Android自定义九宫格手势解锁组件

项目来源

别的不说，先看一下效果图:

九宫格手势图案解锁功能在很多应用中都在使用，本文介绍的组件来自于开源项目PatternLocker的翻写，原工程是使用Kotlin开发的，由于我们项目是使用java开发，所以将原工程使用Java进行了翻写，如果需要kotlin版本的请移步原工程Kotlin版九宫格手势解锁组件，如果需要Java版本的可以点此下载Java版九宫格手势解锁组件。本文主要介绍Java版本九宫格手势解锁组件的使用和实现原理。

支持功能

• 支持自定义各状态下（未操作时、操作时以及操作出错时）线颜色、填充色和线宽；
• 支持自定义各种状态下（未操作时、操作时以及操作出错时）每个CellView样式和连接线样式；
• 支持设置图案绘制完成后延迟自动清除的时长（默认1秒）；
• 支持是否跳过中间点（默认不跳过）；
• 支持是否触碰震动反馈（默认不震动）；
• 支持指示器辅助控件可选择使用；
• 业务逻辑（至少连点几个点、验证时最多可出错几次等）须自定义

九宫格实现原理

1、九宫格由9个格子组成，首先给每个格子分配id，9个cell的编号如下：
0 1 2
3 4 5
6 7 8

2、给每个格子设置坐标
x 表示该cell的x坐标（点坐标）
y 表示该cell的y坐标（点坐标）
九宫格每个格子x,y 点坐标编号如下：
(0,0) (1,0) (2,0)
(0,1) (1,1) (2,1)
(0,2) (1,2) (2,2)

3、每个格子就是一个圆，所以需要圆心坐标和半径，格子圆心之间距离为3个半径，
centerX 表示该cell的圆心x坐标（相对坐标）
centerY 表示该cell的圆心y坐标（相对坐标）
centerX, centerY 圆心坐标如下：
(radius, radius) (4radius, radius) (7radius, radius)
(radius, 4radius) (4radius, 4radius) (7radius, 4radius)
(radius, 7radius) (4radius, 7radius) (7radius, 7radius)

4、每个格子需要标记是否被选中状态
isHit 表示该cell是否被设置的标记

工程源码介绍

采用自定义View的形式，组件分为两部分，第一部分是指示器View，第二部分是九宫格绘制View。
指示器View：

<com.github.gesture.lockview.PatternIndicatorView
       android:id="@+id/patternIndicatorView"
       android:layout_width="50dp"
       android:layout_height="50dp"
       android:layout_margin="20dp"/>

九宫格View：

<com.github.gesture.lockview.PatternLockerView
    android:id="@+id/patternLockerView"
    android:layout_width="250dp"
    android:layout_height="250dp" />

这两个view可以拆开使用，如果不需要指示器，就只集成九宫格View即可。由于指示器View和九宫格View逻辑差不多，这里只简单分析一下九宫格View的实现代码。

九宫格View相关类：
PatternLockerView：九宫格View实现类；
DefaultLockerNormalCellView：默认九宫格每一个格子实现类；
DefaultLockerLinkedLineView：默认九宫格连线实现类；
DefaultLockerHitCellView：默认九宫格选中后格子样式实现类；

PatternLockerView

该类主要初始化九宫格9个格子实体，并且重写onDraw和 onMeasure方法，

初始化init方法主要读取attr中的配置属性；
onMeasure方法中选择宽和高的最小值设为View的宽高。
onDraw方法：

@Override
protected void onDraw(Canvas canvas) {