UI进阶--Quartz2D和触摸事件的简单使用：手势解锁

需求：实现一个简易的手势解锁应用，具体效果如下图所示：

实现步骤：

1、代码创建界面，自定义一个view，设置view的背景，颜色等属性；

2、在自定义的view中，定义2个属性，一个是存储被选中按钮的可变数组，另外一个是最后的触摸点(CGPoint);

3、重写initWithFrame方法，在这里，自定义一个方法给initWithFrame方法调用即可，这个自定义的方法里，初始化9个按钮，设置每个按钮的tag，正常状态下的图片以及选中状态的图片，并设置和用户的交互为NO；

4、在自定义的view中的layoutSubviews方法中，自定义9个按钮；

5、在touchesBegan:和touchesMoved:方法中，判断触摸点是否在view上的9个按钮中，如果在，那么设置按钮的选中状态；(在这里，只写其中一个方法即可，另外一个方法直接调用)

5.1、进行遍历，并把选中的按钮放在选中按钮的可变数组中，并记录最后的触摸点；

5.2、在最后记得重绘图形，调用setNeedsDisplay方法;

6、在drawRect:方法中，绘制选中按钮之间的连线；

6.1、遍历选中按钮数组，得到选中按钮的数量，如果为0，直接返回；

6.2、使用UIBezierPath画线；

6.3、对绘制的线进行线宽，颜色、样式等设置

6.4、对绘制的线进行渲染；

7、在touchesEnded:方法中取消连线，并移除选中的按钮，最后重绘图形；

8、选择完密码后，把密码传回给控制器，让控制器判断选择是否正确；

8.1、在自定义的view中设置代理；

8.2、在touchesEnded:方法中拼接选中按钮的索引；

8.3、通知代理按钮的选择；

具体实现代码：

 

Controller:

//
//  ViewController.m
//  1-4-Deblocking
//
//  Created by xiaomoge on 15/1/4.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import "ViewController.h"
#import "DeblockingView.h"
@interface ViewController () <DeblockingViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //设置背景颜色
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Home_refresh_bg"]];
    //取得当前屏幕的宽度
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    //初始化一个DeblockingView
    DeblockingView *deblockingView = [[DeblockingView alloc] initWithFrame:CGRectMake(0, 0, screenW, screenW)];
    //设置背景颜色
    deblockingView.backgroundColor = [UIColor clearColor];
   //居中显示
    deblockingView.center = self.view.center;
   //设置代理
    deblockingView.delegate = self;
    [self.view addSubview:deblockingView];
}
#pragma mark - DeblockingViewDelegate方法
- (void)selectBtn:(DeblockingView *)deblockingView andSelectPwd:(NSString *)pwd {
    NSString *tips;
    if ([pwd isEqualToString:@"03478"]) {//设置一个固定的密码
        tips = @"解锁成功";
    }else {
        tips = @"密码错误";
    }
    //弹出窗口提示
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:tips delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [alert show];
}
@end

View:

//
//  DeblockingView.h
//  1-4-Deblocking
//
//  Created by xiaomoge on 15/1/4.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import <UIKit/UIKit.h>
@class DeblockingView;
@protocol DeblockingViewDelegate <NSObject>
@optional
- (void)selectBtn:(DeblockingView *)deblockingView andSelectPwd:(NSString *)pwd;

@end
@interface DeblockingView : UIView
@property (nonatomic,assign) id<DeblockingViewDelegate> delegate;
@end

//
//  DeblockingView.m
//  1-4-Deblocking
//
//  Created by xiaomoge on 15/1/4.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import "DeblockingView.h"
@interface DeblockingView ()
/*
 选中的按钮数组
 */
@property (nonatomic,strong) NSMutableArray *selectedBtns;
/*
 最后触摸到的点
 */
@property (nonatomic,assign) CGPoint lastPoint;
@end
@implementation DeblockingView
//懒加载
- (NSMutableArray *)selectedBtns {
    if (!_selectedBtns) {
        _selectedBtns = [NSMutableArray array];
    }
    return _selectedBtns;
}
//绘制选中按钮间的连线
- (void)drawRect:(CGRect)rect {
    //取得当前选中的按钮的个数
    NSInteger selectBtnCount = self.selectedBtns.count;
    //如果被选中的按钮个数为0，即返回。
    if (selectBtnCount == 0) return;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    for (NSInteger i = 0; i < selectBtnCount; i++) {
        //取得按钮先连接的点
        CGPoint btnCenter = [self.selectedBtns[i] center];
        if (i == 0) {//设置为起点
            [path moveToPoint:btnCenter];
        }else {//设置为连接点
            [path addLineToPoint:btnCenter];
        }
    }
    //如果最后有未选中按钮的连线点
    [path addLineToPoint:self.lastPoint];
    //设置连线的宽度
    path.lineWidth = 8;
    //设置连线的头尾样式
    path.lineCapStyle = kCGLineCapRound;
    //设置连线的连接点样式
    path.lineJoinStyle = kCGLineJoinRound;
    //设置连线的颜色
    [[UIColor greenColor] set];
    //渲染
    [path stroke];
}
//加载完view后会调用这个方法
- (void)layoutSubviews {
    [super layoutSubviews];//别忘记要写父类的方法
    //取得按钮的数量
    NSInteger btnCount = self.subviews.count;
    //设置按钮的宽度
    CGFloat btnW = 74;
    //设置按钮的高度
    CGFloat btnH = 74;
    //设置按钮间的间距
    CGFloat margin = (self.bounds.size.width - 3 * btnW) / 4;
    for (int i = 0; i < btnCount; i++) {
        //取得一个按钮
        UIButton *btn = self.subviews[i];
        //获得当前的行号
        int row = i / 3;
        //获得当前列号
        int culomns = i % 3;
        //设置按钮的X(可参考应用管理中的计算)
        CGFloat btnX = margin + culomns * (margin + btnW);
        //设置按钮的Y
        CGFloat btnY = margin + row * (margin + btnH);
        btn.frame = CGRectMake(btnX, btnY, btnW, btnH);
    }
}
//初始化方法
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setBtns];
    }
    return self;
}
//设置9个按钮
- (void)setBtns {
    for (int i = 0; i < 9; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.tag = i;
        //设置按钮正常状态下的图片
        [btn setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
        //设置按钮被选中时的图片
        [btn setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
        //取消与用户的交互
        btn.userInteractionEnabled = NO;
        [self addSubview:btn];
    }
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [self touchesMoved:touches withEvent:event];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    //获取当前触摸点
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:touch.view];
    
    for (UIButton *btn in self.subviews) {
        if (CGRectContainsPoint(btn.frame, touchPoint)) {//判断触摸点是否在按钮的范围内
            if (btn.selected == NO) {//在按钮范围内，并且为未选中状态时
                [self.selectedBtns addObject:btn];//加进选中按钮的数组
            }
            btn.selected = YES;
        }else {//否则设置这个点为最后的触摸点
            self.lastPoint = touchPoint;
        }
    }
    //重绘
    [self setNeedsDisplay];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    //拼接选中按钮的tag作为密码
    NSMutableString *pwd = [NSMutableString string];
    for (UIButton *btn in self.selectedBtns) {
        [pwd appendFormat:@"%ld",btn.tag];
    }
    //如果代理实现了方法，通知代理对象
    if ([self.delegate respondsToSelector:@selector(selectBtn:andSelectPwd:)]) {
        [self.delegate selectBtn:self andSelectPwd:pwd];
    }
    //设置所有被选中的按钮为未选中状态
    [self.selectedBtns makeObjectsPerformSelector:@selector(setSelected:) withObject:@NO];
    //移除所有被选中的按钮
    [self.selectedBtns removeAllObjects];
    //重绘
    [self setNeedsDisplay];
}
@end

最后的效果图：