IOS teaches you how to implement a gesture password and ios implements a gesture Password

IOS teaches you how to implement a gesture password and ios implements a gesture Password

The gesture password is implemented on nine buttons. Here we will talk about the basic implementation and effect of the gesture password.

Same first

It is actually an implementation of the drawing function, combined with gesture operations.

 

The screen width and height to facilitate the following operations.

# Define ScreenHeight [[UIScreen mainScreen] bounds]. size. height

# Define ScreenWidth [[UIScreen mainScreen] bounds]. size. width

Controller. m file

Here, the imageView is used to hold the image after the gesture drawing. It will be clear later.

1 @ property (nonatomic, strong) NSMutableArray * buttonArr; // array of all gesture Buttons 2 @ property (nonatomic, strong) NSMutableArray * selectorArr; // select the array of the gesture buttons 3 @ property (nonatomic, assign) CGPoint startPoint; // record the key coordinate 4 @ property (nonatomic, assign) CGPoint endPoint; // gesture coordinates at the end of the record 5 @ property (nonatomic, strong) UIImageView * imageView; // required for drawing

Add nine buttons and set the status picture. In actual development, there are generally three statuses, namely, the default. Correct Selection and incorrect selection. An error generally indicates that we need to record the user's gesture password, users required

Only two identical gesture passwords can be saved. If the two inputs are inconsistent, they are in the wrong state. Of course there are others.

It should be emphasized here

Btn. userInteractionEnabled = NO;
The importance of this sentence. If you do not close the user interaction button, the following UITouch cannot be triggered in the button, so it must be disabled here.

 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 }

This method is used for drawing.

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); // set the image size to 6 CGContextRef context = UIGraphicsGetCurrentContext (); 7 CGContextSetLineWidth (context, 5); 8 CGContextSetStrokeColorWithColor (context, col. CGColor); 9 10 CGContextMoveToPoint (context, self. startPoint. x, self. startPoint. y); // set the starting point of the draw line 11 12 // draw the line from the starting point to the selected key center, and switch the starting point of the draw line 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 // draw the last line 19 CGContextAddLineToPoint (context, self. endPoint. x, self. endPoint. y); 20 21 CGContextStrokePath (context); 22 23 image = UIGraphicsGetImageFromCurrentImageContext (); // Drawing Output 24 UIGraphicsEndImageContext (); // return image 25 return image; 26}

The last part is the gesture, which is called every time you click on the screen.

1 // start gesture 2-(void) touchesBegan :( NSSet <UITouch *> *) touches withEvent :( UIEvent *) event 3 {4 UITouch * touch = [touches anyObject]; // save all touch events 5 if (touch) {6 7 8 for (UIButton * btn in self. buttonArr) {9 10 CGPoint po = [touch locationInView: btn]; // record key coordinate 11 12 if ([btn pointInside: po withEvent: nil]) {// determines whether the key coordinates are within the starting range of the gesture. If yes, the selected Start key 13 14 [self. selectorArr addObject: btn]; 15 btn. highlighted = YES; 16 self. startPoint = btn. center; // Save the starting coordinate 17} 18 19} 20 21} 22 23} 24 25 // triggered by moving. During the draw line process, the method 26-(void) is always called) 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; // record whether the record is repeated keys 37 for (UIButton * seBtn in self. selectorArr) {38 if (seBtn = btn) {39 isAdd = NO; // the selected key is already selected, and 40 break is not added again; 41} 42} 43 if (isAdd) {// unadded selected buttons, add and modify status 44 [self. selectorArr addObject: btn]; 45 btn. highlighted = YES; 46} 47 48} 49} 50} 51 self. imageView. image = [self drawLine]; // call this method during each movement. The output of the drawn image is 52 53} 54. // trigger 55-(void) when the gesture ends) 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}

During development, you sometimes need to retain the gesture and password graph for one second at the end, but you cannot directly use the image above to output it more than once, because the output is drawn even the last line, if you want to achieve this retention effect,

You can add a bool parameter in the draw line method to determine whether to draw the last line, and call this method and parameter at the end of the draw line, prohibit the last line from being painted. Of course, you cannot prohibit it in the painting process, but at the end of the painting. Otherwise, no line can be drawn. At last, you can display the picture multiple times.

You need to associate btn with the password. There are also many methods, such as setting the tag value for btn and saving and verifying the corresponding tag as the password.