iOS_39_触摸解锁

终于效果图:

控制器:

//
//  BeyondViewController.m
//  39_触摸解锁
//
//  Created by beyond on 14-9-17.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//

#import "BeyondViewController.h"
#import "LockView.h"
#import "LockViewDelegate.h"

// 遵守协议,用于获知,用户在LockView上画的解锁路径
@interface BeyondViewController ()<LockViewDelegate>

@end

@implementation BeyondViewController


#pragma mark - LockView代理方法
// 用于获知,用户在LockView上画的解锁路径
- (void)lockView:(LockView *)lockView didFinishPath:(NSString *)path
{
    [MBProgressHUD showSuccess:path];
    NSLog(@"获得用户的手势路径:%@", path);
}

@end<span style="font-family:Courier New;color:#393939;"><span style="font-size: 24px; line-height: 26px; background-color: rgb(245, 245, 245);"><strong>
</strong></span></span>

自己定义CircleButton

//
//  Circle.m
//  39_触摸解锁
//
//  Created by beyond on 14-9-17.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//

#import "Circle.h"

@implementation Circle

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 自己定义方法,初始化
        [self setup];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        // 自己定义方法,初始化
        [self setup];
    }
    return self;
}

// 自己定义方法,初始化
- (void)setup
{
    // 设置button不可用(不可点击)
    self.userInteractionEnabled = NO;
    
    // 设置默认的背景图片
    [self setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
    
    // 设置选中时的背景图片(selected)
    [self setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
}

@end

LockView定义的协议

//
//  LockViewDelegate.h
//  39_触摸解锁
//
//  Created by beyond on 14-9-17.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//  自己定义的LockView的代理必需 遵守的协议

#import <Foundation/Foundation.h>

@class LockView;

@protocol LockViewDelegate <NSObject>


@optional
// 锁屏手势绘制完毕时,调用本方法,通知外界
- (void)lockView:(LockView *)lockView didFinishPath:(NSString *)path;

@end

核心代码,自己定义的LockView

//
//  LockView.h
//  39_触摸解锁
//
//  Created by beyond on 14-9-17.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//

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

// 代理,为当前控制器,目的是,解锁手势绘制完毕后,通知它
@property (nonatomic, weak) IBOutlet id<LockViewDelegate> delegate;

@end

//
//  LockView.m
//  39_触摸解锁
//
//  Created by beyond on 14-9-17.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//  重点,核心~~~

#import "LockView.h"
#import "Circle.h"
#import "LockViewDelegate.h"


@interface LockView()
// 数组,记住全部的touchMove经过的circle
@property (nonatomic, strong) NSMutableArray *circleArr;
// 手指一直与屏幕保持触摸的点,活动的点,用于绘制最后一个circle的中心到 用户触摸点的线段
@property (nonatomic, assign) CGPoint activePoint;
@end


@implementation LockView


#pragma mark - 懒载入
// 数组,记住全部的touchMove经过的circle
- (NSMutableArray *)circleArr
{
    if (_circleArr == nil) {
        _circleArr = [NSMutableArray array];
    }
    return _circleArr;
}
#pragma mark - 初始化
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 调用自己定义方法,一次性加入全部的button
        [self addAllCircles];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]){
        // 调用自己定义方法,一次性加入全部的button
        [self addAllCircles];
    }
    return self;
}
// 调用自己定义方法,一次性加入全部的button
- (void)addAllCircles
{
    for (int index = 0; index<9; index++) {
        // 创建自己定义button,绑定tag目的是,将来用于验证锁的顺序
        Circle *btn = [Circle buttonWithType:UIButtonTypeCustom];
        btn.tag = index;
        // 加入button
        [self addSubview:btn];
    }
}
#pragma mark - 父类方法
// 每加入一个circle,就调整一下全部子控件的frame
- (void)layoutSubviews
{
    // 必须先调用父类的方法
    [super layoutSubviews];
    // 遍历全部的子button,又一次调整frame
    for (int i = 0; i<self.subviews.count; i++) {
        // 取出button
        Circle *btn = self.subviews[i];
        
        // 设置frame
        CGFloat btnW = 74;
        CGFloat btnH = 74;
        // 共三列
        int totalColumns = 3;
        // 第i个button 所在的列
        int col = i % totalColumns;
        // 第i个button 所在的行
        int row = i / totalColumns;
        // 间距均分
        CGFloat marginX = (self.frame.size.width - totalColumns * btnW) / (totalColumns + 1);
        CGFloat marginY = marginX;
        // 设置frame
        CGFloat btnX = marginX + col * (btnW + marginX);
        CGFloat btnY = row * (btnH + marginY);
        btn.frame = CGRectMake(btnX, btnY, btnW, btnH);
    }
}

#pragma mark - 触摸方法
// 手指按下
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.必须先清空上一次(手指与屏幕一直接触的点)
    self.activePoint = CGPointZero;
    
    // 2.调用自己定义方法,获得触摸開始的这个点
    CGPoint startPoint = [self pointWithTouches:touches];
    
    // 3.调用自己定义方法,获得触摸到的button(假设有的话)
    Circle *btn = [self buttonWithPoint:startPoint];
    
    // 4.设置该被触摸到的button的状态(假设有)
    if (btn && btn.selected == NO) {
        btn.selected = YES;
        // button数组中没有,才要加入到对象数组
        [self.circleArr addObject:btn];
    }
    
    // 5.刷新界面,以下方法会自己主动调用drawRect
    [self setNeedsDisplay];
}
// 手指移动(调用频率相当高)
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.调用自己定义方法,获得触摸过程中的点
    CGPoint pos = [self pointWithTouches:touches];
    
    // 2.调用自己定义方法,获得触摸移动时碰到的button(假设有的话)
    Circle *btn = [self buttonWithPoint:pos];
    
    // 3.设置该被触摸移动时碰到的button的状态(假设有)
    if (btn && btn.selected == NO) {
        // 摸到了button
        btn.selected = YES;
        // button数组中没有,才要加入到对象数组
        [self.circleArr addObject:btn];
    } else {
        // 没有摸到button,就更新activePoint的位置,以便drawRect
        self.activePoint = pos;
    }
    // 4.刷新界面,以下方法会自己主动调用drawRect
    [self setNeedsDisplay];
}
// 触摸结束(手抬起了),通知代理,
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.通知代理
    if ([self.delegate respondsToSelector:@selector(lockView:didFinishPath:)]) {
        NSMutableString *path = [NSMutableString string];
        for (Circle *btn in self.circleArr) {
            // tag此时,起到关键作用
            [path appendFormat:@"%d", btn.tag];
        }
        [self.delegate lockView:self didFinishPath:path];
    }
    // 2.可有可无,清空全部的button选中状态(恢复原样)
    [self.circleArr makeObjectsPerformSelector:@selector(setSelected:) withObject:@(NO)];
    
    // 3.清空选中的button对象数组(为下一次手指按下做准备)
    [self.circleArr removeAllObjects];
    // 4.刷新界面,以下方法会自己主动调用drawRect
    [self setNeedsDisplay];
}
// 触摸被打断(相似结束)
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self touchesEnded:touches withEvent:event];
}

#pragma mark - 抽取的自己定义方法
// 自己定义方法,依据touches集合获得相应的触摸点位置坐标
- (CGPoint)pointWithTouches:(NSSet *)touches
{
    UITouch *touch = [touches anyObject];
    // 返回手指触摸点在相应view中的坐标
    return [touch locationInView:touch.view];
}

// 自己定义方法,依据触摸点位置坐标,遍历全部button,获得被碰手指到的button(假设有)
- (Circle *)buttonWithPoint:(CGPoint)point
{
    for (Circle *btn in self.subviews) {
        //        CGFloat wh = 24;
        //        CGFloat frameX = btn.center.x - wh * 0.5;
        //        CGFloat frameY = btn.center.y - wh * 0.5;
        //        if (CGRectContainsPoint(CGRectMake(frameX, frameY, wh, wh), point)) {
        if (CGRectContainsPoint(btn.frame, point)) {
            return btn;
        }
    }
    
    return nil;
}


#pragma mark - 核心~画图
// 最后一步
- (void)drawRect:(CGRect)rect
{
    // 假设没有碰到不论什么button,直接返回,不用绘线
    if (self.circleArr.count == 0) return;
    
    // 1.開始一个贝塞尔路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    // 2.遍历全部的button,将碰到的button的中心加入到路径中
    for (int i = 0; i<self.circleArr.count; i++) {
        Circle *btn = self.circleArr[i];
        if (i == 0) {
            // 设置路径起点
            [path moveToPoint:btn.center];
        } else {
            // 加入到路径
            [path addLineToPoint:btn.center];
        }
    }
    
    // 3.连接最后一条,即最后一个碰到的button中心 至 activePoint
    if (CGPointEqualToPoint(self.activePoint, CGPointZero) == NO) {
        // 必须先进行检測
        [path addLineToPoint:self.activePoint];
    }
    
    // 4.设置画图属性
    path.lineWidth = 8;
    // 圆接头
    path.lineJoinStyle = kCGLineJoinBevel;
    // 线条天蓝色
    [[UIColor colorWithRed:32/255.0 green:210/255.0 blue:254/255.0 alpha:0.5] set];
    // 5.闭合贝塞尔路径
    [path stroke];
}

@end

storyboard