Swift5中自定义带附加UI元素的输入框：子类化UITextField还是用UIView？

为什么不推荐子类化UITextField #

UITextField是系统封装的单一输入控件，内部视图层级由系统管理。如果子类化它，你添加的底层背景View会默认作为子View放在UITextField的内容层上方，要么覆盖输入区域，要么没法作为背景显示——系统会优先保证自身输入组件的层级，很难把自定义背景View调整到它的后方，完全不符合你的布局需求。

正确实现：子类化UIView作为容器 #

你的组件是多控件组合体（背景View+两个Label+TextField），用UIView做容器能自由控制所有子控件的层级、布局和逻辑，是最合理的方案。以下是完整实现代码：

import UIKit

class RestrictedInputField: UIView {
    // 对外暴露可配置的控件
    let titleLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 14)
        label.textColor = .darkGray
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let inputTextField: UITextField = {
        let tf = UITextField()
        tf.font = .systemFont(ofSize: 16)
        tf.translatesAutoresizingMaskIntoConstraints = false
        return tf
    }()
    
    // 输入长度限制，可外部修改
    var maxInputLength: Int = 20 {
        didSet { updateCountLabel() }
    }
    
    // 内部私有控件
    private let backgroundView: UIView = {
        let view = UIView()
        view.layer.borderColor = UIColor.gray.cgColor
        view.layer.borderWidth = 1.0
        view.layer.cornerRadius = 8.0
        view.clipsToBounds = true
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    private let countLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 12)
        label.textColor = .lightGray
        label.textAlignment = .right
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupHierarchy()
        setupConstraints()
        setupInputLimit()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 构建视图层级：背景View最底层，再放Label和TextField
    private func setupHierarchy() {
        addSubview(backgroundView)
        addSubview(titleLabel)
        addSubview(countLabel)
        addSubview(inputTextField)
    }
    
    // AutoLayout布局
    private func setupConstraints() {
        NSLayoutConstraint.activate([
            // 标题Label布局
            titleLabel.topAnchor.constraint(equalTo: topAnchor),
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
            
            // 背景View布局
            backgroundView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
            backgroundView.leadingAnchor.constraint(equalTo: leadingAnchor),
            backgroundView.trailingAnchor.constraint(equalTo: trailingAnchor),
            backgroundView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            // TextField布局（嵌入背景View内）
            inputTextField.topAnchor.constraint(equalTo: backgroundView.topAnchor, constant: 8),
            inputTextField.leadingAnchor.constraint(equalTo: backgroundView.leadingAnchor, constant: 8),
            inputTextField.trailingAnchor.constraint(equalTo: backgroundView.trailingAnchor, constant: -8),
            inputTextField.bottomAnchor.constraint(equalTo: backgroundView.bottomAnchor, constant: -8),
            
            // 计数Label布局（背景View右上角）
            countLabel.trailingAnchor.constraint(equalTo: backgroundView.trailingAnchor, constant: -8),
            countLabel.topAnchor.constraint(equalTo: backgroundView.topAnchor, constant: 8),
            countLabel.leadingAnchor.constraint(greaterThanOrEqualTo: inputTextField.trailingAnchor, constant: 8)
        ])
    }
    
    // 输入限制逻辑
    private func setupInputLimit() {
        inputTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
        updateCountLabel() // 初始化计数显示
    }
    
    @objc private func textFieldDidChange() {
        guard let text = inputTextField.text else { return }
        // 截断超出长度的文本
        if text.count > maxInputLength {
            inputTextField.text = String(text.prefix(maxInputLength))
        }
        updateCountLabel()
    }
    
    // 更新计数标签
    private func updateCountLabel() {
        let currentCount = inputTextField.text?.count ?? 0
        countLabel.text = "\(currentCount)/\(maxInputLength)"
    }
}

使用示例 #

在ViewController中直接实例化并配置：

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        let userNameField = RestrictedInputField()
        userNameField.titleLabel.text = "用户名"
        userNameField.maxInputLength = 15
        userNameField.inputTextField.placeholder = "请输入用户名"
        userNameField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(userNameField)
        
        NSLayoutConstraint.activate([
            userNameField.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            userNameField.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            userNameField.widthAnchor.constraint(equalToConstant: 300),
            userNameField.heightAnchor.constraint(equalToConstant: 80)
        ])
    }
}

优势说明 #

1. 完全掌控视图层级：背景View放在最底层，不会被其他控件遮挡
2. 逻辑封装彻底：输入限制、计数更新都在组件内部完成，外部只需配置属性
3. 扩展性强：后续要添加其他功能（比如输入验证、样式切换），直接在容器类里修改即可

内容的提问来源于stack exchange，提问作者Gucci