Swift：視覺格式語言約束的問題

Question

我想從我的視圖控制器設置子視圖彈出窗口，並使用視覺格式約束來定位項目。我希望子視圖看起來像這樣：tableView的高度爲150點，imageView的高度爲100點，titleLabel的高度爲50點，坐在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) 
}