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