十三 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