以編程方式創建約束-2個框

Question

我想創建以下結果：

僅使用手動創建的NSLayoutConstraints。 但是目前我只有一個藍色框，或者（如果我不添加UIButton）正確的紅色視圖。

    let newView = UIView()
    newView.backgroundColor = UIColor.redColor()
    newView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(newView)

    let verticalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0)
    view.addConstraint(verticalConstraint)

    let topContraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
    view.addConstraint(topContraint)

    let bottomContraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0)
    view.addConstraint(bottomContraint)

    let widthConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200)
    view.addConstraint(widthConstraint)



    let disableButton = UIButton()
    disableButton.backgroundColor = UIColor.blueColor()
    disableButton.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(disableButton)

    let leadingConstraint = NSLayoutConstraint(item: disableButton, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0)
    view.addConstraint(leadingConstraint)

    let topBContraint = NSLayoutConstraint(item: disableButton, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
    view.addConstraint(topBContraint)

    let bottomBContraint = NSLayoutConstraint(item: disableButton, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0)
    view.addConstraint(bottomBContraint)

    let  trailingConstraint = NSLayoutConstraint(item: disableButton, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: newView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0)
    view.addConstraint(trailingConstraint)

有人可以幫我解決這里的問題嗎？ 手動創建約束的順序有區別嗎？

Answer 1

通過使用Visual Format Language，您的代碼可以緊湊得多：

let newView = UIView()
newView.backgroundColor = UIColor.redColor()
newView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(newView)

let disableButton = UIButton()
disableButton.backgroundColor = UIColor.blueColor()
disableButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(disableButton)

let views = ["newView": newView, "disableButton": disableButton]
let c1 = NSLayoutConstraint.constraintsWithVisualFormat("V:|[newView]|", options: [], metrics: nil, views: views)
let c2 = NSLayoutConstraint.constraintsWithVisualFormat("H:|[newView]|", options: [], metrics: nil, views: views)
let c3 = NSLayoutConstraint.constraintsWithVisualFormat("V:|[disableButton]|", options: [], metrics: nil, views: views)
let c4 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[disableButton]", options: [], metrics: nil, views: views)
let c5 = NSLayoutConstraint(item: disableButton, attribute: .Width, relatedBy: .Equal, toItem: newView, attribute: .Width, multiplier: 0.75, constant: 0)

NSLayoutConstraint.activateConstraints(c1 + c2 + c3 + c4)
view.addConstraint(c5)

• c1告訴自動布局使紅色視圖垂直填充超級視圖。
• c2水平做同樣的事情
• c3告訴自動布局使藍色按鈕垂直填充
• c4使其粘在屏幕的左邊緣
• c5 ：某些約束不能使用可視格式語言編寫，因此我們需要使用其他函數來使disableButton.width = newView.width * 0.75

我本來可以寫成最后一行

NSLayoutConstraint.activateConstraints(c1 + c2 + c3 + c4 + [c5])

但是由於某種原因，這花了很長時間才能完成編譯。 因此，您在上面的代碼中看到了拆分。