SDLockView:基于贝塞尔曲线的手势解锁

从造轮子到SDLockView

手势解锁这个三方在很早之前就存在了,只是以前是没有用到过,这两天中秋在家闲着没事的时候就写了一个关于手势解锁的三方SDLockView.其中SDLockView主要的功能有三种,分别是设置手势密码,修改手势密码,验证手势密码.接下来,我们就一睹为快SDLockView的效果图.

SDLockView的快速生成

有很多时候,我们需要快速生成SDLockView页面,这时候,对其,我们只需要简简单单的三步,就可以快速集成SDLockView.首先,我们要把Demo中的SDLockView文件夹拖入目标工程中.其中文件夹中包含了SDLockView实现类,UIImage+SizeUpdata(关于修改图片尺寸的延展),和两个图标.

紧接着就是初始化我们的SDLockView对象,我们要选定它的LockViewType类型,LockViewType为一个枚举类型的数据.

typedef enum  {
    SetPassWordType,//设置密码类型界面
    UpdataPassWordType,//修改密码类型界面
    TestingPassWordType,//验证密码类型界面
} LockViewType;

选好类型之后,我们直接可以创建SDLockView页面了.

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

最后添加到我们的视图上即可.

[self.view addSubview:view];

SDLockView属性介绍

为了方便更多人定制属于自己的手势解锁,SDLockView暴露了许多实用的属性接口.属性主要分为基本用法,拓展用法设置,文字信息设置,提示信息设置四大模块.注释已经加的不能再详细了,再有什么问题,可以直接询问骚栋.谢谢.

基本用法

拓展用法设置

文字信息设置

提示信息设置

SDLockView实现核心详解

SDLockView的实现核心其实就是贝塞尔曲线,但是我们要为绘制做大量的准备工作.首先我们通过touchesBegan、touchesMoved、touchesEnded三个方法把用户的触摸过的所有Button放置在selectedButtons数组中(要考虑到去重问题,使用isExistWithButton这个方法进行实现).代码如下

//touchesMoved中的去重问题
//判读是否存在,如果存在,则不存储.
if (![self isExistWithButton:button]) {
            
    [self.selectedButtons addObject:button];

 }
     

每一次调用touchesMoved方法的时候都让其重新绘制View页面,调用方法如下.

//重新绘制
[self setNeedsDisplay];

绘制过程其实就是调用了- (void)drawRect:(CGRect)rect这个方法,我们只需要方法
中绘制贝塞尔曲线以及提示文本信息即可.在绘制的过程中,我们只需要把selectedButtons中每一个Button的中心设置为线段的转折点即可.

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

}

SDLockView的相关使用就说这么多了,如果您对SDLockView有任何疑义,欢迎提出,谢谢.最后附上SDLockView的github的传送门.

</b>

-->SDLockView的传送门💾