iOS验证码自定义输入框

CodeView

预览图

border.png

line.png

新增cocoapods支持

更新说明
现在已经支持pod集成 Sam_CodeVIew

source 'https://github.com/SamXZP/Sam_CodeViewSpec.git'  //在podfile 里面加上私有库源
pod 'Sam_CodeView', '1.0.1'

介绍

CodeView 是一个可以高度自定义手机验证码输入的控件。

下面介绍下CodeViewswift版本的原理和用法

原理基于UITextField，使用UILabel来代替验证码的显示，使用CAShapeLayer代替光标的显示，使用CALayer绘制底部线条。根据UITextField的文字变化的监听，去改变光标的显示位置和验证码的下划线或边框的风格。

使用方法


let view = CodeView.init(frame: CGRect.init(x: 50, y: 160, width: SCREEN_WIDTH-100, height: 50),codeNumber: 4,style: .CodeStyle_line)
view.codeBlock = { [weak self] code in
    print("\n\n=======>您输入的验证码是：\(code)")
}
self.view.addSubview(view)

自定义属性介绍：

codeNumber 验证码的长度，一般是4/6位默认6位

margin CodeView 两个验证码之间的间距，可以自定义，默认12

style 验证码输入的风格，可根据自己的需求选择

labelFont 验证码字体大小

labelTextColor 验证码字体颜色

mainColor 光标颜色和输入验证码的边框、线条主颜色

normalColor 光标颜色和输入验证码的边框、线条普通颜色

主要代码

根据UITextField的text改变，移动光标


@objc func textChage(_ textField: UITextField) {

    var verStr:String = textField.text ?? ""
    
    if verStr.count > codeNumber {
        let substring = textField.text?.prefix(codeNumber)
        textField.text = String(substring ?? "")
        verStr = textField.text ?? ""
    }
    
    if  verStr.count >= codeNumber {
        if (self.codeBlock != nil) {
           self.codeBlock?(textField.text ?? "")
        }
    }

    for index in 0..<codeNumber {
        let label:UILabel = labelArray[index]
        if (index < verStr.count){
            let str : NSString = verStr as NSString
            label.text = str.substring(with: NSMakeRange(index, 1))
        }
        else{
            label.text = ""
        }
        
        changeOpacityAnimalForShapeLayerWithIndex(index: index, hidden: index == verStr.count ? false : true)
        changeColorForLayerWithIndex(index: index, hidden: index > verStr.count ? false : true)
    }
}

Author

Sam , gztzxzp@gmail.com

最后编辑于：2020.07.08 16:30:00