在工作之余学习了ios的手势解锁功能，这个功能现在被广泛用于手机解锁，密码验证，快捷支付等。以下是具体实现，写得不好请多多包涵！
1、效果图：
图片发自简书App
2、实现思路：
我在做任何一个项目的时候，都得先详细分析，把整个逻辑理清楚，一个一个的细节剥离开来，把复杂的逻辑简单化。然后我们需要先看大致的实现过程：
2.1 加载九宫格界面
2.2 实现按钮被点击及滑动过程中按钮状态的改变
2.3 实现滑动过程中的按钮之间的连线
2.4 绘制完毕后生成密码
2.5 把密码传出去
3、代码实现如下
3.1 创建一个数组来保存九宫格的九个按钮，并在该数组的getter方法加载九个按钮
-(NSMutableArray *)btns{
if(_btns==nil)
{
_btns=[NSMutableArray array];
for (int i=0; i<kButtonCount; i++) {
//创建btn
UIButton *btn=[[UIButton alloc] init];
btn.tag=i;
//禁用btn交互
btn.userInteractionEnabled=NO;
// 设置 btn 默认的图片
[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
//设置 btn 点击高亮的图片
[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
//设置 btn 错误的图片
[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateDisabled];
[_btns addObject:btn];
[self addSubview:btn];
}
}
return _btns;
}
3.2 重写layoutSubviews方法，在这里计算九宫格按钮的坐标位置
-(void)layoutSubviews{
[super layoutSubviews];
//计算九宫格位置
CGFloat w = 74;
CGFloat h = w;
int colCount = 3;
CGFloat margin = (self.frame.size.width - 3 * w) / 4;
for (int i = 0; i < self.btns.count; i++) {
CGFloat x = (i % colCount) * (margin + w) + margin;
CGFloat y = (i / colCount) * (margin + w) + margin;
[self.btns[i] setFrame:CGRectMake(x, y, w, h)];
}
}
3.3 手指开始触摸
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch *t=[touches anyObject];
CGPoint p=[t locationInView:self];
for(int i=0;i<self.btns.count;i++){
UIButton *btn= self.btns[i];
// 如果 btn 的 frame 包含 手指的点
if(CGRectContainsPoint(btn.frame, p)){
// 让按钮亮起来
[btn setSelected:YES];
// 判断 如果已经加到了数组当中 那么不再去添加
if(![self.linesBtns containsObject:btn]){
// 添加到需要画线的数组当中
[self.linesBtns addObject:btn];
}
}
}
}
3.4 手指滑动
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch *t=[touches anyObject];
CGPoint p=[t locationInView:self];
//记录移动过程中手指的位置
self.currentPoint=p;
for(int i=0;i<self.btns.count;i++){
UIButton *btn= self.btns[i];
// 如果 btn 的 frame 包含 手指的点
if(CGRectContainsPoint(btn.frame, p)){
// 让按钮亮起来
[btn setSelected:YES];
// 判断 如果已经加到了数组当中 那么不再去添加
if(![self.linesBtns containsObject:btn]){
// 添加到需要画线的数组当中
[self.linesBtns addObject:btn];
}
}
}
//重绘
[self setNeedsDisplay];
}
3.5 手指抬起
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//修正最后手指松开后多画出来的一条线
self.currentPoint=[[self.linesBtns lastObject] center];
//重绘
[self setNeedsDisplay];
//拼接密码
NSString *password=@"";
for (int i=0;i<self.linesBtns.count;i++) {
UIButton *btn= self.linesBtns[i];
password=[password stringByAppendingString:[NSString stringWithFormat:@"%ld",btn.tag]];
}
//把用户选择的密码传出去
if(self.passwordBlock){
if(self.passwordBlock(password)){
NSLog(@"zhengque");
}else{
NSLog(@"cuowu");
// 所有需要画线的 btn 都变成错误的样式
for (int i=0;i<self.linesBtns.count;i++) {
UIButton *btn= self.linesBtns[i];
[btn setEnabled:NO];
[btn setSelected:NO];
}
}
}
//禁用按钮交互
self.userInteractionEnabled=NO;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
//清空
[self clean];
//恢复按钮交互
self.userInteractionEnabled=YES;
});
}
3.6 让按钮恢复到初始状态
-(void)clean{
for (int i=0;i<self.btns.count;i++) {
UIButton *btn= self.btns[i];
[btn setEnabled:YES];
[btn setSelected:NO];
}
[self.linesBtns removeAllObjects];
[self setNeedsDisplay];
}
3.7 drawRect方法
- (void)drawRect:(CGRect)rect {
if(!self.linesBtns.count){
return;
}
// Drawing code
UIBezierPath *path=[[UIBezierPath alloc] init];
for(int i=0;i<self.linesBtns.count;i++){
UIButton *btn= self.linesBtns[i];
// 如果 是第一个按钮 那么设置为起点
if(i==0){
[path moveToPoint:btn.center];
}else{
[path addLineToPoint:btn.center];
}
}
// 连线到手指的位置
[path addLineToPoint:self.currentPoint];
[path setLineWidth:10];
[path setLineCapStyle:kCGLineCapRound];
[path setLineJoinStyle:kCGLineJoinRound];
[[UIColor whiteColor] set];
[path stroke];
}
好了，一个简单的手势密码功能就这样子实现了，demo地址请戳这里:https://github.com/belong571/HandGestureUnlock
