CodeView

預(yù)覽圖

border.png

line.png

新增cocoapods支持

更新說明
現(xiàn)在已經(jīng)支持pod集成 Sam_CodeVIew

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

介紹

CodeView 是一個(gè)可以高度自定義手機(jī)驗(yàn)證碼輸入的控件。

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

原理 基于UITextField，使用UILabel來代替驗(yàn)證碼的顯示，使用CAShapeLayer代替光標(biāo)的顯示，使用CALayer繪制底部線條。根據(jù)UITextField的文字變化的監(jiān)聽，去改變光標(biāo)的顯示位置和驗(yàn)證碼的下劃線或邊框的風(fēng)格。

使用方法

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=======>您輸入的驗(yàn)證碼是：\(code)")
}
self.view.addSubview(view)

自定義屬性介紹：

codeNumber 驗(yàn)證碼的長度，一般是4/6位 默認(rèn)6位

margin CodeView 兩個(gè)驗(yàn)證碼之間的間距，可以自定義，默認(rèn)12

style 驗(yàn)證碼輸入的風(fēng)格，可根據(jù)自己的需求選擇

labelFont 驗(yàn)證碼字體大小

labelTextColor 驗(yàn)證碼字體顏色

mainColor 光標(biāo)顏色和輸入驗(yàn)證碼的邊框、線條 主顏色

normalColor 光標(biāo)顏色和輸入驗(yàn)證碼的邊框、線條 普通顏色

主要代碼

根據(jù)UITextField的text改變，移動(dòng)光標(biāo)

@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