手势解锁（Quartz2D）

效果图.png

1、实现

• 1.自定义解锁视图LockView

#import <UIKit/UIKit.h>
@interface LockView : UIView

@end

// .m文件实现
#import "LockView.h"

#define kColsCount 3
#define kBtnCount 9
#define kMargin 20


@interface LockView ()

@property (nonatomic, strong) NSMutableArray *selectedBtns; // 记录当前所有选中的按钮

@property (nonatomic, assign) CGPoint currentPoint; // 当前选中按钮的Point

@end

@implementation LockView

- (void)drawRect:(CGRect)rect{
    
    if (_selectedBtns.count <= 0) {
        return;
    }

    UIBezierPath *path = [[UIBezierPath alloc] init];

    for (int i = 0; i< self.selectedBtns.count; i++) {
        UIButton *btn = self.selectedBtns[i];
        if (i == 0) {
            [path moveToPoint:btn.center];
        }else{
            [path addLineToPoint:btn.center];
        }
    }
    
    path.lineWidth = 15;
    path.lineJoinStyle = kCGLineCapRound;
    
    // 我在绘画结束后，将属性currentPoint设为CGPointZero了，因为如果如果在距前一个选中点绘画过程中，并没有连接下一个点，改线段不应该绘画
    if (self.currentPoint.x != CGPointZero.x && self.currentPoint.y != CGPointZero.y) {
        [path addLineToPoint:self.currentPoint];
    }

    [[UIColor greenColor] set];

    [path stroke];
}


/**
 *  懒加载
 *
 *  @return 返回当前选中按钮
 */
- (NSArray *)selectedBtns{
    
    if (_selectedBtns == nil) {
        _selectedBtns = [NSMutableArray array];
    }
    return _selectedBtns;
}


/**
 *  添加所有子控件按钮
 */
- (void)addAllButtons{
    
    for (int i = 0; i<kBtnCount; i++) {

        UIButton *btn = [[UIButton alloc] init];
        btn.tag = i;
        
        UIImage *imageNormal = [UIImage imageNamed:@"gesture_node_normal"];
        
         btn.adjustsImageWhenHighlighted = NO; // 去除高亮调整图片
        [btn setImage:imageNormal forState:UIControlStateNormal];
        [btn setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];

        /*
        // 使用按钮点击时间，点击下去是鼠标抬起才会设置选中，但是不符合我的要求，我要的是鼠标进过就选中，所有就需要在视图上看如果经过按钮区域就选中即可。
        [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown];
         */
        
        btn.userInteractionEnabled = NO; // 设置按钮不能用户交互，然后在touchMoved方法中判断按钮选中状态
        
        [self addSubview:btn];
    }
}


//- (void)btnClick:(UIButton *)btn{
//    btn.selected = YES;
//}

/**
 *  布局子控件
 */
- (void)layoutSubviews{
    
    [super layoutSubviews];
    
    CGFloat w = (self.frame.size.width - (kColsCount+1)*kMargin) / kColsCount;
    CGFloat h = w;
    CGFloat btnW = 74;
    CGFloat btnH = 74;
    CGFloat x = 0.0;
    CGFloat y = 0.0;

    for (int i = 0; i<self.subviews.count; i++) {
        
        int col = i % kColsCount;
        int row = i / kColsCount;

        x = (kMargin + w) * col + kMargin;
        y = (h + kMargin) * row + kMargin;
        
        UIButton *btn = self.subviews[i];
        btn.frame = CGRectMake(x, y, btnW, btnH);
    }
}


/**
 *  initWithFrame:添加子控件
 */
- (nonnull instancetype)initWithFrame:(CGRect)frame{
    
    if (self = [super initWithFrame:frame]) {
        [self addAllButtons]; // 添加子控件
    }
    return self;
}


// xib加载完调用，添加子控件
- (void)awakeFromNib{
    [self addAllButtons]; // 添加子控件
}

// 在移动中，判断点是否在按钮上，在，选中按钮，并将其添加到选中按钮的数组中记录下来.
- (void)touchesMoved:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{
    
    UITouch *touch = [touches anyObject];
    
    
    
    CGPoint curP = [touch locationInView:self];
    
    _currentPoint = curP;
    
    // 转换点到按钮相对
    for (UIButton *btn in self.subviews) {
        CGPoint point = [self convertPoint:curP toView:btn];
       BOOL isContainP = [btn pointInside:point withEvent:event];
        
        if (isContainP && btn.selected == NO) {
            btn.selected = YES;
            
            [self.selectedBtns addObject:btn];
        }

    }
    
    // 重绘
    [self setNeedsDisplay];
}

- (void)touchesEnded:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{
    
     // 绘画结束，将属性currentPoint设为CGPointZero了，因为如果如果在距前一个选中点绘画过程中，并没有连接下一个点，改线段不应该绘画
    _currentPoint = CGPointZero;
    [self setNeedsDisplay];
}
@end

• 2.布局解锁视图，在控制器的view中，拖拽一个view控件，然后修改custom Class 为 LockView，运行就可以看见解锁视图效果了