手势解锁

首先看下我们要制作功能的效果如图所示:

效果图

思路介绍

• 手势密码一般为9宫格模式，通过手势滑动设置一个多边形(polygon)的密码图片。
• 9宫格的每一个格子可以用按钮表示节点，也可以用CAShapeLayer来绘制节点。
• 在这里采用CAShapeLayer来绘制9宫格的节点，手势密码的节点有选中模式、正常模式和警告模式三种状态，特别说明:警告模式是在第二次密码输入与第一次密码不一致，或者解锁密码错误的时候提示的状态。正常模式只是一个空心圆，选中模式是一个内部的实心圆+外部的空心圆，警告模式只是改变选中模式的颜色，所以这里采用两个CAShapeLayer对象来绘制外部空心圆和内部实心圆(outlineLayer和innerCircleLayer)。
• 创建节点类LockNodeView和密码视图类LockView，LockView采用maskView方式添加密码视图，9宫格用[maskPath appendPath:[UIBezierPath bezierPathWithOvalInRect:frame]来绘制，frame为每个节点的坐标，9个节点通过UIBezierPath统一绘制成一个图形，这样有利于管理。
• 重写视图的-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event和-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event方法，也可以用滑动手势代替。
• 滑动的时候去判断手势坐标滑到了哪一个节点，并且判断节点是否已经被选中，未选中添加连线。
• 在滑动结束的时候获取保存节点的数组，连接节点的tag组成一个字符串，作为手势结果密码。

节点类

@interface DYHLockNodeView ()

/**
 手势外部的空心圆
 */
@property (nonatomic, strong) CAShapeLayer *outlineLayer;

/**
 手势内部的实心圆
 */
@property (nonatomic, strong) CAShapeLayer *innerCircleLayer;

@end

- (void)layoutSubviews {
    
    self.outlineLayer.frame = self.bounds;
    UIBezierPath *outlinePath = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
    self.outlineLayer.path = outlinePath.CGPath;
    
    //中心圆的直径为外部圆的1/3
    CGFloat innerWidth = self.bounds.size.width / 3;
    self.innerCircleLayer.frame = CGRectMake(innerWidth, innerWidth, innerWidth, innerWidth);
    UIBezierPath *innerPath = [UIBezierPath bezierPathWithOvalInRect:self.innerCircleLayer.bounds];
    self.innerCircleLayer.path = innerPath.CGPath;
}

- (void)setStatusNormal {
    
    self.outlineLayer.strokeColor = [UIColor whiteColor].CGColor;
    self.innerCircleLayer.fillColor = [UIColor clearColor].CGColor;
}

- (void)setStatusSelected {
    
    self.outlineLayer.strokeColor = LIGHTBLUE.CGColor;
    self.innerCircleLayer.fillColor = LIGHTBLUE.CGColor;
}

- (void)setStatusWarning {
    
    self.outlineLayer.strokeColor = [UIColor redColor].CGColor;
    self.innerCircleLayer.fillColor = [UIColor redColor].CGColor;
}

密码视图类

初始化添加9宫格节点，然后在layoutSubviews中布局

[self.layer addSublayer:self.polygonLineLayer];
    
    _nodes = [NSMutableArray arrayWithCapacity:9];
    for (int i = 0; i < 9; i++) {
        DYHLockNodeView *nodeView = [[DYHLockNodeView alloc] init];
        nodeView.tag = i;
        [_nodes addObject:nodeView];
        [self addSubview:nodeView];
    }
    
    _selectedNodes = [NSMutableArray arrayWithCapacity:9];
    _points = [NSMutableArray array];

绘制九宫格

- (void)layoutSubviews {
    
    //添加一个mask层
    self.polygonLineLayer.frame = self.bounds;
    CAShapeLayer *maskLayer = [CAShapeLayer new];
    maskLayer.frame = self.bounds;
    
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRect:self.bounds];
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    maskLayer.lineWidth = 1.0f;
    maskLayer.strokeColor = [UIColor blackColor].CGColor;
    maskLayer.fillColor = [UIColor blackColor].CGColor;
    
    //每行3个nodeView，没列3个，上下左右间距为一个nodeView的宽
    for (int i = 0; i < self.nodes.count; i++) {
        DYHLockNodeView *nodeView = self.nodes[i];
        CGFloat min = self.bounds.size.width < self.bounds.size.height ? self.bounds.size.width : self.bounds.size.height;
        CGFloat width = min / 5;
        CGFloat height = width;
        int row = i % 3;
        int column = i / 3;
        CGRect frame = CGRectMake(row * (width * 2), column * (width * 2), width, height);
        nodeView.frame = frame;
        [maskPath appendPath:[UIBezierPath bezierPathWithOvalInRect:frame]];
    }
    
    maskLayer.path = maskPath.CGPath;
    self.polygonLineLayer.mask = maskLayer;
}

手势滑动判断滑动位置

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    UITouch *touch = touches.anyObject;
    CGPoint touchPoint = [touch locationInView:self];
    // 查找手指滑过的node
    NSInteger index = [self indexForNodeAtPoint:touchPoint];
    if (index >= 0) {
        DYHLockNodeView *node = self.nodes[index];
        
        if (![self addSelectedNode:node]) {
            //移动线到手势位置
            [self moveLineWithFingerPosition:touchPoint];
        }
        
    } else {
        [self moveLineWithFingerPosition:touchPoint];
    }
}

手势滑动结束

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    //手势结束的时候，清除超出节点的线，起点在第一个节点中心，结束也是最后一个节点中心，超出部分不需要绘制
    [self removeLastFingerPosition];
    if([self.delegate respondsToSelector:@selector(lockView:didEndSwipeWithPassword:)]) {
        
        NSMutableString *password = [NSMutableString new];
        for(DYHLockNodeView *nodeView in self.selectedNodes) {
            NSString *index = [@(nodeView.tag) stringValue];
            [password appendString:index];
        }
        self.viewState = [self.delegate lockView:self didEndSwipeWithPassword:password];
        
    } else {
        self.viewState = DYHLockViewStateSelected;
    }
}

代码下载地址:https://github.com/iosyueshen/DYHLockViewDemo.git