iOS 教你如何实现手势密码

本次讲的手势密码，是在九个按键上实现的，这里讲的是手势密码的基本实现和效果

同样先上效果图

其实就是对画图功能的一个实现，再加上手势操作结合起来

 

屏幕宽度高度，方便下面操作，不做解释

#define ScreenHeight [[UIScreen mainScreen] bounds].size.height

#define ScreenWidth [[UIScreen mainScreen] bounds].size.width

控制器.m文件

这里的imageView是用来装手势画图之后的image，看后面就清楚了

1 @property (nonatomic,strong)NSMutableArray *buttonArr;//全部手势按键的数组
2 @property (nonatomic,strong)NSMutableArray *selectorArr;//选中手势按键的数组
3 @property (nonatomic,assign)CGPoint startPoint;//记录开始选中的按键坐标
4 @property (nonatomic,assign)CGPoint endPoint;//记录结束时的手势坐标
5 @property (nonatomic,strong)UIImageView *imageView;//画图所需
1 -(NSMutableArray *)selectorArr
2 {
3     if (!_selectorArr) {
4         _selectorArr = [[NSMutableArray alloc]init];
5     }
6     return _selectorArr;
7 }

添加九个按键，设置状态图片，实际开发中一般有三种状态，即默认，选中正确和选择错误，错误一般指的是我们要记录下用户的手势密码，需要用户

画出两次相同的手势密码才能保存，若两次输入不一致，就是错误状态的一种，当然还包括其它的，不多说了

这里要强调

 btn.userInteractionEnabled = NO;
这句的重要性，如果不关闭按键的用户交互，下面的UITouch则无法在按键中触发，所以这里必须关闭
 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     self.view.backgroundColor = [UIColor whiteColor];
 4 
 5    
 6     if (!_buttonArr) {
 7         _buttonArr = [[NSMutableArray alloc]initWithCapacity:9];
 8     }
 9     
10     self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
11     [self.view addSubview:self.imageView];
12 
13     for (int i=0; i<3; i++) {
14         for (int j=0; j<3; j++) {
15             UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
16             btn.frame = CGRectMake(ScreenWidth/12+ScreenWidth/3*j, ScreenHeight/3+ScreenWidth/3*i, ScreenWidth/6, ScreenWidth/6);
17             [btn setImage:[UIImage imageNamed:@"pbg"] forState:UIControlStateNormal];
18             [btn setImage:[UIImage imageNamed:@"pbg01"] forState:UIControlStateHighlighted];
19             btn.userInteractionEnabled = NO;
20             [self.buttonArr addObject:btn];
21             [self.imageView addSubview:btn];
22         }
23         
24     }
25 }

这个方法就是实现画图的方法

 1 -(UIImage *)drawLine{
 2     UIImage *image = nil;
 3     
 4     UIColor *col = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
 5     UIGraphicsBeginImageContext(self.imageView.frame.size);//设置画图的大小为imageview的大小
 6     CGContextRef context = UIGraphicsGetCurrentContext();
 7     CGContextSetLineWidth(context, 5);
 8     CGContextSetStrokeColorWithColor(context, col.CGColor);
 9     
10     CGContextMoveToPoint(context, self.startPoint.x, self.startPoint.y);//设置画线起点
11 
12     //从起点画线到选中的按键中心，并切换画线的起点
13     for (UIButton *btn in self.selectorArr) {
14         CGPoint btnPo = btn.center;
15         CGContextAddLineToPoint(context, btnPo.x, btnPo.y);
16         CGContextMoveToPoint(context, btnPo.x, btnPo.y);
17     }
18     //画移动中的最后一条线
19     CGContextAddLineToPoint(context, self.endPoint.x, self.endPoint.y);
20     
21     CGContextStrokePath(context);
22     
23     image = UIGraphicsGetImageFromCurrentImageContext();//画图输出
24     UIGraphicsEndImageContext();//结束画线
25     return image;
26 }

最后部分是手势，每次在屏幕上点击的时候都会调用的方法

 1 //开始手势
 2 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
 3 {
 4     UITouch *touch = [touches anyObject];//保存所有触摸事件
 5     if (touch) {
 6         
 7         
 8         for (UIButton *btn in self.buttonArr) {
 9             
10             CGPoint po = [touch locationInView:btn];//记录按键坐标
11             
12             if ([btn pointInside:po withEvent:nil]) {//判断按键坐标是否在手势开始范围内,是则为选中的开始按键
13                 
14                 [self.selectorArr addObject:btn];
15                 btn.highlighted = YES;
16                 self.startPoint = btn.center;//保存起始坐标
17             }
18         
19         }
20         
21     }
22     
23 }
24 
25 //移动中触发，画线过程中会一直调用画线方法
26 -(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
27 {
28     UITouch *touch = [touches anyObject];
29     if (touch) {
30         
31         self.endPoint = [touch locationInView:self.imageView];
32         for (UIButton *btn in self.buttonArr) {
33             CGPoint po = [touch locationInView:btn];
34             if ([btn pointInside:po withEvent:nil]) {
35                 
36                 BOOL isAdd = YES;//记录是否为重复按键
37                 for (UIButton *seBtn in self.selectorArr) {
38                     if (seBtn == btn) {
39                         isAdd = NO;//已经是选中过的按键，不再重复添加
40                         break;
41                     }
42                 }
43                 if (isAdd) {//未添加的选中按键，添加并修改状态
44                     [self.selectorArr addObject:btn];
45                     btn.highlighted = YES;
46                 }
47                 
48             }
49         }
50     }
51     self.imageView.image = [self drawLine];//每次移动过程中都要调用这个方法，把画出的图输出显示
52     
53 }
54 //手势结束触发
55 -(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
56 {
57     self.imageView.image = nil;
58     self.selectorArr = nil;
59     for (UIButton *btn in self.buttonArr) {
60         btn.highlighted = NO;
61     }
62 }

开发中有时需要在最后时把画出的手势密码图显示保留一秒时，不能直接使用上面的画图image输出多一次，因为输出的连最后一条线都画出来了，如果要实现这个保留效果，

可以在画线方法里添加一个是否画最后一条线的判断，加个bool传参，在画线结束时再调用这个方法和参数，禁止最后一条线画出来就行了，当然不能在画的过程禁止，而是在结束的时候，不然一条线都画不出的，最后把图片展示多次就行了

需要的把btn和密码相关联，方法也有很多种，例如给btn设置tag值，把tag对应作为密码保存和验证就行了

posted @ 2016-03-02 12:33  CUG  阅读(9155)  评论(3)  编辑  收藏  举报