iOS手勢(shì)密碼的實(shí)現(xiàn)方法

更新時(shí)間：2017年01月15日 10:09:22 作者：CUG

這篇文章主要為大家詳細(xì)介紹了iOS手勢(shì)密碼的實(shí)現(xiàn)方法，教會(huì)大家如何實(shí)現(xiàn)手勢(shì)密碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本次講的手勢(shì)密碼，是在九個(gè)按鍵上實(shí)現(xiàn)的，這里講的是手勢(shì)密碼的基本實(shí)現(xiàn)和效果

同樣先上效果圖

其實(shí)就是對(duì)畫(huà)圖功能的一個(gè)實(shí)現(xiàn)，再加上手勢(shì)操作結(jié)合起來(lái)。

屏幕寬度高度，方便下面操作，不做解釋

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

控制器.m文件

這里的imageView是用來(lái)裝手勢(shì)畫(huà)圖之后的image，看后面就清楚了

@property (nonatomic,strong)NSMutableArray *buttonArr;//全部手勢(shì)按鍵的數(shù)組
@property (nonatomic,strong)NSMutableArray *selectorArr;//選中手勢(shì)按鍵的數(shù)組
@property (nonatomic,assign)CGPoint startPoint;//記錄開(kāi)始選中的按鍵坐標(biāo)
@property (nonatomic,assign)CGPoint endPoint;//記錄結(jié)束時(shí)的手勢(shì)坐標(biāo)
@property (nonatomic,strong)UIImageView *imageView;//畫(huà)圖所需

-(NSMutableArray *)selectorArr
{
  if (!_selectorArr) {
    _selectorArr = [[NSMutableArray alloc]init];
  }
  return _selectorArr;
}

添加九個(gè)按鍵，設(shè)置狀態(tài)圖片，實(shí)際開(kāi)發(fā)中一般有三種狀態(tài)，即默認(rèn)，選中正確和選擇錯(cuò)誤，錯(cuò)誤一般指的是我們要記錄下用戶的手勢(shì)密碼，需要用戶。

畫(huà)出兩次相同的手勢(shì)密碼才能保存，若兩次輸入不一致，就是錯(cuò)誤狀態(tài)的一種，當(dāng)然還包括其它的，不多說(shuō)了。

這里要強(qiáng)調(diào)

btn.userInteractionEnabled = NO;

這句的重要性，如果不關(guān)閉按鍵的用戶交互，下面的UITouch則無(wú)法在按鍵中觸發(fā)，所以這里必須關(guān)閉

- (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];
    }
    
  }
}

這個(gè)方法就是實(shí)現(xiàn)畫(huà)圖的方法

-(UIImage *)drawLine{
  UIImage *image = nil;
  
  UIColor *col = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
  UIGraphicsBeginImageContext(self.imageView.frame.size);//設(shè)置畫(huà)圖的大小為imageview的大小
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(context, 5);
  CGContextSetStrokeColorWithColor(context, col.CGColor);
  
  CGContextMoveToPoint(context, self.startPoint.x, self.startPoint.y);//設(shè)置畫(huà)線起點(diǎn)

  //從起點(diǎn)畫(huà)線到選中的按鍵中心，并切換畫(huà)線的起點(diǎn)
  for (UIButton *btn in self.selectorArr) {
    CGPoint btnPo = btn.center;
    CGContextAddLineToPoint(context, btnPo.x, btnPo.y);
    CGContextMoveToPoint(context, btnPo.x, btnPo.y);
  }
  //畫(huà)移動(dòng)中的最后一條線
  CGContextAddLineToPoint(context, self.endPoint.x, self.endPoint.y);
  
  CGContextStrokePath(context);
  
  image = UIGraphicsGetImageFromCurrentImageContext();//畫(huà)圖輸出
  UIGraphicsEndImageContext();//結(jié)束畫(huà)線
  return image;
}

最后部分是手勢(shì)，每次在屏幕上點(diǎn)擊的時(shí)候都會(huì)調(diào)用的方法

//開(kāi)始手勢(shì)
-(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];//記錄按鍵坐標(biāo)
      
      if ([btn pointInside:po withEvent:nil]) {//判斷按鍵坐標(biāo)是否在手勢(shì)開(kāi)始范圍內(nèi),是則為選中的開(kāi)始按鍵
        
        [self.selectorArr addObject:btn];
        btn.highlighted = YES;
        self.startPoint = btn.center;//保存起始坐標(biāo)
      }
    
    }
    
  }
  
}

//移動(dòng)中觸發(fā)，畫(huà)線過(guò)程中會(huì)一直調(diào)用畫(huà)線方法
-(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;//記錄是否為重復(fù)按鍵
        for (UIButton *seBtn in self.selectorArr) {
          if (seBtn == btn) {
            isAdd = NO;//已經(jīng)是選中過(guò)的按鍵，不再重復(fù)添加
            break;
          }
        }
        if (isAdd) {//未添加的選中按鍵，添加并修改狀態(tài)
          [self.selectorArr addObject:btn];
          btn.highlighted = YES;
        }
        
      }
    }
  }
  self.imageView.image = [self drawLine];//每次移動(dòng)過(guò)程中都要調(diào)用這個(gè)方法，把畫(huà)出的圖輸出顯示
  
}
//手勢(shì)結(jié)束觸發(fā)
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
  self.imageView.image = nil;
  self.selectorArr = nil;
  for (UIButton *btn in self.buttonArr) {
    btn.highlighted = NO;
  }
}

開(kāi)發(fā)中有時(shí)需要在最后時(shí)把畫(huà)出的手勢(shì)密碼圖顯示保留一秒時(shí)，不能直接使用上面的畫(huà)圖image輸出多一次，因?yàn)檩敵龅倪B最后一條線都畫(huà)出來(lái)了，如果要實(shí)現(xiàn)這個(gè)保留效果，可以在畫(huà)線方法里添加一個(gè)是否畫(huà)最后一條線的判斷，加個(gè)bool傳參，在畫(huà)線結(jié)束時(shí)再調(diào)用這個(gè)方法和參數(shù)，禁止最后一條線畫(huà)出來(lái)就行了，當(dāng)然不能在畫(huà)的過(guò)程禁止，而是在結(jié)束的時(shí)候，不然一條線都畫(huà)不出的，最后把圖片展示多次就行了。

需要的把btn和密碼相關(guān)聯(lián)，方法也有很多種，例如給btn設(shè)置tag值，把tag對(duì)應(yīng)作為密碼保存和驗(yàn)證就行了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: