iOS 多一种验证码输入实现

image.png

现在很多App采用了类似下划线、方块等方式的验证码输入，直观美观！对于这种效果的实现方式，大概有以下几种方式：

1.多个UITextField组成

这种方式好处是有光标闪烁、但是在处理删除和动画效果时，就会显得有点笨拙，OFO应该是这样实现的，要严格处理好每个UITextField的FirstResponder。

2.一个UITextField组成，使用富文本

这个方式是可行的， 使用富文本设置每个字符的间距，允许编辑富文本，有光标闪烁，缺点应该也是不好处理动画效果。

3.由一个UIView组成，使用UIKeyInput输入数字，并用重绘的方式来展示。

import UIKit

protocol DigitalPasswordViewDelegate: NSObjectProtocol {
    func dpBeginInput(dpView: DigitalPasswordView)
    
    func dpFinishedInput(dpView: DigitalPasswordView)
    
    func passwordDidChanged(dpView: DigitalPasswordView)
}

class DigitalPasswordView: UIView, UIKeyInput, UITextInputTraits {
    
    private var _places: Int = 6//位数
    var places: Int {
        get {return _places}
        set {
            _places = newValue
            self.setNeedsDisplay()
        }
    }
    
    private var _pointColor: UIColor = UIColor.black
    var pointColor: UIColor {
        get {return _pointColor}
        set {
            _pointColor = newValue
            self.setNeedsDisplay()
        }
    }
    
    private var _pointRadius: CGFloat = 6
    var pointRadius: CGFloat {
        get {return _pointRadius}
        set {
            _pointRadius = newValue
            self.setNeedsDisplay()
        }
    }
    
    private var _borderColor: UIColor = UIColor.disabled()
    var borderColor: UIColor {
        get {return _borderColor}
        set {
            _borderColor = newValue
            self.layer.borderColor = _borderColor.cgColor
            self.setNeedsDisplay()
        }
    }
    
    var keyboardType: UIKeyboardType = UIKeyboardType.numberPad

    private var _password: String = ""
    var password: String {
        get {return _password}
        
        set {
            _password = newValue
            self.setNeedsDisplay()
        }
    }
    
    var dpDelegate: DigitalPasswordViewDelegate?
    
    static let members = "0123456789"
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        initializer()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        initializer()
    }
    
    func initializer() {
        self.backgroundColor = UIColor.white
        
        self.layer.borderColor = _borderColor.cgColor
        self.layer.borderWidth = 0.5
        self.layer.masksToBounds = true
        self.layer.cornerRadius = 3.0
        
        _ = self.becomeFirstResponder()
    }
    
    override func becomeFirstResponder() -> Bool {
        if dpDelegate != nil {
            dpDelegate?.dpBeginInput(dpView: self)
        }
        return super.becomeFirstResponder()
    }
    
    override var canBecomeFirstResponder: Bool {
        return true
    }
    
    override func touchesBegan(_ touches: Set, with event: UIEvent?) {
        if !self.isFirstResponder {
            _ = self.becomeFirstResponder()
        }
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let width = rect.width / CGFloat(_places)
        let height = rect.height
        
        let context = UIGraphicsGetCurrentContext()
        context?.setLineWidth(0.5)
        context?.setStrokeColor(_borderColor.cgColor)
        context?.setFillColor(UIColor.blue.cgColor)
        
        for i in 1 ..< _places {
            context?.move(to: CGPoint(x: CGFloat(i)*width, y: 0))
            context?.addLine(to: CGPoint(x: CGFloat(i)*width, y: height))
            context?.closePath()
        }
        
        context?.drawPath(using: CGPathDrawingMode.fillStroke)
        context?.setFillColor(_pointColor.cgColor)
        
        for i in 1 ..< _password.characters.count+1 {
            context?.addArc(center: CGPoint(x: CGFloat(i)*width-width/2.0, y: height/2.0), radius: pointRadius, startAngle: 0, endAngle: CGFloat.pi*2, clockwise: true)
            context?.drawPath(using: CGPathDrawingMode.fill)
        }
    }
    
    //REMARK --UIKeyInput
    var hasText: Bool {
        return _password.characters.count > 0
    }
    
    func insertText(_ text: String) {
        if _password.characters.count < _places {
            let cs: CharacterSet = CharacterSet(charactersIn: DigitalPasswordView.members).inverted
            let filtered = text.components(separatedBy: cs).joined(separator: "")
            if text == filtered {
                _password.append(text)
                if dpDelegate != nil {
                    dpDelegate?.passwordDidChanged(dpView: self)
                }
                if _password.characters.count == _places {
                    dpDelegate?.dpFinishedInput(dpView: self)
                }
                self.setNeedsDisplay()
            }
        }
    }
    
    func deleteBackward() {
        if _password.characters.count > 0 {
            _password.remove(at: _password.index(before: _password.endIndex))
            if dpDelegate != nil {
                dpDelegate?.passwordDidChanged(dpView: self)
            }
            self.setNeedsDisplay()
        }
    }
}