验证码输入框

今天写到一个验证码登录框,不是传统的样式,上图,(删除验证码的时候下划线的颜色也会变回去,切图不精)

未命名.gif

代码如下:记录一下

import UIKit

class CodeView: UIView {
    var itemCount :Int?
    var margin:CGFloat?
    var labels : [UILabel] = []
    var lines : [UIView]=[]
    var maView : UIButton = {
        let maView = UIButton()
        maView.contentHorizontalAlignment = .left
        maView.setTitle("输入验证码", for: .normal)
        maView.setTitleColor(UIColor.init(red: 162/255, green: 162/255, blue: 166/255, alpha: 0.6), for: .normal)
        maView.titleLabel?.font = UIFont.systemFont(ofSize: 17)
        maView.backgroundColor = UIColor.init(red: 239/255, green: 239/255, blue: 244/255, alpha: 1)
        return maView;
    }()
    lazy var codeTextField : UITextField = {
        let textField = UITextField()
        textField.autocapitalizationType = .none
        textField.keyboardType = .numberPad
        return textField;
    }()
    var code : String?
    
  func initWithCountAndMargin(count:Int, margin:CGFloat){
        self.itemCount = count
        self.margin = margin
        configTextField()
    }
    func configTextField() {
        self.backgroundColor = UIColor.init(red: 239/255, green: 239/255, blue: 244/255, alpha: 1)
        self.codeTextField.addTarget(self, action: #selector(inputChanged), for: .editingChanged)
      self.addSubview(self.codeTextField)
         self.maView.addTarget(self, action: #selector(clickMaskView), for: .touchUpInside)
        self.addSubview(self.maView)
        for _ in 0..<self.itemCount! {
            let tempLabel = UILabel()
            tempLabel.textAlignment = .center
            tempLabel.font = UIFont.systemFont(ofSize: 20)
            self.addSubview(tempLabel)
            self.labels?.append(tempLabel)
        }
        for _ in 0..<self.itemCount! {
            let tempView = UIView()
            tempView.backgroundColor  = UIColor.init(red: 162/255, green: 162/255, blue: 166/255, alpha: 0.6)
            self.addSubview(tempView)
            self.lines?.append(tempView)
        }
    }
    @objc func inputChanged(tetextField : UITextField)  {
        if (tetextField.text?.count)! == 0{
             maView.setTitle("输入验证码", for: .normal)
        }else{
        self.maView.setTitle("", for: .normal)
        }
        if (tetextField.text?.count)! > self.itemCount! {
            tetextField.text = (tetextField.text! as NSString).substring(with: NSMakeRange(0, self.itemCount!))
    }
       for i in 0..<self.itemCount! {
        let label = self.labels![i]
        let line = self.lines![i]
          if (i < tetextField.text!.count) {
            label.text = (tetextField.text! as NSString).substring(with: NSMakeRange(i, 1))
            line.backgroundColor = UIColor.init(red: 42/255, green: 207/255, blue: 96/255, alpha: 1)
          } else {
            label.text = nil;
          }
      }
    
    
    // 输入完毕后，自动隐藏键盘
    if (tetextField.text!.count >= self.itemCount!) {
        tetextField.resignFirstResponder()
        self.code = tetextField.text!
    }
    }
    @objc func clickMaskView()  {
        self.codeTextField.becomeFirstResponder()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        if self.labels?.count != self.lines?.count {
            return
        }
        let temp = self.bounds.size.width - (self.margin! * CGFloat.init(self.itemCount! - 1))
        let w = temp / CGFloat.init(self.itemCount!);
        var _ : CGFloat = 0
        
        for i in 0..<self.labels!.count {
            let x = CGFloat.init(i) * (w + self.margin!);
            let label = self.labels![i];
            label.frame = CGRect.init(x: x, y: 0, width: w, height: self.bounds.size.height)

            let line = self.lines![i];
            line.frame = CGRect.init(x: x, y: self.bounds.size.height - 1, width: w, height: 1)
        }
        
        self.codeTextField.frame = self.bounds;
        self.maView.frame = self.bounds;
    }
    override func endEditing(_ force: Bool) -> Bool {
        self.codeTextField.endEditing(force)
        return super.endEditing(force)
    }
}