iOS-九宫格密码解锁

前言:看了几篇简书,九宫格密码解锁,看着不错,拿来学习一下。

一、实现效果

112156697-4afbd493717f54a7

实现效果

二、手势解锁实现过程

分析:

如图所示:

①设置控制器view背景图片
[解析]:拖入图片素材,并设置控制器View的背景图片

122156697-c0a9afa6420e4237

设置控制器view背景图片

②自定义view并与控制器中新拖入的view进行关联

132156697-05aa261fb43081bf

自定义view并与控制器中新拖入的view进行关联

③搭建UI

142156697-5da35568fc802509

控件布局

152156697-602e169c55e4c6d0

设置触摸点,实现两个代理

④创建存储选中按钮的数组,并把选中按钮添加其中,画线重绘

162156697-7cc593d7237a6870
172156697-60b8bc4a192f3190

  • 解决问题:已经被连过的按钮,不能再连线。
    [解析]:
    1.由于每次画线的时候,我们都会调用touchbegin和touchmove方法,如果每次选中的按钮都在你触摸的范围内,都会添加到选中按钮的数组中。这样,就会造成重复添加按钮。即第二次,触摸已经选中的按钮,同样也在你触摸的范围内,这是同样也会添加到选中按钮的数组中。为了解决这个问题,我们可以在touchbegin和touchmove的判断中加一个条件 !btn.highlighted。如代码,意思是当你第二次,重复触摸同一个按钮时,如果他在你触摸的范围内且按钮的状态不是高亮状态,即向下执行。

 

2.还有个问题就是,当你在连接按钮的过程中,在空白间隙停止触摸,这样,会产生多余的线。要解决这个问题,首先我们要声明一个多余线段的点CGpoint类型。其次,获取多余线段的点,多余线段的点就等于你所触摸获取的点,进行一下关联。然后,把多余的线段画出来。最后,在touchend这个方法内,也就是当触摸完毕之后,那个多余的点,就等于,选中按钮数组中最后一个按钮的中心点。在重绘一下,就OK。
182156697-165a2c46f0a9a9a8避免重复添加按钮

192156697-39118ef088728faa

多余线段的解决图1
202156697-4ec37a17f673dcea
多余线段的解决图2
212156697-e03210fd3a52e32e
多余线段的解决图3

④验证密码
[解析]:对与验证密码这块,基本的思路是根据选中按钮的tag值,来验证用户设置的手势密码是否与之对等。换句话来说,我们添加在自定义view的按钮,当每个按钮被触碰时,都会变成高亮状态,被添加到高亮状态的数组中。手势密码也就相当于(0~9)的密码串排序。手势密码验证是在,触摸结束后验证的。所以我们要想验证密码,必须在touchend方法里遍历高亮数组获取按钮的tag值。并存入可变字符串数组中,与自己设置的手势密码字符串进行对比。

222156697-64bdf11890ae8a77

设置按钮的tag值
密码验证正确:按钮高亮状态消失线消失
不正确:按钮红色,线消失:按钮状态消失
232156697-242b9215243e2a9c
要想线消失
242156697-e6bca0cb767dd6a8
高亮状态消失线消失
252156697-fc77018611f4423d

  • 代码展示:
  • 知识点补充

    1.九宫格实现原理

1 2 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部