如何实现带内联验证错误且联动下方视图位移的UITextField？

问题描述 #

我实现了一个仿Material Design的自定义UITextField，通过懒加载添加了错误提示UILabel，基础功能正常，但存在布局问题：当文本框下方有UIImage（约束在文本框底部12pt处）时，显示错误标签后图片不会向下偏移，而是压缩了与文本框的间距。希望错误标签显示时，图片能自动向下移动，间距等于原12pt加上错误标签的高度。

当前实现代码：

private lazy var errorLabel: UILabel = {
    let label = UILabel()
    label.font = UIFont.systemFont(ofSize: 14, weight: .bold)
    label.textColor = errorColor
    label.numberOfLines = 0
    label.isHidden = true
    return label
}()

open override func didMoveToSuperview() {
    super.didMoveToSuperview()
    
    // Make sure that errorLabel is added once to the superview, not to the text field itself
    if let superview = superview, errorLabel.superview == nil {
        superview.addSubview(errorLabel)
        configureErrorLabelConstraints()
    }
}

private func configureErrorLabelConstraints() {
    errorLabel.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        errorLabel.topAnchor.constraint(equalTo: self.bottomAnchor, constant: 5),
        errorLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        errorLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor)
    ])
}

public func showInlineValidationError(message: String) {
    errorLabel.textColor = errorColor
    layer.borderColor = errorColor.cgColor
    errorLabel.text = message
    errorLabel.isHidden = false
}

public func hideInlineValidationError() {
    layer.borderColor = borderColor.cgColor
    errorLabel.isHidden = true
}

解决方案 #

一、手动修改布局实现联动 #

核心是让下方的UIImage依赖错误标签的底部，同时给错误标签添加动态高度约束：

1. 添加错误标签高度约束属性

private var errorLabelHeightConstraint: NSLayoutConstraint!

2. 初始化错误标签约束时添加高度控制

private func configureErrorLabelConstraints() {
    errorLabel.translatesAutoresizingMaskIntoConstraints = false
    // 默认高度为0，隐藏时不占空间
    errorLabelHeightConstraint = errorLabel.heightAnchor.constraint(equalToConstant: 0)
    NSLayoutConstraint.activate([
        errorLabel.topAnchor.constraint(equalTo: self.bottomAnchor, constant: 5),
        errorLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        errorLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        errorLabelHeightConstraint
    ])
}

3. 动态调整错误标签高度

public func showInlineValidationError(message: String) {
    errorLabel.textColor = errorColor
    layer.borderColor = errorColor.cgColor
    errorLabel.text = message
    errorLabel.isHidden = false
    
    // 解除固定高度，让标签自适应内容
    errorLabelHeightConstraint.isActive = false
    errorLabelHeightConstraint = errorLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: errorLabel.intrinsicContentSize.height)
    errorLabelHeightConstraint.priority = .defaultHigh
    errorLabelHeightConstraint.isActive = true
    
    superview?.layoutIfNeeded()
}

public func hideInlineValidationError() {
    layer.borderColor = borderColor.cgColor
    errorLabel.isHidden = true
    
    // 恢复高度为0，不占用布局空间
    errorLabelHeightConstraint.isActive = false
    errorLabelHeightConstraint = errorLabel.heightAnchor.constraint(equalToConstant: 0)
    errorLabelHeightConstraint.isActive = true
    
    superview?.layoutIfNeeded()
}

4. 调整UIImage的约束
   把原来绑定到文本框底部的约束，改成绑定到错误标签的底部：

// 替换前
// image.topAnchor.constraint(equalTo: textField.bottomAnchor, constant: 12)

// 替换后
image.topAnchor.constraint(equalTo: errorLabel.bottomAnchor, constant: 12)

这样图片会始终跟随错误标签的底部，错误标签显示时自动拉开间距，隐藏时回到原位置。

二、推荐轻量第三方库 #

• SkyFloatingLabelTextField：完全贴合Material Design风格，自带内联错误提示标签，支持圆角、边框颜色动态变化，布局自动适配错误标签高度，无需手动处理约束，API简洁，仅专注于文本输入和错误提示场景。
• TextFieldEffects：包含多种Material风格的文本框效果，其中内置带内联错误提示的样式，支持自定义颜色、字体，布局自动联动错误标签高度。

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