iOS 开发实战－锁屏界面（手势解锁）

之前写了一篇关于锁屏的文章，是密码锁屏，可以参照:

该篇是要讲解如何开发手势解锁，完整代码在github上。

关于如何在App后台启动等问题，该篇就不再赘述，之专注于介绍核心的实现部分。源代码在Github上可以获取。

实现思路

手势锁屏是一个3*3的9宫格界面，将每一个宫格用一个Button表示，然后给每一个button附上一个tag，捕捉touch事件，通过判断手势划过哪些button，纪录下tag数值，作为密码。

变量定义

手势锁屏是定义在GuestureView的UIView类中。主要的UI和事件响应都在这个类中完成。

［code］

@interface GuestureView()@property (nonatomic,strong) NSMutableArray * buttonsArray;@property (nonatomic,assign) CGPoint currentPoi;

定义两个变量：

buttonsArray：用来记录划过哪些Button

currentPoi用：来记录当前手指所在的point

UI布局

定义9个UIButton控件

［code］

-(id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        [self configButtons];    }    return self;}-(void)configButtons{        self.buttonsArray = [NSMutableArray array];    for (int i = 0 ; i < 9 ; ++i) {        UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];        btn.tag = i;        btn.userInteractionEnabled = NO;        [self addSubview:btn];        [btn setBackgroundImage:[UIImage imageNamed:@"lock"] forState:UIControlStateNormal];        [btn setBackgroundImage:[UIImage imageNamed:@"unlock"] forState:UIControlStateSelected];    }}-(void)layoutSubviews{    [super layoutSubviews];    for(int i = 0 ; i < [self.subviews count] ; ++i) {        UIButton *btn=self.subviews[i];        CGFloat row = i/3;        CGFloat loc   = i%3;        CGFloat btnW=74;        CGFloat btnH=74;        CGFloat padding=(self.frame.size.width-3*btnW)/4;        CGFloat btnX=padding+(btnW+padding)*loc;        CGFloat btnY=padding+(btnW+padding)*row;        btn.frame=CGRectMake(btnX, btnY, btnW, btnH);    }        //密码提示Label    UILabel * passwordLabel = [[UILabel alloc] init];    passwordLabel.text = @"密码是：L";    passwordLabel.textColor = [UIColor grayColor];    [passwordLabel sizeToFit];    [self addSubview:passwordLabel];    passwordLabel.translatesAutoresizingMaskIntoConstraints = NO;    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-400-[passwordLabel]"                                                                 options:0                                                                 metrics:nil                                                                   views:NSDictionaryOfVariableBindings(passwordLabel)]];}

每个Button都赋给一个tag，且userInteractionEnabled为NO。

Button的frame在layoutSubviews里设置。

手势响应

主要实现三个touch事件：

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event； -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event； -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

这三个事件是手势解锁的核心代码。

［code］

#pragma mark - touch event-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    CGPoint startPoint = [self getCurrentPoint:touches];    UIButton * btn = [self getButtonWithCurrentPoint:startPoint];    if (btn && btn.selected != YES) {        btn.selected = YES;        [self.buttonsArray addObject:btn];    }    self.currentPoi = startPoint;    [self setNeedsDisplay];    }-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{    CGPoint point = [self getCurrentPoint:touches];    UIButton * btn = [self getButtonWithCurrentPoint:point];    if (btn && btn.selected != YES) {        btn.selected = YES;        [self.buttonsArray addObject:btn];    }    [self setNeedsDisplay];    self.currentPoi = point;}-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{    NSMutableString * passWordString = [[NSMutableString alloc] init];    for (UIButton * btn in self.buttonsArray) {        [passWordString appendFormat:@"%ld", (long)btn.tag];    }    NSLog(@"password is %@",passWordString);        [self.buttonsArray makeObjectsPerformSelector:@selector(setSelected:) withObject:@NO];    [self.buttonsArray removeAllObjects];    [self setNeedsDisplay];    self.currentPoi = CGPointZero;        if ([self.delegate respondsToSelector:@selector(unlockFromGuesture:)]) {        if ([passWordString isEqualToString:@"03678"])        {            [self.delegate unlockFromGuesture:YES];        }        else        {            [self.delegate unlockFromGuesture:NO];        }    }}

其中touchedEnded中调用了一个delegate方法，这个方法是为通知superView密码是否正确，然后交给superview来处理。

代码中涉及到两个方法：

//获得当前手指所在point-(CGPoint)getCurrentPoint:(NSSet *)touches//获得该点所在的Button。-(UIButton *)getButtonWithCurrentPoint:(CGPoint)point

［code］

#pragma mark - point event-(CGPoint)getCurrentPoint:(NSSet *)touches{    UITouch * touch = [touches anyObject];    CGPoint point = [touch locationInView:touch.view];    return point;}-(UIButton *)getButtonWithCurrentPoint:(CGPoint)point{    for (UIButton * btn in self.subviews) {        if (CGRectContainsPoint(btn.frame, point)) {            return btn;        }    }    return nil;}

绘图

用Core Graphic实现划线效果。

［code］

- (void)drawRect:(CGRect)rect {    CGContextRef context = UIGraphicsGetCurrentContext();    CGContextClearRect(context, rect);        for (int i = 0; i < self.buttonsArray.count; ++i) {        UIButton * btn = self.buttonsArray[i];        if (0 == i)        {            CGContextMoveToPoint(context, btn.center.x, btn.center.y);        }        else        {            CGContextAddLineToPoint(context, btn.center.x,btn.center.y);        }    }        if (self.buttonsArray.count > 0) {        CGContextAddLineToPoint(context, self.currentPoi.x, self.currentPoi.y);    }        CGContextSetLineWidth(context, 10);    CGContextSetLineJoin(context, kCGLineJoinRound);    CGContextSetLineCap(context, kCGLineCapRound);    CGContextSetRGBStrokeColor(context, 20/255.0, 107/255.0, 153/255.0, 1);    CGContextStrokePath(context);    CGContextSaveGState(context);    CGContextRestoreGState(context);}

该实现放在drawRect方法中，每当调用setNeedsDisplay方法是都会执行drawRect。

如果有任何问题欢迎再下面留言，或者扫描二维码