自定义手势解锁锁控件

一、控件的使用

模仿市面上app的手势解锁功能，实现的小控件，将控件封装到了一个UIView上



二、核心原理技术

1、触摸事件

（1）UIView的触摸三个触摸响应事件：开始、移动、结束

（2）CGRectContainsPoint 判断触摸点的位置

2、Quartz2D绘图

（1）drawRect 的重绘

（2）UIBezierPath 贝塞尔曲线

3、block成功和失败的回调

三、实现思路

1、解锁键盘中的9个小图标，会根据验证过程而变化颜色，所以考虑用UIButton实现，因为UIButton可以根据设置不同状态，而获得不同的图片。按钮本身不需要点击事件的实现。

2、触摸过程中，实现触摸事件的三个方法：

（1）在开始时判断触摸点是否在某个按钮上，进而改变按钮的状态，从而实现“点亮”。

（2）建立数组，记录每一个被“点亮”的按钮

（3）按照按钮的中心点绘制连线

（4）移动过程中，继续“点亮”按钮并记录

（5）触摸结束，进行逻辑判断，是否解锁成功，解锁密码用按钮的tag拼接（整数串）。根据成功与否，更改界面上按钮的状态，然后再重绘

（6）进行成功或失败的回调

四、源码

1、.h文件

@interface ZQGestureUnlockView : UIView

/**
*  实例化解锁键盘，宽高320*320，9个按钮，背景黑
*
*  @param frame    x,y可用
*  @param password 输入密码由1~9的数组组成的字符串，不可重复
*  @param success  解锁成功的回调
*  @param fail     解锁失败的回调
*
*  @return 返回手势锁键盘
*/
+(instancetype)unlockWithFrame:(CGRect)frame Password:(NSString *)password successBlock:(void(^)())success failBlock:(void(^)())fail;

@end

2、宏定义及私有变量定义

//按钮显示列数
#define col 3

//按钮总数
#define sum 9

//按钮的宽高
#define iconWH 80

//默认状态下连线的颜色
#define ZQLineColor [UIColor colorWithRed:0.0 green:170/255.0 blue:255/255.0 alpha:0.5]

@interface ZQGestureUnlockView ()

//记录选中的按钮
@property(nonatomic,strong) NSMutableArray * clickBtnArray;

//记录连线的颜色
@property(nonatomic,strong) UIColor * lineColor;

//记录时刻的触摸点坐标，时刻是最新的点
@property(nonatomic,assign) CGPoint currentPoint;

//用户指定的密码
@property(nonatomic,copy) NSString * password;

//成功回调的block
@property(nonatomic,copy) void(^success)();

//失败回调 block
@property(nonatomic,copy) void(^fail)();

@end

3、.m文件中的方法实现

//初始化方法
+(instancetype)unlockWithFrame:(CGRect)frame Password:(NSString *)password successBlock:(void(^)())success failBlock:(void(^)())fail{
ZQGestureUnlockView * mainView = [[self alloc]init];
mainView.frame = CGRectMake(frame.origin.x, frame.origin.y, 320, 320);
mainView.password = password;
mainView.success = success;
mainView.fail = fail;

//生成按钮
[mainView setupButtons];
return mainView;
}

//生成按钮
-(void)setupButtons
{
//生成按钮
for (int i = 1; i<sum+1; i++) {
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateHighlighted];
[button setImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateDisabled];

//增加按钮的tag
button.tag = i ;
//初始状态，让按钮不可交互，按钮就是显示用的，没有点击事件
button.userInteractionEnabled=NO;
[self addSubview:button];
}

//记录一下默认的线的颜色
self.lineColor = ZQLineColor;

//设置透明
self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg"]];
}

//布局子控件
-(void)layoutSubviews
{
[super layoutSubviews];

CGFloat margin = (self.frame.size.width - col*iconWH)/2;

[self.subviews enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

CGFloat x= idx%col *(iconWH + margin);

CGFloat y= idx/col * (iconWH +margin);

obj.frame=CGRectMake(x, y, iconWH, iconWH);
}];

}

#pragma mark - 触摸开始，记录开始的点
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

UITouch * touch = touches.anyObject;
CGPoint startPoint = [touch locationInView:self];

//遍历所有按钮，判断触摸的位置是否在button范围内
[self.subviews enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

BOOL isContain = CGRectContainsPoint(obj.frame, startPoint);

//如果在某个按钮范围内，同时这个按钮没有被点亮
if (isContain && obj.highlighted==NO) {

//改变按钮状态为高亮
obj.highlighted = YES;

//将这个按钮记录到“选中按钮标记数组”
[self.clickBtnArray addObject:obj];
}
//如果不在某个按钮内，那么把这个按钮设置为不高亮（不管它是否原来是高亮状态）
else
{
obj.highlighted=NO;
}
}];

//保存此刻的坐标，用于绘制连线
self.currentPoint = startPoint;
}

#pragma mark - 触摸移动，同样判断按钮的位置
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

UITouch * touch = touches.anyObject;

CGPoint movePoint = [touch locationInView:self];

//判断触摸move的位置是否在button范围内,遍历所有按钮
[self.subviews enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

BOOL isContain = CGRectContainsPoint(obj.frame, movePoint);

//如果触摸范围在某个按钮上，并且该按钮没有被点亮
if (isContain && obj.highlighted==NO) {
obj.highlighted = YES;
[self.clickBtnArray addObject:obj];
}
}];

//保存此刻的坐标
self.currentPoint = movePoint;
//调用view重绘，绘制连线
[self setNeedsDisplay];
}

#pragma mark - 触摸结束，进行逻辑判断，重绘连线，显示判断后的连线状态
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

//拼装用户手势结束后的密码
NSMutableString * passWordString =[NSMutableString string];
[self.clickBtnArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
//合成密码
[passWordString appendFormat:@"%ld",obj.tag];

}];

//证明密码正确
if ([passWordString isEqualToString:self.password]) {

//加延迟，是为了密码正确后给一个短暂的停顿
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

//先把按钮取消高亮
[self.clickBtnArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

obj.highlighted=NO;
}];

//再把数组清空
[self.clickBtnArray removeAllObjects];
//最后重绘
[self setNeedsDisplay];

});

//执行验证成功的回调

self.success();

}
//密码错误
else
{
//首先关闭view交互,避免错误操作
self.userInteractionEnabled=NO;

//先把按钮高亮去掉，设置成enabled状态，然后把连线变红
[self.clickBtnArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

obj.enabled=NO;
obj.highlighted=NO;
}];

self.lineColor = [UIColor redColor];
[self setNeedsDisplay];

//延迟一下再清除
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

//先把按钮enable
[self.clickBtnArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

obj.enabled=YES;

}];

//再把高亮按钮数组清空
[self.clickBtnArray removeAllObjects];
//重绘
[self setNeedsDisplay];
//最后在开启交互
self.userInteractionEnabled=YES;
//还原默认连线颜色
self.lineColor=ZQLineColor;
});

}

//将currentPoint 设置成和最后的高亮按钮中心一样，这样可以在释放触摸后，连线不显示多余的“尾巴”
UIButton * btn = self.clickBtnArray.lastObject;
self.currentPoint= btn.center;

}

//view的重绘
-(void)drawRect:(CGRect)rect
{

UIBezierPath * path = [UIBezierPath bezierPath];
[self.clickBtnArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

//设置起始点
if (idx==0) {
[path moveToPoint:obj.center];
}
//设置增加点
else
{
[path addLineToPoint:obj.center];

}

}];

//线条颜色、宽
[path setLineWidth:10];
UIColor * color = self.lineColor;
[color setStroke];

//设置连接
[path setLineJoinStyle:kCGLineJoinRound];
[path setLineCapStyle:kCGLineCapRound];

//再添加实时的“线头”
if (self.clickBtnArray!=nil) {
[path addLineToPoint:self.currentPoint];
}

//绘图
[path stroke];
}

//懒加载
-(NSMutableArray *)clickBtnArray
{

if (!_clickBtnArray) {
_clickBtnArray=[NSMutableArray array];
}

return _clickBtnArray;
}

五、扩展

1、解锁键盘的大小可以根据实际情况定义

2、触摸手势的绘制采用的是不可重复的点，这个可以改进

3、不限验证次数

4、本例用于娱乐、学习、交流