は、プログラムで制約を作成する - 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を同じことを行うことが画面
• c5の左端に固執せ青いボタンが縦に
• c4を埋める作るために自動レイアウトを伝えます：いくつかの制約がビジュアルフォーマットで書き込むことができません言語は、それゆえ私たちは、私が
  として最後の行を記述することができdisableButton.width = newView.width * 0.75

を作るためにさまざまな機能を使用する必要があります3210

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

しかし、何らかの理由で、これはコンパイルに時間がかかります。したがって、上のコードで分かれています。