iOS代码设置UIImageView约束后未显示，求助排查解决

我需要在现有视图的安全区域下方添加UIImageView和UILabel，已通过代码创建这两个控件并实现了约束添加方法。目前UILabel能正常显示，但UIImageView无法显示，附上相关截图，希望排查问题并提供解决方案。

现有代码实现 #

控件定义 #

private var cardLbl: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textColor = .white
    label.text = "Hello User..."
    label.textAlignment = .center
    label.font = UIFont.preferredFont(style: .light, size: 14)
    label.accessibilityTraits = .header
    return label
}()

private var cardImg: UIImageView = {
    let imageView = UIImageView()
    imageView.backgroundColor = .red
    return imageView
}()

添加控件及约束的方法 #

private func setupCardArtImage(){
        view.addSubview(cardImg)
        NSLayoutConstraint.activate([
            cardImg.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            cardImg.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            cardImg.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
            cardImg.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            cardImg.heightAnchor.constraint(equalToConstant: 80),
            cardImg.widthAnchor.constraint(equalToConstant: 127)])
    }

private func setupCardArtName(){
        view.addSubview(cardLbl)
        NSLayoutConstraint.activate([
            cardLbl.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            cardLbl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            cardLbl.topAnchor.constraint(equalTo: cardImg.bottomAnchor, constant: 10),
            cardLbl.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            cardLbl.heightAnchor.constraint(equalToConstant: 30)])
    }

问题排查与解决方案 #

问题1：未禁用自动转换约束 #

UIImageView初始化时没有设置translatesAutoresizingMaskIntoConstraints = false，使用Auto Layout时必须禁用该属性，否则系统会自动生成约束覆盖自定义约束，导致控件布局异常。

问题2：约束冲突 #

在setupCardArtImage方法中，同时设置了以下冲突约束：

• leadingAnchor、trailingAnchor与父视图对齐，又设置固定宽度widthAnchor.constraint(equalToConstant: 127)，两者无法同时满足
• centerXAnchor与leadingAnchor/trailingAnchor同时设置，造成布局逻辑冲突

修正后的代码 #

1. 修正UIImageView初始化

添加禁用自动转换约束的代码：

private var cardImg: UIImageView = {
    let imageView = UIImageView()
    imageView.backgroundColor = .red
    imageView.translatesAutoresizingMaskIntoConstraints = false // 新增该行
    return imageView
}()

2. 修正约束逻辑

根据需求选择以下两种约束方案之一：

方案A：图片居中且固定宽高

private func setupCardArtImage(){
    view.addSubview(cardImg)
    NSLayoutConstraint.activate([
        cardImg.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        cardImg.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
        cardImg.heightAnchor.constraint(equalToConstant: 80),
        cardImg.widthAnchor.constraint(equalToConstant: 127)
    ])
}

方案B：图片铺满父视图左右，固定高度

private func setupCardArtImage(){
    view.addSubview(cardImg)
    NSLayoutConstraint.activate([
        cardImg.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        cardImg.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        cardImg.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
        cardImg.heightAnchor.constraint(equalToConstant: 80)
    ])
}

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