十三 iOS之 手势解锁

现在好多app都有手势解锁的功能，这个功能要连线，所以和绘制是脱不开关系的，来看看怎么做

示例图一

示例图二

创建一个UIView–BackView,用来绘制深黑色背景图

• BackView.m

#import "BackView.h"

@implementation BackView

- (void)drawRect:(CGRect)rect {
    //绘制一个背景图
    UIImage * image = [UIImage imageNamed:@"Home_refresh_bg"];

    [image drawInRect:rect];



}

再创建一个UIView –LockView,用来添加按钮、绘制曲线, 我都是在storyBoard中拖入的

• LockView.m

#import "LockView.h"

@interface LockView()

@property(nonatomic,assign)CGPoint curP;

/**选中的按钮的数组*/
@property(nonatomic,strong)NSMutableArray * selectedBtnArr;

@end

@implementation LockView

-(NSMutableArray *)selectedBtnArr
{
    if (_selectedBtnArr == nil) {
        _selectedBtnArr = [NSMutableArray array];
    }
    return _selectedBtnArr;
}



//storyBoard拖过来的pan手势
-(IBAction)pan:(UIPanGestureRecognizer*)pan
{
    //当前触摸点
    _curP = [pan locationInView:self];

    //判断触摸点在不在按钮上
    for (UIButton * btn in self.subviews) {
        if (CGRectContainsPoint(btn.frame, self.curP) && btn.selected == NO) {

            btn.selected = YES;

            //保存到数组中
            [self.selectedBtnArr addObject:btn];
        }


    }

    //重绘
    [self setNeedsDisplay];

    if (pan.state == UIGestureRecognizerStateEnded) {
        //创建可变字符串
        NSMutableString * strM = [NSMutableString string];
        //保存输入密码
        for (UIButton * btn in self.selectedBtnArr) {

            //取消所有按钮的选中
            btn.selected = NO;

            //拼接密码
            [strM appendFormat:@"%ld",btn.tag];

        }
        //打印密码
        NSLog(@"密码： %@",strM);

        //清除划线，把选中按钮清空
        [self.selectedBtnArr removeAllObjects];

    }
}


-(void)awakeFromNib
{
    [super awakeFromNib];

    //创建9个按钮
    for (int i = 0; i < 9; i++) {
        UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
        //关闭交互，防止高亮
        btn.userInteractionEnabled = NO;
        //设置图片
        [btn setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
        [btn setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
        //设置tag值
        btn.tag = i;

        [self addSubview:btn];
    }
}

//布局9个按钮
-(void)layoutSubviews

{
    [super layoutSubviews];

    NSUInteger count = self.subviews.count;
    //总列数
    int cols = 3;

    CGFloat x = 0;
    CGFloat y = 0;
    CGFloat w = 74;
    CGFloat h = 74;
    CGFloat margin = (self.bounds.size.width - cols * w) / (cols + 1);

    //第几列
    CGFloat col = 0;
    //第几行
    CGFloat row = 0;


    for (NSUInteger i = 0; i< count; i++) {
        UIButton * btn = self.subviews[i];

        //当前按钮在第几列
        col = i % cols;
        //当前按钮在第几行
        row = i / cols;

        x = margin + col * (margin + w);
        y = row * (margin + w);



        btn.frame = CGRectMake(x, y, w, h);


    }


}




//只要调用这个方法，就会把之前绘制的东西全部清掉，重新绘制
-(void)drawRect:(CGRect)rect
{
    //    NSLog(@"%s",__func__);
    //没有选中按钮就不需要连线
    if (self.selectedBtnArr.count == 0) return;


    //把所有选中按钮中心连线
    UIBezierPath * path = [UIBezierPath bezierPath];

    NSUInteger count = self.selectedBtnArr.count;

    //所有选中选中按钮之间都连好线
    for (int i = 0; i < count; i++) {
        UIButton * btn = self.selectedBtnArr[i];
        if (i == 0) {
            //设置起点
            [path moveToPoint:btn.center];

        }else
        {
            [path addLineToPoint:btn.center];
        }
    }

    //所有触摸点间连线
    [path addLineToPoint:_curP];

    [[UIColor greenColor]set];
    path.lineWidth = 10;
    //线的转折点设置为圆状
    path.lineJoinStyle = kCGLineJoinRound;

    [path stroke];
}






@end

GitHub demo: GestureUnlock