SDLockView Gesture unlock based on Bezier curve

SDLockView Gesture unlock based on Bezier curve


####From making wheels to SDLockView


The three parties of gesture unlocking existed a long time ago, but they have not been used before. In the past two days when I was idle at home during the Mid-Autumn Festival, I wrote a three-party SDLockView about gesture unlocking. Among them, there are three main functions of SDLockView, respectively. It is to set the gesture password, modify the gesture password, and verify the gesture password. Next, we will take a look at the effect of SDLockView.


####Quick generation of SDLockView


There are many times when we need to quickly generate SDLockView pages. At this time, we only need three simple steps to quickly integrate SDLockView. 1. we need to drag the SDLockView folder in the Demo into the target project. The folder contains the SDLockView implementation class, UIImage+SizeUpdata (extension on modifying the image size), and two icons.

Next is to initialize our SDLockView object, we have to select its LockViewType type, LockViewType is an enumerated type of data.

typedef enum  {
    SetPassWordType,//
    UpdataPassWordType,//
    TestingPassWordType,//
} LockViewType;


 

After selecting the type, we can directly create the SDLockView page.

SDLockView *view = [SDLockView initWithLockViewType:self.lockViewType];

 

Finally, add it to our view.

[self.view addSubview:view];

 

####SDLockView attribute introduction


In order to facilitate more people to customize their own gesture unlocking, SDLockView exposes many practical attribute interfaces. The attributes are mainly divided into four modules: basic usage, extended usage settings, text information settings, and prompt information settings. The comments have been added and cannot be detailed. Now, if you have any more questions, you can directly ask Sao Dong. Thank you.

Basic usage

Extended usage settings

Text message settings

Prompt information setting


####SDLockView implementation core detailed explanation


The core of the implementation of SDLockView is actually the Bezier curve, but we have to do a lot of preparation for drawing. 1. we use three methods touchesBegan, touchesMoved, and touchesEnded to place all the buttons touched by the user in the selectedButtons array (to consider To remove the duplication problem, use the method isExistWithButton to achieve). The code is as follows

//touchesMoved 
//, , .
if (![self isExistWithButton:button]) {
            
    [self.selectedButtons addObject:button];

 }
     
 

Every time the touchesMoved method is called, let it redraw the View page. The calling method is as follows.

//
[self setNeedsDisplay];
 

The drawing process actually calls - (void)drawRect:(CGRect)rectthis method. We only need to draw the Bezier curve and prompt the text information in the method. During the drawing process, we only need to set the center of each button in the selectedButtons as the turning point of the line segment. .

- (void)drawRect:(CGRect)rect{
    
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    
    paragraphStyle.alignment = NSTextAlignmentCenter;//
    
    [self.promptMessage drawInRect:CGRectMake(0, self.distanceY - 40, KmainWidth, 40) withAttributes:@{
                 NSKernAttributeName: @8,
                 NSFontAttributeName : [UIFont systemFontOfSize:(self.wordSize?self.wordSize:17)],
                 NSForegroundColorAttributeName :(self.wordColor?self.wordColor:[UIColor blackColor]),
                 NSParagraphStyleAttributeName:paragraphStyle,
                                                                                                       }];
    
    
    

    UIBezierPath *path = [UIBezierPath bezierPath];
    
    int i = 0;
    
    for (UIButton *button in self.selectedButtons) {
        
        if (i == 0) {
            
            [path moveToPoint:button.center];
        }else{
        
        
            [path addLineToPoint:button.center];
        
        
        }
        
        i++;
        
    }


    [self.lineColor set];
    
    [path setLineWidth:self.lineWidth];
    
    [path setLineJoinStyle:kCGLineJoinRound];
    
    [path stroke];

}

 


######So much is said about the use of SDLockView, if you have any doubts about SDLockView, welcome to raise it, thank you. Finally, attach the github portal of SDLockView.

###[-->SDLockView's portal ](https://github.com/wang82426107/SDLockView)