欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS手势密码的实现方法

程序员文章站 2023-12-21 14:15:40
本次讲的手势密码,是在九个按键上实现的,这里讲的是手势密码的基本实现和效果 同样先上效果图 其实就是对画图功能的一个实现,再加上手势操作结合起来。 屏幕宽度高度,...

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

同样先上效果图

iOS手势密码的实现方法

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

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

#define screenheight [[uiscreen mainscreen] bounds].size.height
#define screenwidth [[uiscreen mainscreen] bounds].size.width

控制器.m文件

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

@property (nonatomic,strong)nsmutablearray *buttonarr;//全部手势按键的数组
@property (nonatomic,strong)nsmutablearray *selectorarr;//选中手势按键的数组
@property (nonatomic,assign)cgpoint startpoint;//记录开始选中的按键坐标
@property (nonatomic,assign)cgpoint endpoint;//记录结束时的手势坐标
@property (nonatomic,strong)uiimageview *imageview;//画图所需
-(nsmutablearray *)selectorarr
{
  if (!_selectorarr) {
    _selectorarr = [[nsmutablearray alloc]init];
  }
  return _selectorarr;
}

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

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

这里要强调

 btn.userinteractionenabled = no;

这句的重要性,如果不关闭按键的用户交互,下面的uitouch则无法在按键中触发,所以这里必须关闭

- (void)viewdidload {
  [super viewdidload];
  self.view.backgroundcolor = [uicolor whitecolor];

  
  if (!_buttonarr) {
    _buttonarr = [[nsmutablearray alloc]initwithcapacity:9];
  }
  
  self.imageview = [[uiimageview alloc]initwithframe:cgrectmake(0, 0, screenwidth, screenheight)];
  [self.view addsubview:self.imageview];

  for (int i=0; i<3; i++) {
    for (int j=0; j<3; j++) {
      uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom];
      btn.frame = cgrectmake(screenwidth/12+screenwidth/3*j, screenheight/3+screenwidth/3*i, screenwidth/6, screenwidth/6);
      [btn setimage:[uiimage imagenamed:@"pbg"] forstate:uicontrolstatenormal];
      [btn setimage:[uiimage imagenamed:@"pbg01"] forstate:uicontrolstatehighlighted];
      btn.userinteractionenabled = no;
      [self.buttonarr addobject:btn];
      [self.imageview addsubview:btn];
    }
    
  }
}

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

-(uiimage *)drawline{
  uiimage *image = nil;
  
  uicolor *col = [uicolor colorwithred:1 green:0 blue:0 alpha:1];
  uigraphicsbeginimagecontext(self.imageview.frame.size);//设置画图的大小为imageview的大小
  cgcontextref context = uigraphicsgetcurrentcontext();
  cgcontextsetlinewidth(context, 5);
  cgcontextsetstrokecolorwithcolor(context, col.cgcolor);
  
  cgcontextmovetopoint(context, self.startpoint.x, self.startpoint.y);//设置画线起点

  //从起点画线到选中的按键中心,并切换画线的起点
  for (uibutton *btn in self.selectorarr) {
    cgpoint btnpo = btn.center;
    cgcontextaddlinetopoint(context, btnpo.x, btnpo.y);
    cgcontextmovetopoint(context, btnpo.x, btnpo.y);
  }
  //画移动中的最后一条线
  cgcontextaddlinetopoint(context, self.endpoint.x, self.endpoint.y);
  
  cgcontextstrokepath(context);
  
  image = uigraphicsgetimagefromcurrentimagecontext();//画图输出
  uigraphicsendimagecontext();//结束画线
  return image;
}

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

//开始手势
-(void)touchesbegan:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
  uitouch *touch = [touches anyobject];//保存所有触摸事件
  if (touch) {
    
    
    for (uibutton *btn in self.buttonarr) {
      
      cgpoint po = [touch locationinview:btn];//记录按键坐标
      
      if ([btn pointinside:po withevent:nil]) {//判断按键坐标是否在手势开始范围内,是则为选中的开始按键
        
        [self.selectorarr addobject:btn];
        btn.highlighted = yes;
        self.startpoint = btn.center;//保存起始坐标
      }
    
    }
    
  }
  
}

//移动中触发,画线过程中会一直调用画线方法
-(void)touchesmoved:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
  uitouch *touch = [touches anyobject];
  if (touch) {
    
    self.endpoint = [touch locationinview:self.imageview];
    for (uibutton *btn in self.buttonarr) {
      cgpoint po = [touch locationinview:btn];
      if ([btn pointinside:po withevent:nil]) {
        
        bool isadd = yes;//记录是否为重复按键
        for (uibutton *sebtn in self.selectorarr) {
          if (sebtn == btn) {
            isadd = no;//已经是选中过的按键,不再重复添加
            break;
          }
        }
        if (isadd) {//未添加的选中按键,添加并修改状态
          [self.selectorarr addobject:btn];
          btn.highlighted = yes;
        }
        
      }
    }
  }
  self.imageview.image = [self drawline];//每次移动过程中都要调用这个方法,把画出的图输出显示
  
}
//手势结束触发
-(void)touchesended:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
  self.imageview.image = nil;
  self.selectorarr = nil;
  for (uibutton *btn in self.buttonarr) {
    btn.highlighted = no;
  }
}

开发中有时需要在最后时把画出的手势密码图显示保留一秒时,不能直接使用上面的画图image输出多一次,因为输出的连最后一条线都画出来了,如果要实现这个保留效果,可以在画线方法里添加一个是否画最后一条线的判断,加个bool传参,在画线结束时再调用这个方法和参数,禁止最后一条线画出来就行了,当然不能在画的过程禁止,而是在结束的时候,不然一条线都画不出的,最后把图片展示多次就行了。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: