如何通过代码约束实现组件随Label文本量动态调整布局

我需要做一个由UILabel和UIImageView组成的水平布局组件，要求：

• 组件整体在父视图中居中显示
• 当Label文本内容增加时，组件整体大小和ImageView位置能自动动态调整
• 必须通过代码设置Auto Layout约束，但我对代码化约束不太熟悉

示意图：

我的当前代码 #

组件类代码 #

class PVProgressIndicator: UIView {
    
    let progressText: UILabel = {
        let progressText = UILabel()
        progressText.font = UIFont.systemFont(ofSize: 11)
        progressText.text = ""
        progressText.numberOfLines = 0
        progressText.textAlignment = .right
        progressText.translatesAutoresizingMaskIntoConstraints = false
        progressText.sizeToFit()
        progressText.layoutIfNeeded()
        return progressText
    }()
    
    let iconView: UIImageView = {
        let iconView = UIImageView()
        iconView.translatesAutoresizingMaskIntoConstraints = false
        let image = UIImage(named: "feedback_success")!
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 16, height: 16))
        let resizedImage = renderer.image { _ in
            image.draw(in: CGRect(origin: .zero, size: CGSize(width: 16, height: 16)))
        }
        iconView.image = resizedImage
        iconView.sizeToFit()
        iconView.layoutIfNeeded()
        return iconView
    }()

    let iconView2: UIImageView = {
        let iconView2 = UIImageView()
        iconView2.translatesAutoresizingMaskIntoConstraints = false
        let image = UIImage(named: "feedback_error")!
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 16, height: 16))
        let resizedImage = renderer.image { _ in
            image.draw(in: CGRect(origin: .zero, size: CGSize(width: 16, height: 16)))
        }
        iconView2.image = resizedImage
        iconView2.sizeToFit()
        iconView2.layoutIfNeeded()
        return iconView2
    }()
        
    private func setupView() {
        
        let overlayView = UIView()
        overlayView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(overlayView)
        
        overlayView.addSubview(iconView)
        overlayView.addSubview(iconView2)
        
        NSLayoutConstraint.activate([
            iconView.centerXAnchor.constraint(equalTo: iconView2.centerXAnchor),
            iconView.centerYAnchor.constraint(equalTo: iconView.centerYAnchor),
            progressIndicator.centerXAnchor.constraint(equalTo: iconView2.centerXAnchor),
            progressIndicator.centerYAnchor.constraint(equalTo: iconView2.centerYAnchor),
            
            iconView2.topAnchor.constraint(equalTo: self.topAnchor, constant: 20),
            iconView2.widthAnchor.constraint(equalToConstant: 10),
            iconView2.heightAnchor.constraint(equalToConstant: 10), 
            iconView2.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: -10)
        ])
        
        addSubview(progressText)
        NSLayoutConstraint.activate([
            progressText.leadingAnchor.constraint(equalTo: overlayView.trailingAnchor, constant: 15),
            progressText.centerYAnchor.constraint(equalTo: overlayView.centerYAnchor)
        ])
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

父视图配置代码 #

private func setupProgressBar() {
    self.codeValidationTextField.addSubview(progressBar)
    
    progressBar.translatesAutoresizingMaskIntoConstraints = false
    progressBar.leadingAnchor.constraint(equalTo: codeValidationTextField.leadingAnchor, constant: 10).isActive = true
    progressBar.bottomAnchor.constraint(equalTo: codeValidationTextField.bottomAnchor, constant: -33).isActive = true
    progressBar.widthAnchor.constraint(equalTo: codeValidationTextField.widthAnchor, multiplier: 0.5)
    progressBar.progressIndicator.isHidden = false
    progressBar.iconView.isHidden = true
    progressBar.progressText.isHidden = false 
}

问题分析与修正方案 #

原代码存在几个关键问题：

1. 未定义的progressIndicator变量导致编译错误
2. overlayView约束不完整，且将两个icon重叠布局，逻辑混乱
3. 组件自身未与内部子视图建立约束，无法自适应内容大小
4. 父视图中限制了组件宽度，导致文本增加时无法动态扩展

修正后的组件类代码 #

class PVProgressIndicator: UIView {
    
    let progressText: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 11)
        label.text = ""
        label.numberOfLines = 0
        label.textAlignment = .right
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let successIcon: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        guard let image = UIImage(named: "feedback_success") else {
            return imageView
        }
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 16, height: 16))
        let resizedImage = renderer.image { _ in
            image.draw(in: CGRect(origin: .zero, size: CGSize(width: 16, height: 16)))
        }
        imageView.image = resizedImage
        // 固定icon大小，避免图片尺寸影响布局
        imageView.widthAnchor.constraint(equalToConstant: 16).isActive = true
        imageView.heightAnchor.constraint(equalToConstant: 16).isActive = true
        return imageView
    }()

    let errorIcon: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        guard let image = UIImage(named: "feedback_error") else {
            return imageView
        }
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 16, height: 16))
        let resizedImage = renderer.image { _ in
            image.draw(in: CGRect(origin: .zero, size: CGSize(width: 16, height: 16)))
        }
        imageView.image = resizedImage
        imageView.widthAnchor.constraint(equalToConstant: 16).isActive = true
        imageView.heightAnchor.constraint(equalToConstant: 16).isActive = true
        return imageView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        // 添加子视图
        addSubview(successIcon)
        addSubview(errorIcon)
        addSubview(progressText)
        
        // 默认隐藏所有icon，根据业务逻辑切换显示
        successIcon.isHidden = true
        errorIcon.isHidden = true
        
        NSLayoutConstraint.activate([
            // 成功icon的约束：水平布局在label左侧，间距10，垂直居中
            successIcon.trailingAnchor.constraint(equalTo: progressText.leadingAnchor, constant: -10),
            successIcon.centerYAnchor.constraint(equalTo: progressText.centerYAnchor),
            
            // 错误icon的约束：和成功icon位置一致，切换显示即可
            errorIcon.trailingAnchor.constraint(equalTo: progressText.leadingAnchor, constant: -10),
            errorIcon.centerYAnchor.constraint(equalTo: progressText.centerYAnchor),
            
            // 组件自身与子视图的约束：让组件自适应内容大小
            progressText.topAnchor.constraint(equalTo: topAnchor),
            progressText.bottomAnchor.constraint(equalTo: bottomAnchor),
            progressText.trailingAnchor.constraint(equalTo: trailingAnchor),
            
            // 给icon留左边距，避免贴边
            successIcon.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor),
            errorIcon.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor),
            
            // 组件内边距，避免内容贴边
            topAnchor.constraint(greaterThanOrEqualTo: successIcon.topAnchor, constant: -8),
            bottomAnchor.constraint(greaterThanOrEqualTo: successIcon.bottomAnchor, constant: 8),
            topAnchor.constraint(greaterThanOrEqualTo: errorIcon.topAnchor, constant: -8),
            bottomAnchor.constraint(greaterThanOrEqualTo: errorIcon.bottomAnchor, constant: 8)
        ])
    }
    
    // 提供方法切换显示状态
    func showSuccess(with text: String) {
        successIcon.isHidden = false
        errorIcon.isHidden = true
        progressText.text = text
    }
    
    func showError(with text: String) {
        successIcon.isHidden = true
        errorIcon.isHidden = false
        progressText.text = text
    }
}

修正后的父视图配置代码 #

private func setupProgressBar() {
    self.codeValidationTextField.addSubview(progressBar)
    
    progressBar.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        // 组件在父视图中底部居中
        progressBar.centerXAnchor.constraint(equalTo: codeValidationTextField.centerXAnchor),
        progressBar.bottomAnchor.constraint(equalTo: codeValidationTextField.bottomAnchor, constant: -33),
        // 可选：限制组件最大宽度，避免超出父视图范围
        // progressBar.widthAnchor.constraint(lessThanOrEqualTo: codeValidationTextField.widthAnchor, multiplier: 0.8)
    ])
    
    // 示例：显示成功状态
    progressBar.showSuccess(with: "验证通过")
}

关键说明 #

1. 删除冗余代码：去掉sizeToFit()和layoutIfNeeded()，Auto Layout会自动处理布局逻辑
2. 固定icon尺寸：明确设置icon的宽高约束，避免图片原始尺寸干扰布局稳定性
3. 自适应组件大小：通过组件自身与子视图的约束关联，让组件根据文本和icon的实际大小自动调整尺寸
4. 简化icon切换：两个icon使用完全相同的位置约束，通过isHidden属性切换显示状态，无需重复配置布局
5. 居中布局实现：父视图中使用centerXAnchor让组件居中，不强制限制宽度（可按需添加最大宽度限制）

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