Swift：视觉格式语言约束的问题

Question

我正在尝试从我的视图控制器设置子视图弹出窗口并使用视觉格式约束来定位项目。我希望子视图看起来像这样，tableView的高度为150 pts，imageView的高度为100 pts，titleLabel的高度为50 pts，位于imageView的左下角：

为了尝试实现这一点，我使用了以下代码：

override func didMoveToSuperview() {
    super.didMoveToSuperview()

    // Add views
    addSubview(titleLabel)
    addSubview(tableView)
    addSubview(imageView)

    // Setup constraints
    heightAnchor.constraint(equalToConstant: 250).isActive = true

    var constraints = [NSLayoutConstraint]()
     let views: [String: UIView] = ["imageView": imageView, "titleLabel": titleLabel, "tableView": tableView]
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[tableView(150)]|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|[titleLabel][tableView]|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[titleLabel(20)]|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|[imageView(100)][tableView]|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[imageView(100)]|", options: [], metrics: nil, views: views)
    NSLayoutConstraint.activate(constraints)
}

但这导致以下输出（titleLabel未显示）：

Answer 1

问题不在于您的约束。它符合您的观点顺序。在titleLabel之后添加imageView，使其显示在imageView之上：

// Add views
addSubview(tableView)
addSubview(imageView)
addSubview(titleLabel)

由于titleLabel的展示位置与imageView相对，我建议将其作为子视图。以下是我建议的评论限制：

override func didMoveToSuperview() {
    super.didMoveToSuperview()

    // Add views
    addSubview(tableView)
    addSubview(imageView)
    imageView.addSubview(titleLabel)

    // Setup constraints
    heightAnchor.constraint(equalToConstant: 250).isActive = true

    var constraints = [NSLayoutConstraint]()
    let views: [String: UIView] = ["imageView": imageView, "titleLabel": titleLabel, "tableView": tableView]

    // tableView is 150 wide and stuck to both sides of its superView making the superView 150 wide
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[tableView(150)]|", options: [], metrics: nil, views: views)

    // imageView is 100 tall and stuck to top of superView; tableView takes up the rest
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|[imageView(100)][tableView]|", options: [], metrics: nil, views: views)

    // imageView is as wide as its superView because it is stuck to both sides
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[imageView]|", options: [], metrics: nil, views: views)

    // titleLabel is 20 tall and stuck to the bottom of its superView (notice only one "|")
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:[titleLabel(20)]|", options: [], metrics: nil, views: views)

    // titleLabel is 50 wide and stuck to the left of its superView (again only one "|")
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[titleLabel(50)]", options: [], metrics: nil, views: views)

    NSLayoutConstraint.activate(constraints)
}