美文网首页
iOS 多一种验证码输入实现

iOS 多一种验证码输入实现

作者: cs_mark | 来源:发表于2018-10-25 14:41 被阅读0次
    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<UITouch>, 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()
            }
        }
    }
    
    

    相关文章

      网友评论

          本文标题:iOS 多一种验证码输入实现

          本文链接:https://www.haomeiwen.com/subject/xvrqtqtx.html