你的位置:首页 > 操作系统

[操作系统]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;//画图所需

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

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

这里要强调

 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 *)event27 {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 *)event56 {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对应作为密码保存和验证就行了