iOS-Swift 自定义 TextField

纯代码实现自定义的文本输入框，具体实现功能如下

• 文本输入框
• 前后可设置图标按钮
• 可检测输入文本
• 可设置错误状态颜色
• 可设置左上小标题
• 可可视化使用
• 可实现密码输入

//
//  CustomTextField.swift
//  
//
//  Created by mac min on 2020/11/30.
//  Copyright © 2020 huangzhengguo. All rights reserved.
//

import UIKit

@IBDesignable
class CustomTextField: UIView, UITextFieldDelegate {
    // 错误信息高度
    private let errorLabelHeight: CGFloat = 16.0
    private let contentViewBorderWidth: CGFloat = 1.5
    
    // 内容视图
    let contentView: UIView = UIView()
    
    // 输入框
    let textField: UITextField = UITextField()
    // 文字
    @IBInspectable var text: String? {
        get {
            return self.textField.text
        }
        
        set (newValue) {
            self.textField.text = newValue
        }
    }
    // 是否可编辑
    @IBInspectable var isEdit: Bool {
        get {
            return self.textField.isEnabled
        }
        
        set (newValue) {
            self.textField.isEnabled = newValue
        }
    }
    // 文字颜色
    @IBInspectable var textColor: UIColor {
        get {
            if self.textField.textColor == nil {
                return .lightGray
            }
            return self.textField.textColor!
        }
        
        set (newValue) {
            self.textField.textColor = newValue
        }
    }
    // 边框颜色
    @IBInspectable var borderColor: UIColor = GlobalConstant.DARK_GREEN
    // 前面图像
    @IBInspectable var image: UIImage? {
        get {
            return self.headerImageView.image
        }
        
        set (newValue) {
            self.headerImageView.image = newValue
        }
    }
    // 是否显示前面图像
    @IBInspectable var isImageVisible: Bool {
        get {
            if self.headerImageView.isHidden == true {
                return false
            }
            return true
        }
        
        set (newValue) {
            if newValue == true {
                self.headerImageView.isHidden = false
            } else {
                self.headerImageView.isHidden = true
            }
        }
    }
    // 占位符
    @IBInspectable var placeholder: String? {
        get {
            return self.textField.placeholder
        }
        
        set (newValue) {
            self.topTitleLabel?.text = newValue
            if self.isTopTitleVisible == false {
                self.textField.placeholder = newValue
            }
        }
    }
    // 占位符颜色
    @IBInspectable var placeholderColor: UIColor {
        get {
            return .lightGray
        }
        
        set (newValue) {
            if self.placeholder == nil || self.placeholder?.count == 0 {
                return
            }
            
            let placeholderAttributedString = NSMutableAttributedString.init(string: self.placeholder!)
            
            placeholderAttributedString.addAttribute(NSAttributedString.Key.foregroundColor, value: newValue, range: NSRange.init(location: 0, length: self.placeholder!.count))
            
            self.textField.attributedPlaceholder = placeholderAttributedString
        }
    }
    // 是否是密码框
    @IBInspectable var isPasswordTextField: Bool = false
    // 是否隐藏输入
    @IBInspectable var secureTextEntry: Bool {
        get {
            return self.textField.isSecureTextEntry
        }
        
        set (newValue) {
            self.textField.isSecureTextEntry = newValue
        }
    }
    // 小图标
    @IBInspectable var iconImage: UIImage? {
        get {
            return self.iconButton.imageView?.image
        }
        
        set (newValue) {
            if newValue != nil {
                self.iconButton.setImage(newValue, for: .normal)
            }
        }
    }
    // 小图标处文字
    @IBInspectable var iconText: String? {
        get {
            return self.iconButton.titleLabel?.text
        }
        
        set (newValue) {
            if newValue != nil {
                self.iconButton.setTitleColor(GlobalConstant.DARK_GREEN, for: .normal)
                self.iconButton.setTitle(newValue, for: .normal)
            }
        }
    }
    // 小图标处文字颜色
    @IBInspectable var iconTextColor: UIColor? {
        get {
            return self.iconButton.titleColor(for: .normal)
        }
        
        set (newValue) {
            if newValue != nil {
                self.iconButton.setTitleColor(newValue, for: .normal)
            }
        }
    }
    // 是否显示小图标
    @IBInspectable var isIconVisible: Bool {
        get {
            if self.iconButton.isHidden == true {
                return false
            }
            
            return true
        }
        
        set (newValue) {
            if newValue == true {
                self.iconButton.isHidden = false
            } else {
                self.iconButton.isHidden = true
            }
        }
    }
    // 是否显示标题
    @IBInspectable var isTopTitleVisible: Bool {
        get {
            if self.topTitleLabel?.isHidden == true {
                return false
            }
            
            return true
        }
        
        set (newValue) {
            if newValue == true {
                self.topTitleLabel?.isHidden = false
                self.placeholderColor = .clear
                self.contentView.layer.borderColor = UIColor.clear.cgColor
            } else {
                self.topTitleLabel?.isHidden = true
                self.textField.placeholder = self.placeholder
                self.contentView.layer.borderColor = UIColor.white.cgColor
                if self.placeholder != nil {
                    let placeholderAttributedString = NSMutableAttributedString.init(string: self.placeholder!)
                    
                    placeholderAttributedString.addAttribute(NSAttributedString.Key.foregroundColor, value: self.placeholderColor, range: NSRange.init(location: 0, length: self.placeholder!.count))
                    
                    self.textField.attributedPlaceholder = placeholderAttributedString
                }
            }
        }
    }
    // 是否一直显示标题
    @IBInspectable var isAlwaysTopTitleVisible: Bool = false
    // 输入状态颜色
    @IBInspectable var editingStateColor: UIColor = GlobalConstant.DARK_GREEN
    // 错误状态颜色
    @IBInspectable var errorStateColor: UIColor = GlobalConstant.DARK_GREEN
    // 是否显示错误信息
    @IBInspectable var isErrorState: Bool {
        get {
            return !self.errorLabel.isHidden
        }
        
        set (newValue) {
            if newValue == true {
                self.topTitleLabel?.textColor = self.errorStateColor
                self.contentView.layer.borderColor = UIColor.clear.cgColor
            } else {
                self.topTitleLabel?.textColor = self.placeholderColor
                if self.isTopTitleVisible == false {
                    self.contentView.layer.borderColor = UIColor.lightGray.cgColor
                }
            }
            
            self.errorLabel.isHidden = !newValue
            
            self.setNeedsDisplay()
        }
    }
    
    // 错误信息
    @IBInspectable var errorMessage: String? {
        get {
            return self.errorLabel.text
        }
        
        set (newValue) {
            self.errorLabel.text = newValue
        }
    }
    
    /**
     * 小图标点击回调
     * 参数：
     * 1. 当前实例
     * 2. 图标按钮
     * 3. 是否隐藏当前输入
     */
    var iconButtonClickCallback: ((CustomTextField, UIButton, Bool) -> Void)?
    
    // 输入检测回调
    var textFieldEditingCallback: ((CustomTextField, String?, NSRange, String?) -> Bool)?
    
    // 附加控件
    // 顶部小标题
    private var topTitleLabel: UILabel?
    // 前面图标
    private var headerImageView: UIImageView = UIImageView.init(frame: CGRect.zero)
    // 后面图标
    private var iconButton: UIButton = UIButton.init(frame: CGRect.zero)
    // 错误信息
    private var errorLabel: UILabel = UILabel.init(frame: CGRect.zero)
    // 光标是否在输入框内，是否正在编辑
    private var isEditing: Bool?
    
    // MARK: 支持代码创建
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.setViewsWithFrame(frame: CGRect.zero)
    }
    
    // MARK: 支持XIB创建
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
        self.setViewsWithFrame(frame: CGRect.zero)
    }
    
    // 初始化
    private func setViewsWithFrame(frame: CGRect) -> Void {
        // 内容： 包含输入框 图标等
        self.contentView.layer.borderWidth = 1.5
        self.contentView.layer.borderColor = UIColor.lightGray.cgColor
        self.contentView.layer.cornerRadius = 3.0
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
        
        self.addSubview(self.contentView)
        
        // 顶部小标题
        self.topTitleLabel = UILabel.init(frame: CGRect.zero)
        self.topTitleLabel!.textColor = .lightGray
        self.topTitleLabel!.font = UIFont.systemFont(ofSize: 13.0)
        self.topTitleLabel!.translatesAutoresizingMaskIntoConstraints = false
        
        self.contentView.addSubview(self.topTitleLabel!)
        
        // 前端图片
        self.headerImageView.translatesAutoresizingMaskIntoConstraints = false
        
        self.contentView.addSubview(self.headerImageView)
        
        // 输入框
        self.textField.translatesAutoresizingMaskIntoConstraints = false
        self.textField.delegate = self
        self.textField.autocapitalizationType = .none

        self.contentView.addSubview(self.textField)
        
        // 尾部小按钮图标
        self.iconButton.translatesAutoresizingMaskIntoConstraints = false
        self.iconButton.addTarget(self, action: #selector(iconButtonClickAction), for: .touchUpInside)
        
        self.contentView.addSubview(self.iconButton)
        
        // 错误信息控件
        self.errorLabel.translatesAutoresizingMaskIntoConstraints = false
        self.errorLabel.font = UIFont.systemFont(ofSize: 13.0)
        self.errorLabel.textColor = self.errorStateColor
        
        self.contentView.addSubview(self.errorLabel)
        
        // 默认设置
        self.textColor = .lightGray
        self.isImageVisible = true
        self.isIconVisible = false
        self.placeholderColor = .lightGray
        self.isTopTitleVisible = false
        self.isAlwaysTopTitleVisible = false
        self.isEdit = true
        self.isPasswordTextField = false
        self.isErrorState = false
    }

    // MARK: 小图标点击方法
    @objc func iconButtonClickAction(sender: UIButton) -> Void {
        // 如果是密码框
        if (self.isPasswordTextField == true) {
            if (self.secureTextEntry == true) {
                self.iconImage = UIImage.init(named: "baseline_visibility_white_48pt")
            } else {
                self.iconImage = UIImage.init(named: "baseline_visibility_off_white_48pt")
            }
            
            self.secureTextEntry = !self.secureTextEntry
        }
        
        self.iconButtonClickCallback?(self, sender, self.secureTextEntry)
    }
    
    // MARK: 实时更新到 InterfaceBuilder
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        
        self.setConstraints()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.setConstraints()
    }
    
    // MARK: 开始输入
    func textFieldDidBeginEditing(_ textField: UITextField) {
        self.isTopTitleVisible = true
        self.isEditing = true
        
        self.setNeedsDisplay()
    }
    
    // MARK: 检测输入
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // 退出错误状态
        self.isErrorState = false
        self.errorMessage = ""
        
        if self.textFieldEditingCallback != nil {
            return self.textFieldEditingCallback!(self, textField.text, range, string)
        }
        
        return true
    }
    
    // MARK: 结束输入
    func textFieldDidEndEditing(_ textField: UITextField) {
        self.isEditing = false
        
        // 检测文本是否为空，如果为空，则重新显示占位符
        if self.isAlwaysTopTitleVisible == false {
            if textField.text?.count == 0 {
                textField.placeholder = self.placeholder
                self.isTopTitleVisible = false
                
                if self.isErrorState == true {
                    self.contentView.layer.borderColor = self.errorStateColor.cgColor
                } else {
                    self.contentView.layer.borderColor = UIColor.lightGray.cgColor
                }
            }
        }
        
        self.setNeedsDisplay()
    }
    
    override func draw(_ rect: CGRect) {
        // 绘制边框
        self.clearsContextBeforeDrawing = true
        
        // 设置线条颜色
        var color: UIColor = .clear
        if self.isEditing == true || self.isTopTitleVisible == true {
            color = self.editingStateColor
        }
        
        if self.isEditing == false && self.isTopTitleVisible == true {
            color = UIColor.lightGray
        }
        
        if self.isErrorState == true {
            color = self.errorStateColor
        }

        color.set()
        
        var bezierPath = UIBezierPath.init()
        
        let cornerRadius: CGFloat = 5
        let height: CGFloat = self.frame.size.height
        let width: CGFloat = self.frame.size.width
        let lineWidth: CGFloat = 1.0
        
        // 绘制边框
        bezierPath.move(to: CGPoint.init(x: (self.topTitleLabel?.frame.origin.x)! - 8, y: 0))
        bezierPath.addLine(to: CGPoint.init(x: cornerRadius, y: 0))
        bezierPath.move(to: CGPoint.init(x: 0, y: cornerRadius))
        bezierPath.addLine(to: CGPoint.init(x: 0, y: height - cornerRadius - errorLabelHeight))
        bezierPath.move(to: CGPoint.init(x: cornerRadius, y: height - errorLabelHeight))
        bezierPath.addLine(to: CGPoint.init(x: width - cornerRadius, y: height - errorLabelHeight))
        bezierPath.move(to: CGPoint.init(x: width, y: height - cornerRadius - errorLabelHeight))
        bezierPath.addLine(to: CGPoint.init(x: width, y: cornerRadius))
        bezierPath.move(to: CGPoint.init(x: width - cornerRadius, y: 0))
        bezierPath.addLine(to: CGPoint.init(x: (self.topTitleLabel?.frame.origin.x)! + (self.topTitleLabel?.frame.size.width)! + 8, y: 0))
        
        bezierPath.lineWidth = lineWidth
        
        bezierPath.stroke()
        
        // 绘制左上角
        bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: CGFloat.pi, endAngle: 3.0 * CGFloat.pi / 2.0, clockwise: true)
            
        bezierPath.lineWidth = lineWidth
        
        bezierPath.stroke()
        
        // 绘制左下角
        bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: cornerRadius, y: height - cornerRadius - self.errorLabelHeight), radius: cornerRadius, startAngle: CGFloat.pi / 2.0, endAngle: CGFloat.pi, clockwise: true)
            
        bezierPath.lineWidth = lineWidth
        
        bezierPath.stroke()
        
        // 绘制右下角
        bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: width - cornerRadius, y: height - cornerRadius - self.errorLabelHeight), radius: cornerRadius, startAngle: 0, endAngle: CGFloat.pi / 2.0, clockwise: true)
        
        bezierPath.lineWidth = lineWidth
        
        bezierPath.stroke()
        
        // 绘制右上角
        bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: width - cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: 3.0 * CGFloat.pi / 2.0, endAngle: 0, clockwise: true)

        bezierPath.lineWidth = lineWidth
        
        bezierPath.stroke()
    }
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        
        return true
    }
    
    private func setConstraints() -> Void {
        let contentViewLeading = NSLayoutConstraint.init(item: self.contentView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
        let contentViewTop = NSLayoutConstraint.init(item: self.contentView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
        let contentViewBottom = NSLayoutConstraint.init(item: self.contentView, attribute: .bottom, relatedBy: .equal, toItem: self.errorLabel, attribute: .top, multiplier: 1.0, constant: 0.0)
        let contentViewTrailing = NSLayoutConstraint.init(item: self.contentView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)

        self.addConstraints([contentViewLeading, contentViewTop, contentViewBottom, contentViewTrailing])
        
        // 错误信息：底部预留高度固定的 label 作为错误信息显示
        let errorLabelLeading = NSLayoutConstraint.init(item: self.errorLabel, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
        let errorLabelTrailing = NSLayoutConstraint.init(item: self.errorLabel, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)
        let errorLabelBottom = NSLayoutConstraint.init(item: self.errorLabel, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0.0)
        let errorLabelHeight = NSLayoutConstraint.init(item: self.errorLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: self.errorLabelHeight)
        
        self.addConstraints([errorLabelLeading, errorLabelTrailing, errorLabelBottom, errorLabelHeight])
        
        // 图片约束
        let headerImageLeading = NSLayoutConstraint.init(item: self.headerImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 8.0)
        let headerImageTop = NSLayoutConstraint.init(item: self.headerImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 8.0)
        let headerImageBottom = NSLayoutConstraint.init(item: self.headerImageView, attribute: .bottom, relatedBy: .equal, toItem: self.contentView, attribute: .bottom, multiplier: 1.0, constant: -8.0)
        var headerImageWidth = NSLayoutConstraint.init(item: self.headerImageView, attribute: .width, relatedBy: .equal, toItem: self.headerImageView, attribute: .height, multiplier: 1.0, constant: 0.0)
            
        if self.isImageVisible == false {
            // 如果图标不可见，设置宽度为0的约束
            headerImageWidth = NSLayoutConstraint.init(item: self.headerImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 0.0)
        }
        
        self.addConstraints([headerImageLeading, headerImageTop, headerImageBottom, headerImageWidth])
        
        // 小图标约束
        let iconButtonTop = NSLayoutConstraint.init(item: self.iconButton, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 8.0)
        let iconButtonBottom = NSLayoutConstraint.init(item: self.iconButton, attribute: .bottom, relatedBy: .equal, toItem: self.contentView, attribute: .bottom, multiplier: 1.0, constant: -8.0)
        let iconButtonTrailing = NSLayoutConstraint.init(item: self.iconButton, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: -8.0)
        var iconButtonWidth = NSLayoutConstraint.init(item: self.iconButton, attribute: .width, relatedBy: .equal, toItem: self.iconButton, attribute: .height, multiplier: 1.0, constant: 0.0)
        if self.isIconVisible == false {
            // 如果图标不可见，设置宽度为0的约束
            iconButtonWidth = NSLayoutConstraint.init(item: self.iconButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 0.0)
        }
        
        self.addConstraints([iconButtonTop, iconButtonBottom, iconButtonTrailing])
        
        if self.iconText == nil || self.iconText!.count <= 0 {
            self.addConstraint(iconButtonWidth)
        }
        
        // 输入框约束
        let textFieldImageLeading = NSLayoutConstraint.init(item: self.textField, attribute: .leading, relatedBy: .equal, toItem: self.headerImageView, attribute: .trailing, multiplier: 1.0, constant: 8.0)
        let textFieldImageTop = NSLayoutConstraint.init(item: self.textField, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
        let textFieldImageBottom = NSLayoutConstraint.init(item: self.textField, attribute: .bottom, relatedBy: .equal, toItem: self.contentView, attribute: .bottom, multiplier: 1.0, constant: 0.0)
        let textFieldTrailing = NSLayoutConstraint.init(item: self.textField, attribute: .trailing, relatedBy: .equal, toItem: self.iconButton, attribute: .leading, multiplier: 1.0, constant: 0.0)

        self.addConstraints([textFieldImageLeading, textFieldImageTop, textFieldImageBottom, textFieldTrailing])

        // 顶部标题
        let topTitleLableLeading = NSLayoutConstraint.init(item: self.topTitleLabel!, attribute: .leading, relatedBy: .equal, toItem: self.headerImageView, attribute: .trailing, multiplier: 1.0, constant: 8.0)
        let topTitleLableVerticalCenter = NSLayoutConstraint.init(item: self.topTitleLabel!, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
            
        self.addConstraints([topTitleLableLeading, topTitleLableVerticalCenter])
    }
    
}