在工作之余学习了ios的手势解锁功能，这个功能现在被广泛用于手机解锁，密码验证，快捷支付等。以下是具体实现，写得不好请多多包涵！

1、效果图：

ios手势解锁实践

2、实现思路：

我在做任何一个项目的时候，都得先详细分析，把整个逻辑理清楚，一个一个的细节剥离开来，把复杂的逻辑简单化。然后我们需要先看大致的实现过程：

2.1 加载九宫格界面

2.2 实现按钮被点击及滑动过程中按钮状态的改变

2.3 实现滑动过程中的按钮之间的连线

2.4 绘制完毕后生成密码

2.5 把密码传出去

3、代码实现如下

3.1 创建一个数组来保存九宫格的九个按钮，并在该数组的getter方法加载九个按钮

-(NSMutableArray *)btns{
    if(_btns==nil)
    {
        _btns=[NSMutableArray array];
        for (int i=0; i<kButtonCount; i++) {
            //创建btn
            UIButton *btn=[[UIButton alloc] init];
            btn.tag=i;
            //禁用btn交互
            btn.userInteractionEnabled=NO;
            // 设置 btn 默认的图片
            [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
            //设置 btn 点击高亮的图片
            [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
            //设置 btn 错误的图片
            [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateDisabled];
            [_btns addObject:btn];
            [self addSubview:btn];
        }
    }
    return _btns;
}

3.2 重写layoutSubviews方法，在这里计算九宫格按钮的坐标位置

-(void)layoutSubviews{
    [super layoutSubviews];
    
    //计算九宫格位置
    CGFloat w = 74;
    CGFloat h = w;
    int colCount = 3;
    CGFloat margin = (self.frame.size.width - 3 * w) / 4;
    for (int i = 0; i < self.btns.count; i++) {
        CGFloat x = (i % colCount) * (margin + w) + margin;
        CGFloat y = (i / colCount) * (margin + w) + margin;
        [self.btns[i] setFrame:CGRectMake(x, y, w, h)];
    }
}

3.3 手指开始触摸

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *t=[touches anyObject];
    CGPoint p=[t locationInView:self];
    
    for(int i=0;i<self.btns.count;i++){
        UIButton *btn= self.btns[i];
        // 如果 btn 的 frame 包含 手指的点
        if(CGRectContainsPoint(btn.frame, p)){
            // 让按钮亮起来
            [btn setSelected:YES];
            // 判断 如果已经加到了数组当中 那么不再去添加
            if(![self.linesBtns containsObject:btn]){
                // 添加到需要画线的数组当中
                [self.linesBtns addObject:btn];
            }
        }
    }
}

3.4 手指滑动

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *t=[touches anyObject];
    CGPoint p=[t locationInView:self];
    //记录移动过程中手指的位置
    self.currentPoint=p;
    for(int i=0;i<self.btns.count;i++){
        UIButton *btn= self.btns[i];
        // 如果 btn 的 frame 包含 手指的点
        if(CGRectContainsPoint(btn.frame, p)){
            // 让按钮亮起来
            [btn setSelected:YES];
            // 判断 如果已经加到了数组当中 那么不再去添加
            if(![self.linesBtns containsObject:btn]){
                // 添加到需要画线的数组当中
                [self.linesBtns addObject:btn];
             }
        }
    }
    //重绘
    [self setNeedsDisplay];
}

3.5 手指抬起

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    //修正最后手指松开后多画出来的一条线
    self.currentPoint=[[self.linesBtns lastObject] center];
    //重绘
    [self setNeedsDisplay];
    
    //拼接密码
    NSString *password=@"";
    for (int i=0;i<self.linesBtns.count;i++) {
        UIButton *btn= self.linesBtns[i];
        password=[password stringByAppendingString:[NSString stringWithFormat:@"%ld",btn.tag]];
    }
    
    //把用户选择的密码传出去
    if(self.passwordBlock){
        if(self.passwordBlock(password)){
            NSLog(@"zhengque");
        }else{
            NSLog(@"cuowu");
            // 所有需要画线的 btn 都变成错误的样式
            for (int i=0;i<self.linesBtns.count;i++) {
                UIButton *btn= self.linesBtns[i];
                [btn setEnabled:NO];
                [btn setSelected:NO];
            }
        }
    }
    
    //禁用按钮交互
    self.userInteractionEnabled=NO;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        //清空
        [self clean];
        //恢复按钮交互
        self.userInteractionEnabled=YES;
    });
}

3.6 让按钮恢复到初始状态

-(void)clean{
    for (int i=0;i<self.btns.count;i++) {
        UIButton *btn= self.btns[i];
        [btn setEnabled:YES];
        [btn setSelected:NO];
    }
    [self.linesBtns removeAllObjects];
    [self setNeedsDisplay];
}

3.7 drawRect方法

- (void)drawRect:(CGRect)rect {
    
    if(!self.linesBtns.count){
        return;
    }
    // Drawing code
    UIBezierPath *path=[[UIBezierPath alloc] init];
    for(int i=0;i<self.linesBtns.count;i++){
        UIButton *btn= self.linesBtns[i];
        // 如果 是第一个按钮 那么设置为起点
        if(i==0){
            [path moveToPoint:btn.center];
        }else{
            [path addLineToPoint:btn.center];
        }
    }
    // 连线到手指的位置
    [path addLineToPoint:self.currentPoint];
    [path setLineWidth:10];
    [path setLineCapStyle:kCGLineCapRound];
    [path setLineJoinStyle:kCGLineJoinRound];
    [[UIColor whiteColor] set];
    [path stroke];
}

好了，一个简单的手势密码功能就这样子实现了，demo地址请戳这里:https://github.com/belong571/HandGestureUnlock