本次講的手勢密碼，是在九個(gè)按鍵上實(shí)現(xiàn)的，這里講的是手勢密碼的基本實(shí)現(xiàn)和效果
同樣先上效果圖
其實(shí)就是對(duì)畫圖功能的一個(gè)實(shí)現(xiàn)，再加上手勢操作結(jié)合起來。
屏幕寬度高度，方便下面操作，不做解釋
#define ScreenHeight [[UIScreen mainScreen] bounds].size.height#define ScreenWidth [[UIScreen mainScreen] bounds].size.width
控制器.m文件
這里的imageView是用來裝手勢畫圖之后的image，看后面就清楚了
@property (nonatomic,strong)NSMutableArray *buttonArr;//全部手勢按鍵的數(shù)組@property (nonatomic,strong)NSMutableArray *selectorArr;//選中手勢按鍵的數(shù)組@property (nonatomic,assign)CGPoint startPoint;//記錄開始選中的按鍵坐標(biāo)@property (nonatomic,assign)CGPoint endPoint;//記錄結(jié)束時(shí)的手勢坐標(biāo)@property (nonatomic,strong)UIImageView *imageView;//畫圖所需
-(NSMutableArray *)selectorArr{ if (!_selectorArr) { _selectorArr = [[NSMutableArray alloc]init]; } return _selectorArr;}添加九個(gè)按鍵，設(shè)置狀態(tài)圖片，實(shí)際開發(fā)中一般有三種狀態(tài)，即默認(rèn)，選中正確和選擇錯(cuò)誤，錯(cuò)誤一般指的是我們要記錄下用戶的手勢密碼，需要用戶。
畫出兩次相同的手勢密碼才能保存，若兩次輸入不一致，就是錯(cuò)誤狀態(tài)的一種，當(dāng)然還包括其它的，不多說了。
這里要強(qiáng)調(diào)
btn.userInteractionEnabled = NO;
這句的重要性，如果不關(guān)閉按鍵的用戶交互，下面的UITouch則無法在按鍵中觸發(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)畫圖的方法
-(UIImage *)drawLine{ UIImage *image = nil; UIColor *col = [UIColor colorWithRed:1 green:0 blue:0 alpha:1]; UIGraphicsBeginImageContext(self.imageView.frame.size);//設(shè)置畫圖的大小為imageview的大小 CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 5); CGContextSetStrokeColorWithColor(context, col.CGColor); CGContextMoveToPoint(context, self.startPoint.x, self.startPoint.y);//設(shè)置畫線起點(diǎn) //從起點(diǎn)畫線到選中的按鍵中心，并切換畫線的起點(diǎn) for (UIButton *btn in self.selectorArr) { CGPoint btnPo = btn.center; CGContextAddLineToPoint(context, btnPo.x, btnPo.y); CGContextMoveToPoint(context, btnPo.x, btnPo.y); } //畫移動(dòng)中的最后一條線 CGContextAddLineToPoint(context, self.endPoint.x, self.endPoint.y); CGContextStrokePath(context); image = UIGraphicsGetImageFromCurrentImageContext();//畫圖輸出 UIGraphicsEndImageContext();//結(jié)束畫線 return image;}最后部分是手勢，每次在屏幕上點(diǎn)擊的時(shí)候都會(huì)調(diào)用的方法
//開始手勢-(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)是否在手勢開始范圍內(nèi),是則為選中的開始按鍵 [self.selectorArr addObject:btn]; btn.highlighted = YES; self.startPoint = btn.center;//保存起始坐標(biāo) } } } }//移動(dòng)中觸發(fā)，畫線過程中會(huì)一直調(diào)用畫線方法-(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)是選中過的按鍵，不再重復(fù)添加 break; } } if (isAdd) {//未添加的選中按鍵，添加并修改狀態(tài) [self.selectorArr addObject:btn]; btn.highlighted = YES; } } } } self.imageView.image = [self drawLine];//每次移動(dòng)過程中都要調(diào)用這個(gè)方法，把畫出的圖輸出顯示 }//手勢結(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; }}開發(fā)中有時(shí)需要在最后時(shí)把畫出的手勢密碼圖顯示保留一秒時(shí)，不能直接使用上面的畫圖image輸出多一次，因?yàn)檩敵龅倪B最后一條線都畫出來了，如果要實(shí)現(xiàn)這個(gè)保留效果，可以在畫線方法里添加一個(gè)是否畫最后一條線的判斷，加個(gè)bool傳參，在畫線結(jié)束時(shí)再調(diào)用這個(gè)方法和參數(shù)，禁止最后一條線畫出來就行了，當(dāng)然不能在畫的過程禁止，而是在結(jié)束的時(shí)候，不然一條線都畫不出的，最后把圖片展示多次就行了。
需要的把btn和密碼相關(guān)聯(lián)，方法也有很多種，例如給btn設(shè)置tag值，把tag對(duì)應(yīng)作為密碼保存和驗(yàn)證就行了。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
