------------- 基本思路 --------------算法
1. 搭建界面,九宫格算法spa
2. 处理按钮选中状态代理
3. 按钮之间画线orm
4. 手指和按钮之间画线事件
5. 判断解锁密码是否正确图片
具体实现:it
1. 拖拽图片素材io
2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果容器
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HomeButtomBG"]];select
3. 在控制器中拖拽一个 UIView, 设置宽高都是300, 并设置约束(在父容器中水平、垂直居中对齐)。
4. 自定义一个 view, 设置这个自定义 view 与界面上的 view 相关联
5. 在自定义 view 中添加一个 buttons 属性, 在懒加载中生成9个 UIButton, 而且把这写 Button 都添加到 view 中。
- 建立每一个 UIButton
- 设置每一个 UIButton的默认状况下的背景图片、 selected 下的背景图片
6. 在 layoutSubviews 方法中根据九宫格的方式计算每一个按钮的 frame
7. 实现触摸到某个按钮的时候, 让这个按钮的状态变成 selected
7.1 在自定义 view 的 touchesBegan:方法中根据当前的触摸点, 判断是否触碰到了某个按钮
- 设置这个按钮的 selected状态(YES);
- 把这个按钮记录下来(添加到 selectedButtons 集合中)add
7.2 在自定义 view 的 touchesMoved:方法中根据当前的触摸点, 判断是否触碰到了某个按钮
- 设置这个按钮的 selected状态
- 把这个按钮记录下来(添加到 selectedButtons 集合中), 同时要判断这个按钮是否已是 selected = YES了, 避免重复添加。
- 同时记录下本次触摸的 point到 currentPoint属性中。
** 注意: 此处必须设置按钮禁止与用户交互(btn.userInteractionEnabled = NO;), 否者手指触摸到按钮上之后, 按钮会捕获这个触摸事件, 就不会触发 view的 touchesBegan:事件了。
8. 在 drawRect:方法中绘制线条
- 判断若是 self.selectedButtons长度为0, 那么直接返回不须要绘制任何内容
- 若是 self.selectedButtons长度不为0:
1> 循环 self.selectedButtons集合中的每一个按钮
2> 判断若是是第一个按钮那么移动到起点(起点为第一个按钮的 center point)
3> 若是不是第一个按钮那么直接添加线段到这个按钮的 center point
4> 绘制完毕按钮之后, 最后再添加一条线段到 currentPoint。
9. 在touchesEnded:方法中, 将全部按钮的 selected 状态设置为 NO, 清空 self.selectedButtons 集合, 从新绘制。
10. 为每一个按钮添加一个 tag, 用来判断手势解锁是否正确
- 经过代理把解锁的密码传递给控制器, 在控制器中判断解锁是否正确, 若是正确代理方法返回 YES, 不然返回 NO
- 在定义 view 中, 根据代理方法返回的结果判断若是 YES, 那么直接执行第9步
- 若是返回为 NO:
1> 先将 self.selectedButtons中的全部按钮selected状态设置为 NO, enabled 也设置为 NO
2> 在把线条颜色设置为红色
3> 执行重绘
4> 0.5秒钟以后, 在执行第9步