Swift手势密码库,用这一个就够了!

3,479 阅读2分钟

一个轻量级、面对协议编程、高度自定义的 图形解锁/手势解锁 / 手势密码 / 图案密码 / 九宫格密码

相比于其他同类三方库有哪些优势:

  • 完全面对协议编程,支持高度自定义网格视图连接线视图,轻松实现各类不同需求;
  • 默认支持多种配置效果,支持大部分主流效果,引入就可以搞定需求;
  • 源码采用Swift5编写,通过泛型、枚举、函数式编程优化代码,具有更高的学习价值;
  • 后期会持续迭代,不断添加主流效果;

Github地址

JXPatternLock

效果预览

说明 Gif
箭头
中间点自动连接
小灰点
小白点
荧光蓝
fill白色
阴影
图片
旋转(鸡你太美)
破折线
图片连接线(箭头)
图片连接线(小鱼儿)
设置密码
修改密码
验证密码

使用

初始化PatternLockViewConfig

方式一:使用LockConfig

LockConfig是默认提供的类,实现了PatternLockViewConfig协议。可以直接通过LockConfig的属性进行自定义。

let config = LockConfig()
config.gridSize = CGSize(width: 70, height: 70)
config.matrix = Matrix(row: 3, column: 3)
config.errorDisplayDuration = 1

方式二:新建实现PatternLockViewConfig协议的类

该方式可以将所有配置细节聚集到自定义类的内部,外部只需要初始化自定义类即可。详情请参考demo里面的ArrowConfig类。这样有个好处就是,多个地方都需要用到同样配置的时候,只需要初始化相同的类,而不用像使用LockConfig那样,复制属性配置代码。

struct ArrowConfig: PatternLockViewConfig {
    var matrix: Matrix = Matrix(row: 3, column: 3)
    var gridSize: CGSize = CGSize(width: 70, height: 70)
    var connectLine: ConnectLine?
    var autoMediumGridsConnect: Bool = false
    //其他属性配置!只是示例,就不显示所有配置项,影响文档长度
}

配置GridView

config.initGridClosure = {(matrix) -> PatternLockGrid in
    let gridView = GridView()
    let outerStrokeLineWidthStatus = GridPropertyStatus<CGFloat>.init(normal: 1, connect: 2, error: 2)
    let outerStrokeColorStatus = GridPropertyStatus<UIColor>(normal: tintColor, connect: tintColor, error: .red)
    gridView.outerRoundConfig = RoundConfig(radius: 33, lineWidthStatus: outerStrokeLineWidthStatus, lineColorStatus: outerStrokeColorStatus, fillColorStatus: nil)
    let innerFillColorStatus = GridPropertyStatus<UIColor>(normal: nil, connect: tintColor, error: .red)
    gridView.innerRoundConfig = RoundConfig(radius: 10, lineWidthStatus: nil, lineColorStatus: nil, fillColorStatus: innerFillColorStatus)
    return gridView
}

配置ConnectLine

let lineView = ConnectLineView()
lineView.lineColorStatus = .init(normal: tintColor, error: .red)
lineView.triangleColorStatus = .init(normal: tintColor, error: .red)
lineView.isTriangleHidden = false
lineView.lineWidth = 3
config.connectLine = lineView

初始化PatternLockView

lockView = PatternLockView(config: config)
lockView.delegate = self
view.addSubview(lockView)

结构

完全遵从面对协议开发。 PatternLockView依赖于配置协议PatternLockViewConfig。 配置协议配置网格协议PatternLockGrid和连接线协议ConnectLine

Github地址

JXPatternLock