Swift-支付密码输入视图

前言:
本篇记录的是支付密码的输入视图

目录:
一、效果图展示
二、代码展示
三、使用方法

一、效果图展示

二、代码展示

 import UIKit
 
 class HanPasswordView: UIView,UITextFieldDelegate  {
 
     typealias EntryCompleteBlock = (_ tfVlaue: UITextField) -> Void
     var entryCompleteBlock:EntryCompleteBlock?
     
     
     // 图层数组
     var roundLayerArray = [CALayer]()
 
     
     override init(frame: CGRect) {
         super.init(frame: frame)
         
         self.backgroundColor = .white
         setUpUI()
         
     }
     
     required init?(coder aDecoder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
     
  
     /// 配置UI
     func setUpUI() -> Void {
         
         let w = getWidth()
         let h = w
         
        let tf = CustomTextField.init(frame: CGRect(x:(self.frame.size.width - w * 6) / 2, y: 0, width: w * 6, height: h))
         tf.delegate = self
         tf.textColor = .clear
         tf.tintColor = .clear
         tf.layer.masksToBounds = true
         tf.layer.borderWidth = 1
         tf.layer.borderColor = RGBAlpa(204,204,204,1).cgColor
         tf.backgroundColor = UIColor.white
         tf.keyboardType = .numberPad
        self.addSubview(tf)
         
        tf.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
         
         for i in 0...5 {
             
             let lineLayer = CALayer()
             lineLayer.frame = CGRect(x: (CGFloat(i) * w), y: 0, width: 1, height: h)
             lineLayer.backgroundColor = RGBAlpa(204,204,204,1).cgColor
             tf.layer.addSublayer(lineLayer)
             
             let roundLayer = CALayer()
             roundLayer.frame = CGRect.init(x:(CGFloat(i) * w) + w * 0.375 , y: h * 0.375, width: w * 0.25, height: h * 0.25)
             roundLayer.cornerRadius = h * 0.125
            roundLayer.isHidden = true
             roundLayer.backgroundColor = UIColor.black.cgColor
             tf.layer.addSublayer(roundLayer)
             
             roundLayerArray.append(roundLayer)
         }
         
         
     }
     
     // 方格宽度的确定
     func getWidth() -> CGFloat {
         let w = (self.frame.size.width * 0.8) / 6
         let h = self.frame.size.height
         if w > h {
             return h
         }
         return w
     }
   
    
     @objc func textFieldDidChange(_ textField:UITextField)
     {
         for layer in roundLayerArray {
             layer.isHidden = true
         }
         
         for i in 0..<(textField.text?.count)!{
             let layer = roundLayerArray[i]
             layer.isHidden = false
         }
         if textField.text?.count == 6 {//输入完毕，可以进行相关的操作
             self.entryCompleteBlock!(textField)
         }
         
     }
    
     //MARK:UITextFieldDelegate
     func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
         let proposeLength = (textField.text?.lengthOfBytes(using: String.Encoding.utf8))! - range.length + string.lengthOfBytes(using: String.Encoding.utf8)
         if proposeLength > 6{//输入的字符个数大于6，忽略输入，可以进行相关的操作
             return false
         }else{
             return true
         }
     }
     
 }
 
 
 // MARK:重写UITextField
 class CustomTextField: UITextField {
     // 禁止复制粘贴弹框
     
     override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
         return false
     }
 }

三、使用方法

  let hanpwd = HanPasswordView.init(frame:CGRect.init(x: 0, y: 100~, width: SCREEN_WIDTH, height: 50))
   hanpwd.backgroundColor = UIColor.init(hexString: "f5f5f5")
   hanpwd.entryCompleteBlock = entryCompleteBlock
   self.view.addSubview(hanpwd)

 // 输入密码回调
     func entryCompleteBlock(tfValue: UITextField) ->Void{
         print("\(tfValue.text!)")
     }