序言：前两天因为项目的原因，去做了一下仿ios的数字解锁功能，然后写了那篇快给你的app上锁吧(android数字解锁)，后来想到应用中常见的还有另外一种解锁就是绘制图案解锁，这两种解锁的布局看起来是很相似的，而且产生的结果也很相似，但是用户的操作不一样，下面我就给大家来说明一下

话不多说，先上图：

正常状态

按下状态

抬起错误状态

抬起正确状态

思路 这里又是一个九宫格布局，布局可以参考上一篇快给你的app上锁吧(android数字解锁)，只不过这里的九宫格上我们画的是图片(bitmap)。onDraw方法中我们需要画两个东西，一个是点，另一个是线，画点我们就不多说了，根据坐标，将圆形图片画上去即可；

下面我们来看画线：

1、首先先要获得按下点的集合：

我们可以用集合来保存touch事件中按下的时候是九宫格中的点
复制代码

2、然后每两个点连成一条线

首先需要判断第一个点的状态是否是正常的（这个是点的属性，可以自定义），正常的话两点之间就连正确的线，错误的话两点之间就连错误的线
复制代码

布局画好之后我们还需要判断手势，即onTouch事件，按下，移动，抬起。

1、按下：

(1). 清空之前的操作，新一轮的绘制图案开始
(2). 检查当前按下的点与九宫格中的点是否吻合，如果吻合，将判断第一次是否选中九宫格中的点这个标识位置为true
复制代码

2、移动：

(1). 判断第一次按下是否选中九宫格中的点
(2). 如果第一次选中九宫格中的点，将手指在移动且手指按下的点不是九宫格中的点这个标识位置为true
复制代码

3、抬起：

(1). 将所有的标识位都还原成初始化
复制代码

绘制结束：

1、先判断绘制成不成立

2、然后根据绘制的结果向界面发送回调

至此，相关分析就结束了，详细的释义我会在代码中给出：

public class GraphicLockView extends View {private Point[][] points = new Point[3][3];  //创建一个3行3列的点数组private boolean isInit;   //判断有没有初始化private boolean isSelect;  //判断手指第一次按下屏幕有没有选中点private boolean isFinishMove;   //表示一次完整的图案绘制是否结束private boolean isMoveButNotPoint;   //表示手指在移动,但是并不是九宫格中的点private float width, height;   //屏幕宽高private static final int MIN_POINT = 4;    //最小能构成密码的点数private float offsetsX, offsetsY; //偏移量(在这里偏移量等于大边减去小边再除以2)private float bitmapR;   //图片资源的半径private float moveX, moveY;  //手势移动的x,y坐标private Bitmap bpPointNormal, bpPointPressed, bpPointError;  //点的三种图片private Bitmap bpLinePressed, bpLineError;  //线的三种图片private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);private List<Point> selectPointList = new ArrayList<>();   //储存按下的点的集合private Matrix matrix = new Matrix();  //矩阵,用来处理线的缩放private OnGraphicLockListener onGraphicLockListener;   //对外的监听器public GraphicLockView(Context context) {super(context);}public GraphicLockView(Context context, AttributeSet attrs) {super(context, attrs);}public GraphicLockView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void setOnGraphicLockListener(OnGraphicLockListener onGraphicLockListener) {this.onGraphicLockListener = onGraphicLockListener;}@Overrideprotected void onDraw(Canvas canvas) {//绘制之前要先初始化一下点,所以要先判断有没有初始化过if (!isInit) {//初始化点initPoints();}//绘制——将点绘制到画布上pointToCanvas(canvas);if (selectPointList.size() > 0) {Point startPoint = selectPointList.get(0);//绘制九宫格坐标里的点for (int i = 0; i < selectPointList.size(); i++) {Point endPoint = selectPointList.get(i);lineToCanvas(canvas, startPoint, endPoint);startPoint = endPoint;}//绘制九宫格坐标以外的点if (isMoveButNotPoint) {lineToCanvas(canvas, startPoint, new Point(moveX, moveY));}}}/*** 初始化点*/private void initPoints() {//1、先拿到画布的宽高(屏幕的宽高)width = getWidth();height = getHeight();/*================================================================================*///2、判断横竖屏并且计算偏移量if (width > height) {   //横屏//横屏时只有x坐标有偏移量offsetsX = (width - height) / 2;/*** 将手机屏幕可以看作是一个正方形(因为九宫格是正方形,在这里比较好计算),以最小边为基准*/width = height;} else {   //竖屏//竖屏时只有y坐标有偏移量offsetsY = (height - width) / 2;height = width;}/*================================================================================*///3、图片资源(图片资源自己加上)bpPointNormal = BitmapFactory.decodeResource(getResources(), R.drawable.point_normal);bpPointPressed = BitmapFactory.decodeResource(getResources(), R.drawable.point_pressed);bpPointError = BitmapFactory.decodeResource(getResources(), R.drawable.point_error);bpLinePressed = BitmapFactory.decodeResource(getResources(), R.drawable.line_pressed);bpLineError = BitmapFactory.decodeResource(getResources(), R.drawable.line_error);/*================================================================================*///4、点的坐标//第一排points[0][0] = new Point(offsetsX + width / 4, offsetsY + height / 4);points[0][1] = new Point(offsetsX + width / 2, offsetsY + height / 4);points[0][2] = new Point(offsetsX + width - width / 4, offsetsY + height / 4);//第二排points[1][0] = new Point(offsetsX + width / 4, offsetsY + height / 2);points[1][1] = new Point(offsetsX + width / 2, offsetsY + height / 2);points[1][2] = new Point(offsetsX + width - width / 4, offsetsY + height / 2);//第三排points[2][0] = new Point(offsetsX + width / 4, offsetsY + height - height / 4);points[2][1] = new Point(offsetsX + width / 2, offsetsY + height - height / 4);points[2][2] = new Point(offsetsX + width - width / 4, offsetsY + height - height / 4);/*================================================================================*///5、计算图片资源的半径bitmapR = bpPointNormal.getWidth() / 2;/*================================================================================*///6、设置密码按键,初始化每个点,设置为1——9int index = 1;for (int i = 0; i < points.length; i++) {for (int j = 0; j < points[i].length; j++) {points[i][j].index = index;index++;}}/*================================================================================*///初始化完成isInit = true;}@Overridepublic boolean onTouchEvent(MotionEvent event) {moveX = event.getX();moveY = event.getY();isFinishMove = false;isMoveButNotPoint = false;Point point = null;switch (event.getAction()) {case MotionEvent.ACTION_DOWN://每次手指按下的时候都表示重新绘制图案resetPoint();//1、检查当前按下的点与九宫格中的九个点是否吻合point = checkSelectPoint();if (point != null) {isSelect = true;}break;case MotionEvent.ACTION_MOVE:if (isSelect) {point = checkSelectPoint();if (point == null) {isMoveButNotPoint = true;}}break;case MotionEvent.ACTION_UP:isFinishMove = true;isSelect = false;break;}//选中重复检查if (!isFinishMove && isSelect && point != null) {if (checkCrossPoint(point)) {  //交叉点isMoveButNotPoint = true;} else {   //非交叉点(新的点)point.status = Point.STATE_PRESSED;selectPointList.add(point);}}//绘制结束if (isFinishMove) {//绘制不成立if (selectPointList.size() == 1) {resetPoint();//绘制错误,点不够} else if (selectPointList.size() < MIN_POINT && selectPointList.size() > 0) {if (null != onGraphicLockListener) {onGraphicLockListener.setPwdFailure();}errorPoint();//绘制成功} else {if (null != onGraphicLockListener) {String strPassword = "";for (Point pwdPoint : selectPointList) {strPassword += pwdPoint.index;}if (!TextUtils.isEmpty(strPassword)) {onGraphicLockListener.setPwdSuccess(strPassword);}correctPoint();}}}//刷新view,会调用onDraw方法postInvalidate();return true;}/*** 检查交叉点** @param point 点* @return 是否交叉*/private boolean checkCrossPoint(Point point) {if (selectPointList.contains(point)) {return true;}return false;}/*** 设置绘制不成立*/public void resetPoint() {//将点的状态还原for (Point point : selectPointList) {point.status = Point.STATE_NORMAL;}selectPointList.clear();}/*** 设置绘制错误,将点的状态还原*/public void errorPoint() {for (Point point : selectPointList) {point.status = Point.STATE_ERROR;}new Thread(new Runnable() {@Overridepublic void run() {try {Thread.sleep(500);} catch (InterruptedException e) {e.printStackTrace();}handler.sendEmptyMessage(0);}}).start();}/*** 设置绘制成功,将点的状态还原*/private void correctPoint() {new Thread(new Runnable() {@Overridepublic void run() {try {Thread.sleep(1000);} catch (InterruptedException e) {e.printStackTrace();}handler.sendEmptyMessage(0);}}).start();}private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {for (Point point : selectPointList) {point.status = Point.STATE_NORMAL;}selectPointList.clear();postInvalidate();}};private Point checkSelectPoint() {for (int i = 0; i < points.length; i++) {for (int j = 0; j < points[i].length; j++) {Point point = points[i][j];if (AppUtil.isCoincide(point.x, point.y, bitmapR, moveX, moveY)) {return point;}}}return null;}/*** 将点绘制到画布上** @param canvas 画布*/private void pointToCanvas(Canvas canvas) {//遍历点的集合for (int i = 0; i < points.length; i++) {for (int j = 0; j < points[i].length; j++) {Point point = points[i][j];if (points[i][j].status == Point.STATE_PRESSED) {canvas.drawBitmap(bpPointPressed, point.x - bitmapR, point.y - bitmapR, mPaint);} else if (points[i][j].status == Point.STATE_ERROR) {canvas.drawBitmap(bpPointError, point.x - bitmapR, point.y - bitmapR, mPaint);} else {canvas.drawBitmap(bpPointNormal, point.x - bitmapR, point.y - bitmapR, mPaint);}}}}/*** 将线绘制到画布上** @param canvas     画布* @param startPoint 开始的点* @param endPoint   结束的点*/private void lineToCanvas(Canvas canvas, Point startPoint, Point endPoint) {float lineLength = (float) AppUtil.twoPointDistance(startPoint, endPoint);float degree = AppUtil.getDegrees(startPoint, endPoint);canvas.rotate(degree, startPoint.x, startPoint.y);  //旋转if (startPoint.status == Point.STATE_PRESSED) {  //按下的状态//设置线的缩放比例,在这里线是往一个方向缩放的,即x轴,我们只需要设置x轴的缩放比例即可,y轴默认为1matrix.setScale(lineLength / bpLinePressed.getWidth(), 1);matrix.postTranslate(startPoint.x - bpLinePressed.getWidth() / 2, startPoint.y - bpLinePressed.getHeight() / 2);canvas.drawBitmap(bpLinePressed, matrix, mPaint);} else {   //错误的状态matrix.setScale(lineLength / bpLineError.getWidth(), 1);matrix.postTranslate(startPoint.x - bpLineError.getWidth() / 2, startPoint.y - bpLineError.getHeight() / 2);canvas.drawBitmap(bpLineError, matrix, mPaint);}canvas.rotate(-degree, startPoint.x, startPoint.y);  //把旋转的角度转回来}/*** 图案监听器*/public interface OnGraphicLockListener {void setPwdSuccess(String password);void setPwdFailure();}
}
复制代码

来看一波gif动图：

Github下载地址：传送门