iOS 教你如何?手勢密碼，ios實現手勢密碼

iOS 教你如何?手勢密碼，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對應作為密碼儲存和驗證就行了