iOS 九宫格解锁源码

效果图

项目源码:https://github.com/JiaKeli/IOS/tree/master/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E8%A7%A3%E9%94%81

布局:北京是一个imageview 中间是一个view 连接自定义LockView

实现思路:
1:添加9个button
2:监听触摸事件 如果触摸点在button上则设置button的selected = yes
3:把触摸过程中的button添加到集合
4:绘制线条

此view未做成功处理,自己可根据数据集合来进行判断进行下一步

代码:

#import "LockView.h"

@interface LockView()

@property (nonatomic,strong) NSMutableArray *btns;
@property (nonatomic,assign) CGPoint moveP;

@end

@implementation LockView

- (NSMutableArray *)btns{
    if (_btns == nil) {
        _btns = [NSMutableArray array];
    }
    return _btns;
}

//解析xib的时候调用
- (id)initWithCoder:(NSCoder *)aDecoder{
    if (self = [super initWithCoder:aDecoder]) {
        // 添加按钮
        [self addBtns];
        
    }
    return self;
}

//添加按钮
- (void)addBtns{
    for (int i = 0; i < 9; i++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        //设置button图片
        [button setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
        //设置按钮不可交互
        button.userInteractionEnabled = NO;
        [self addSubview:button];
    }
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    //当前触摸点
    CGPoint point = [self pointWithTouches:touches];
    //获取触摸的按钮
    UIButton *button = [self buttonWithPoint:point];
    //设置按钮状态
    if (button && button.selected == NO) {
        button.selected = YES;
        [self.btns addObject:button];
    }
}
//手指移动
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    //当前触摸点
    CGPoint pos = [self pointWithTouches:touches];
    self.moveP = pos;
    //获取触摸按钮
    UIButton *btn = [self buttonWithPoint:pos];
    if (btn.selected == NO && btn) {
        btn.selected = YES;
        [self.btns addObject:btn];
    }
    //重绘
    [self setNeedsDisplay];
}
//手指抬起取消选择  路径取消
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    //取消所有按钮选中
    [self.btns makeObjectsPerformSelector:@selector(setSelected:) withObject:@NO];
    [self.btns removeAllObjects];
    [self setNeedsDisplay];
}
//获取触摸点
- (CGPoint)pointWithTouches:(NSSet *)touches{
    UITouch *touch = [touches anyObject];
    return [touch locationInView:self];
}
//获取触摸按钮
- (UIButton *)buttonWithPoint:(CGPoint)point{
    //设置当线条滑动到btn中心时返回btn
    CGFloat width = 30;
    for (UIButton *button in self.subviews) {
        CGFloat x = button.center.x - width * 0.5;
        CGFloat y = button.center.y - width * 0.5;
        CGRect frame = CGRectMake(x, y, width, width);
        if (CGRectContainsPoint(frame, point)) {
            return button;
        }
    }
    return nil;
}
//设置按钮frame
- (void)layoutSubviews{
    [super layoutSubviews];
    
    CGFloat col = 0;
    CGFloat row = 0;
    
    CGFloat btnW = 74;
    CGFloat btnH = 74;
    CGFloat btnX = 0;
    CGFloat btnY = 0;
    
    int tolCol = 3;
    CGFloat margin = (self.bounds.size.width - tolCol * btnW) / (tolCol + 1);
    //给按钮设置位置
    for (int i = 0; i < self.subviews.count; i++) {
        UIButton *button = self.subviews[i];
        
        col = i % tolCol;
        row = i / tolCol;
        btnX = margin + (margin + btnW) * col;
        btnY = (margin + btnH) * row;
        
        button.frame = CGRectMake(btnX, btnY, btnW, btnH);
    }
}

- (void)drawRect:(CGRect)rect{
    UIBezierPath *path = [UIBezierPath bezierPath];
    for (int i = 0; i < self.btns.count; i++) {
        UIButton *btn = self.btns[i];
        if (i == 0) {
            [path moveToPoint:btn.center];
        }else{
            [path addLineToPoint:btn.center];
        }
    }
    //所有选中的按钮之间都连线
    //连接多余的那跟线
    [path addLineToPoint:_moveP];
    
    [[UIColor greenColor]set];
    path.lineWidth = 8;
    path.lineJoinStyle = kCGLineJoinRound;
    //渲染到视图
    [path stroke];
}

@end