前言：看了几篇简书，九宫格密码解锁，看着不错，拿来学习一下。
一、实现效果
实现效果
二、手势解锁实现过程
分析：
#1.监听手指在view上的移动，首先肯定需要自定义一个view，重写touch began,touch move等方法，
当手指移动到圈上时，让其变亮。可以通过button按钮来实现。
#2.界面搭建--【九宫格】代码的方式创建9个按钮
1).背景图片
2).九个按钮
（把九个按钮作为一个整体，使用一个大的view来管理这些小的view,这些小的view就是9个button)。
3).新建一个类，对自定义的view进行管理，这个view是从storyboard创建出来的。
会调用aweakFrameNib方法和layoutSubviews方法，前者创造控件，后者，设置按钮frame。
4).监听手指的移动。分析程序，应该监听手指的移动，而不是按钮的点击，当手指移动到按钮的范围内时，让按钮变亮。
（1）重写touchesbegan...方法
1.获取按下的点
2.判断触摸的位置是否在按钮的范围内（使用for循环）
提示： 一个判断点是否在指定范围内的方法——CGRectContainsPoint(,)；
(2)重新touchesmoved...方法
说明：当手指移动到按钮上的时候，按钮变亮，因此需要重写touchesmoved方法。
1.获取触摸的点
2.判断触摸的点是否在按钮的范围内。
提示:可以把上面两个功能分别进行封装，在使用的时候直接调用即可。
#3绘制线段
思路:获取为选中状态的按钮，并把它们存到一个数组中，重写drawRect方法，从数组中取出所有的按钮，连接所有按钮的中点。
注意:数组中不能存空值，在存储之前需要先进行判断。
新的问题:已经被连过的按钮，不能再连线。（在存储按钮的时候判断，如果该按钮已经被连线，那么就不再添加到数组中）。
绘制线段
1.获取上下文
2.取出按钮（起点和终点）
3.渲染
如图所示：
①设置控制器view背景图片
设置控制器view背景图片
②自定义view并与控制器中新拖入的view进行关联
自定义view并与控制器中新拖入的view进行关联
③搭建UI
控件布局
设置触摸点，实现两个代理
④创建存储选中按钮的数组，并把选中按钮添加其中，画线重绘
图4.1
图4.2
- 解决问题:已经被连过的按钮，不能再连线。
解析:
1.由于每次画线的时候，我们都会调用touchbegin和touchmove方法，如果每次选中的按钮都在你触摸的范围内，都会添加到选中按钮的数组中。这样，就会造成重复添加按钮。即第二次，触摸已经选中的按钮，同样也在你触摸的范围内，这是同样也会添加到选中按钮的数组中。为了解决这个问题，我们可以在touchbegin和touchmove的判断中加一个条件 !btn.highlighted。如代码，意思是当你第二次，重复触摸同一个按钮时，如果他在你触摸的范围内且按钮的状态不是高亮状态，即向下执行。
if (CGRectContainsPoint(btn.frame, loc)&& !btn.highlighted)
2.还有个问题就是，当你在连接按钮的过程中，在空白间隙停止触摸，这样，会产生多余的线。要解决这个问题，首先我们要声明一个多余线段的点CGpoint类型。其次，获取多余线段的点，多余线段的点就等于你所触摸获取的点，进行一下关联。然后，把多余的线段画出来。最后，在touchend这个方法内，也就是当触摸完毕之后，那个多余的点，就等于，选中按钮数组中最后一个按钮的中心点。在重绘一下，就OK。
避免重复添加按钮
多余线段的解决图1
多余线段的解决图2
多余线段的解决图3
④验证密码
解析：对与验证密码这块，基本的思路是根据选中按钮的tag值，来验证用户设置的手势密码是否与之对等。换句话来说，我们添加在自定义view的按钮,当每个按钮被触碰时，都会变成高亮状态，被添加到高亮状态的数组中。手势密码也就相当于（0~9）的密码串排序。手势密码验证是在，触摸结束后验证的。所以我们要想验证密码，必须在touchend方法里遍历高亮数组获取按钮的tag值。并存入可变字符串数组中，与自己设置的手势密码字符串进行对比。
设置按钮的tag值
密码验证正确:按钮高亮状态消失线消失
不正确：按钮红色，线消失：按钮状态消失
密码验证1
要想线消失
高亮状态消失线消失
验证
-
代码展示：
//1.界面 ,九个按钮 , 设置frame
//2. 设置按钮的高亮状态
//3. 画线
//4. 验证密码是否正确
//5. 正确: 按钮高亮状态消失, 线消失
//6.不正确: 按钮红色, 线消失: 按钮状态消失//7. 多出来的一截线 #import "CZView.h" @interface CZView () //选中按钮的数组 /** * <#Description#> */ @property (nonatomic,strong) NSMutableArray <UIButton *> *selectedArray; //线条颜色的属性 @property(nonatomic,strong)UIColor *lineColor; //接收 多余的点 @property(nonatomic,assign)CGPoint destdationPoint; @end @implementation CZView - (UIColor *)lineColor { if (!_lineColor) { _lineColor = [UIColor whiteColor]; } return _lineColor; } - (NSMutableArray<UIButton *> *)selectedArray { if (!_selectedArray) { _selectedArray = [NSMutableArray array]; } return _selectedArray; } #pragma mark - 3.0画线 //画线 - (void)drawRect:(CGRect)rect { //创建路径 UIBezierPath *path = [UIBezierPath bezierPath]; for (NSInteger i = 0; i < self.selectedArray.count; i++) { //起点 if (i == 0) { [path moveToPoint:self.selectedArray[i].center]; }else{ [path addLineToPoint:self.selectedArray[i].center]; } //终点 } //画多出来的线 if (self.selectedArray.count > 0) { [path addLineToPoint:self.destdationPoint]; } //设置颜色 [self.lineColor set]; //渲染 [path stroke]; } #pragma mark - 2.0 设置按钮的高亮 //1. 触摸的位置 //2. 触摸的按钮 高亮 //3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { //1. 触摸的位置 UITouch *touch = touches.anyObject; CGPoint loc = [touch locationInView:touch.view]; self.destdationPoint = loc; //2. 触摸的按钮 高亮 //3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮 for (NSInteger i = 0; i < self.subviews.count; i++) { UIButton *btn = self.subviews[i]; //&& !btn.highlighted 避免重复添加 已经高亮的按钮 if (CGRectContainsPoint(btn.frame, loc) && !btn.highlighted) {//如果是存在的 //设置高亮 btn.highlighted = YES; //添加到选中按钮中 [self.selectedArray addObject:btn]; } } //重绘 [self setNeedsDisplay]; } - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { //1. 触摸的位置 UITouch *touch = touches.anyObject; CGPoint loc = [touch locationInView:touch.view]; //接收 多出来的点 self.destdationPoint = loc; //2. 触摸的按钮 高亮 //3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮 for (NSInteger i = 0; i < self.subviews.count; i++) { UIButton *btn = self.subviews[i]; if (CGRectContainsPoint(btn.frame, loc)&& !btn.highlighted) {//如果是存在的 //设置高亮 btn.highlighted = YES; //添加到选中按钮中 [self.selectedArray addObject:btn]; } } //重绘 [self setNeedsDisplay]; } #pragma mark - 4.0 验证密码 - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { //设置 多出来的点 在 手指抬起的时候为 选中按钮集合的最后一个 self.destdationPoint = [[self.selectedArray lastObject] center]; //1.获取密码 NSMutableString *pwd = [NSMutableString string]; for(UIButton *btn in self.selectedArray){ //拼接密码 [pwd appendFormat:@"%@",@(btn.tag)]; } //2. 验证 if([pwd isEqualToString:@"012"]){//正确 // 正确: 按钮高亮状态消失, 线消失 [self clearPath]; }else{ //不正确: 按钮红色, 线消失: 按钮状态消失 for (UIButton *btn in self.selectedArray) { //按钮的状态 不能同时存在 btn.highlighted = NO; btn.selected = YES; } //设置 线条颜色 为红色 self.lineColor = [UIColor redColor]; //重绘 [self setNeedsDisplay]; //关闭 交互 self.userInteractionEnabled = NO; //延迟 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self clearPath]; //开启交互 self.userInteractionEnabled = YES; }); } } //清空画线集合 - (void)clearPath { //将原先的红色 在设置为白色 self.lineColor = [UIColor whiteColor]; //取消按钮的高亮 for(UIButton *btn in self.selectedArray){ btn.highlighted = NO; btn.selected = NO; } //清空 画线的集合 [self.selectedArray removeAllObjects]; //重绘 [self setNeedsDisplay]; } #pragma mark - 1.0添加9个按钮 //1. aweakformnib //2. 懒加载 //创建9个按钮 - (void)awakeFromNib { for(NSInteger i = 0;i < 9;i++){ //创建按钮 UIButton *btn = [[UIButton alloc]init]; //设置tag 是为了验证密码 btn.tag = i; //关闭按钮的交互 是为了 触摸事件 btn.userInteractionEnabled = NO; //设置背景图片 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal]; //设置按钮的高亮图片 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateHighlighted]; //设置按钮的选中状态 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateSelected]; //添加 [self addSubview:btn]; } } //设置按钮的frame - (void)layoutSubviews { [super layoutSubviews]; for (NSInteger i = 0; i < self.subviews.count; i++) { //九宫格布局 CGFloat W = self.bounds.size.width; CGFloat H = self.bounds.size.height; CGFloat btnW = 74; CGFloat btnH = 74; //计算间隔 //列数 NSInteger columns = 3; // 总宽度 - 3个按钮的宽度 / 2 CGFloat margW = (W - columns * btnW)/(columns - 1); CGFloat margH = margW; //列的索引 NSInteger col = i % columns; //行的索引 NSInteger row = i / columns; CGFloat btnX = col * (margW + btnW); CGFloat btnY = row * (margH + btnH); //设置按钮的frame UIButton *btn = self.subviews[i]; btn.frame = CGRectMake(btnX, btnY, btnW, btnH); }}
知识点补充
1.九宫格实现原理
界面是一个九宫格的布局.九宫格实现思路.
1.先确定有多少列 cloum = 3;
2.计算出每列之间的距离
2.1计算为: CGFloat margin = (当前View的宽度 - 列数 * 按钮的宽度) / (总列数 - 1)
3.每一列的X的值与它当前所在的列有关
3.1列号：curColum = i % cloum
4.每一行的Y的值与它当前所在的行有关
4.1行号:curRow = i / cloum
5.每一个按钮的X值为, margin + 当前所在的列 * (按钮的宽度+ 每个按钮之间的间距)
6.每一个按钮的Y值为 当前所在的行 * (按钮的宽度 + 每个按钮之间的距离)
