iOS动态添加自定义约束子视图的布局冲突问题求助

我要根据Firebase传来的位置数据（比如x=5、y=10、width=30、height=50）在屏幕上展示多张图片，最多可能100张。要求第一张在顶部，后续每张放在上一张下方，但每张的x、y位置可以不同。我尝试用for循环给同一个UIView设置不同约束，结果出现约束冲突，模拟器只显示一个视图。

错误信息 #

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600000cd4dc0 UIView:0x12b304a70.height == 50   (active)>",
    "<NSLayoutConstraint:0x600000cd51d0 V:[UIView:0x12b304a70]-(60)-[UIView:0x12b304a70]   (active)>"
)

我的代码 #

let View: UIView = {
    let view = UIView()
    view.backgroundColor = .red
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

var count = 1
var topAnchor: NSLayoutYAxisAnchor?
for views in 1...11{
    if count == 1{
        view.addSubview(View)
        View.anchor(top: view.safeAreaLayoutGuide.topAnchor, bottom: nil, leading: nil, trailing: nil, paddingTop: 10, paddingBottom: 0, paddingLeft: 0, paddingRight: 0, width: 50, height: 50)
        View.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        topAnchor = View.bottomAnchor
        count += 1
    }
    else{ // if count
        view.addSubview(View)
        View.anchor(top: topAnchor, bottom: nil, leading: nil, trailing: nil, paddingTop: 60, paddingBottom: 0, paddingLeft: 0, paddingRight: 0, width: 30, height: 30)
        View.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        topAnchor = View.topAnchor
    }
}

使用的扩展 #

extension UIView{
    func anchor(top: NSLayoutYAxisAnchor?,
                bottom: NSLayoutYAxisAnchor?,
                leading: NSLayoutXAxisAnchor?,
                trailing: NSLayoutXAxisAnchor?,
                paddingTop: CGFloat,
                paddingBottom: CGFloat,
                paddingLeft: CGFloat,
                paddingRight: CGFloat,
                width: CGFloat,
                height: CGFloat
    ){
        if let top = top{
            self.topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true
        }
        if let bottom = bottom{
            self.bottomAnchor.constraint(equalTo: bottom, constant: paddingBottom).isActive = true
        }
        if let leading = leading{
            self.leadingAnchor.constraint(equalTo: leading, constant: paddingLeft).isActive = true
        }
        if let trailing = trailing{
            self.trailingAnchor.constraint(equalTo: trailing, constant: paddingRight).isActive = true
        }
        if width != 0{
            widthAnchor.constraint(equalToConstant: width).isActive = true
        }
        if height != 0{
            heightAnchor.constraint(equalToConstant: height).isActive = true
        }
    }
}

解决方案 #

问题根源 #

你只创建了一个UIView实例，在循环中反复给它添加新约束并重复添加到父视图，导致：

1. 同一视图被多次添加到父视图（UIKit会自动忽略重复添加，但完全没必要）
2. 新旧约束互相矛盾（比如第一次设置height=50，第二次又设置height=30，还添加了视图自身到自身的间距约束）
3. 锚点逻辑错误：后续视图的topAnchor应该指向前一个视图的bottomAnchor，而不是当前视图的topAnchor

修正后的代码 #

// 初始化锚点为安全区顶部
var previousBottomAnchor: NSLayoutYAxisAnchor? = view.safeAreaLayoutGuide.topAnchor

// 遍历需要创建的视图数量（这里用11个示例）
for index in 1...11 {
    // 每次循环创建新的UIView实例
    let newView = UIView()
    newView.backgroundColor = .red
    newView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(newView)
    
    // 这里可以替换成Firebase返回的实际数据
    let width = index == 1 ? 50 : 30
    let height = index == 1 ? 50 : 30
    let topPadding = index == 1 ? 10 : 60
    
    // 设置约束
    newView.anchor(top: previousBottomAnchor, bottom: nil, leading: nil, trailing: nil,
                   paddingTop: topPadding, paddingBottom: 0, paddingLeft: 0, paddingRight: 0,
                   width: width, height: height)
    newView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    // 更新锚点为当前视图的底部，供下一个视图使用
    previousBottomAnchor = newView.bottomAnchor
}

额外优化建议 #

• 把Firebase返回的位置数据封装成模型，比如：

  struct PositionData {
      let x: CGFloat
      let y: CGFloat
      let width: CGFloat
      let height: CGFloat
  }
  

  之后直接遍历模型数组创建视图，代码更清晰易维护
• 如果x位置不是居中，可替换centerXAnchor约束为leadingAnchor，根据模型中的x值设置paddingLeft

内容的提问来源于stack exchange，提问作者Erkan Coşar