手势解锁步骤的基本思路

------------- 基本思路 --------------

- 1. 搭建界面,九宫格算法

- 2. 处理按钮选中状态

- 3. 按钮之间画线

- 4. 手指和按钮之间画线

- 5. 判断解锁密码是否正确

------------- 基本思路 --------------

1. 拖拽图片素材

2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HomeButtomBG"]];

3. 在控制器中拖拽一个 UIView, 设置宽高都是300, 并设置约束(在父容器中水平、垂直居中对齐)。

4. 自定义一个 view, 设置这个自定义 view 与界面上的 view 相关联

5. 在自定义 view 中添加一个 buttons 属性, 在懒加载中生成9个 UIButton, 并且把这写 Button 都添加到 view 中。

- 创建每个 UIButton

- 设置每个 UIButton的默认情况下的背景图片、 selected 下的背景图片、disabled 下的背景图片

6. 在 layoutSubviews 方法中根据九宫格的方式计算每个按钮的 frame

7. 实现触摸到某个按钮的时候, 让这个按钮的状态变成 selected

7.1 在自定义 view 的 touchesBegan:方法中根据当前的触摸点, 判断是否触碰到了某个按钮

- 设置这个按钮的 selected状态

- 把这个按钮记录下来(添加到 selectedButtons 集合中)

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。

// 线条的颜色

#define SteveZLineColor [UIColor colorWithRed:0.0 green:170/255.0 blue:255/255.0 alpha:1.0]

/**

错误:

<Error>: void CGPathAddLineToPoint(CGMutablePathRef, const CGAffineTransform *, CGFloat, CGFloat): no current point.

原因:

在第一次绘图的时候 path 对象中没有任何点

解决:(判断如果没有需要绘制的按钮, 那么就直接返回)

if (self.selectedButtons.count == 0) {

return;

}

*/

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步。

11. 细节处理

- 透明问题

1> 如果是完全通过代码创建 UIView, 在绘图的时候, 如果指定了控件的透明(opaque = NO)opaque 表示不透明, 那么在绘图时会有问题。

2> 如果希望是透明, 那么要把颜色指定为 clearColor, 而不是 opaque = NO

- NSNumber 的使用问题

在对整数进行字符串拼接的时候不要使用 int,NSInteger等, 要使用NSNumber

/**

避免出现下面代码:

[strPassword appendFormat:@"%d", [self.selectedButtons[i] tag]];

原因: 因为在 iPhone5s 以下都是32位, 从 iPhone5s 开始都成了64位, 所以 NSInteger 在 iPhone5s 以下模拟器为32位, iPhone5s(含)以上都是64位

解决: (统一使用 NSNumber)

[strPassword appendFormat:@"%@", @([self.selectedButtons[i] tag])];

*/

- NSInteger 的使用问题

1> 一般对象的属性、方法的参数可以使用使用 NSInteger (可以保证在不同平台上使用不同的整数(32位、64位))

2> 方法内的局部变量, 一般使用 int

3> 以上是苹果官方示例程序中的代码习惯

时间: 2024-10-25 11:02:21

手势解锁步骤的基本思路的相关文章

手势解锁的实现思路

------------- 基本思路 -------------- - 1. 搭建界面,九宫格算法 - 2. 处理按钮选中状态 - 3. 按钮之间画线 - 4. 手指和按钮之间画线 - 5. 判断解锁密码是否正确 ------------- 基本思路 -------------- 1. 拖拽图片素材 2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果 self.view.backgroundColor = [UIColor colorWithPatter

iOS开发UI篇—实现一个简单的手势解锁应用(基本)

iOS开发UI篇—实现一个简单的手势解锁应用(基本) 一.实现效果 实现效果图: 二.手势解锁应用分析 1.监听手指在view上的移动,首先肯定需要自定义一个view,重写touch began,touch move等方法,当手指移动到圈上时,让其变亮.可以通过button按钮来实现. 2.界面搭建 背景图片(给控制器的view添加一个imageview,设置属性背景图片) 九个按钮(把九个按钮作为一个整体,使用一个大的view来管理这些小的view,这些小的view就是9个button.如果使

UI进阶--Quartz2D和触摸事件的简单使用:手势解锁

需求:实现一个简易的手势解锁应用,具体效果如下图所示: 实现步骤: 1.代码创建界面,自定义一个view,设置view的背景,颜色等属性: 2.在自定义的view中,定义2个属性,一个是存储被选中按钮的可变数组,另外一个是最后的触摸点(CGPoint); 3.重写initWithFrame方法,在这里,自定义一个方法给initWithFrame方法调用即可,这个自定义的方法里,初始化9个按钮,设置每个按钮的tag,正常状态下的图片以及选中状态的图片,并设置和用户的交互为NO: 4.在自定义的vi

iOS开发UI篇—实现一个简单的手势解锁应用(完善)

iOS开发UI篇—实现一个简单的手势解锁应用(完善) 一.需要实现的效果 二.应用完善 1.绘制不处于按钮范围内的连线 2.解决bug(完善) bug1:如果在began方法中通知view绘图,那么会产生bug.因为,当前点没有清空,在手指移开之后要清空当前点.可以在绘制前进行判断,如果当前点是(0,0)那么就不划线.或者在began方法中不进行重绘. bug2:无限菊花.自定义view的背景色为默认的(黑色),只要重写了drawrect方法,view默认的背景颜色就是黑色的,因为上下文默认的颜

自定义手势解锁锁控件

一.控件的使用 模仿市面上app的手势解锁功能,实现的小控件,将控件封装到了一个UIView上 二.核心原理技术 1.触摸事件 (1)UIView的触摸三个触摸响应事件:开始.移动.结束 (2)CGRectContainsPoint 判断触摸点的位置 2.Quartz2D绘图 (1)drawRect 的重绘 (2)UIBezierPath 贝塞尔曲线 3.block成功和失败的回调 三.实现思路 1.解锁键盘中的9个小图标,会根据验证过程而变化颜色,所以考虑用UIButton实现,因为UIBut

Android进阶之自定义View实战(二)九宫格手势解锁实现

一.引言 在上篇博客Android进阶之自定义View实战(一)仿iOS UISwitch控件实现中我们主要介绍了自定义View的最基本的实现方法.作为自定义View的入门篇,仅仅介绍了Canvas的基本使用方法,而对用户交互层面仅仅处理了单击事件接口,在实际的业务中,常常涉及到手势操作,本篇博客以九宫格手势解锁View为例,来说明自定义View如何根据需求处理用户的手势操作.虽然九宫格手势解锁自定义View网上资料有很多,实现原理大同小异,但这里我只是根据自己觉得最优的思路来实现它,目的是让更

android自定义手势解锁View

有时候为了程序的安全性,我们经常要采取一些安全措施,就像我们常用的支付宝那样,隔一定的时间再回到应用程序时会让用户利用手势去解锁应用程序,最近由于项目需求,也要求做这样一个功能,当用户切出本应用程序15分钟后回来,让用户手势解锁,整个需求的难点就在如何实现这个手势锁,开始一点头绪也没有,没有一点思路去实现这个手势解锁功能,在google了一番后看了一篇非常好的博客后,按照博主的思路的确是可以实现一个十分不错的手势锁View,也参考了下那位大神的代码,下面是我根据他的思路和代码片段实现的一个自定义

九点(九宫格)式手势解锁自定义view

周末闲着没事,写了个手势解锁的view,实现起来也蛮快的,半天多一点时间就完事.把源码和资源贴出来,给大家分享,希望对大家有用. 效果,就跟手机上的九点手势解锁一样,上个图吧: 过程嘛感觉确实没啥好讲的了,涉及的知识以前的博客都说过了,无非就是canva,paint,touch事件这些,画画圆圈画画线条,剩下的就是细节处理逻辑了.都在代码里,所以这里就主要是贴资源吧. 这个自定义view就一个类,源码如下: package com.cc.library.view; import android.

iOS开发之手势解锁

本文主要介绍通过手势识别实现手势解锁功能,这个方法被广泛用于手机解锁,密码验证,快捷支付等功能实现.事例效果如下所示. 首先,我们先分析功能的实现过程,首先我们需要先看大致的实现过程: 1.加载九宫格页面 2.实现按钮被点击及滑动过程中按钮状态的改变 3.实现滑动过程中的连线 4.绘制完毕后判定密码是否正确, 5.密码判定后实现跳转. 下面我们就来用代码实现上述五个过程. 1.加载九宫格界面 1.1九宫格内控件的分布 3*3 ,我们可以自定义view(包含3*3个按钮),添加到viewContr