Layout Constraints are not working

Question

I have a UIButton added in the storyboard with the bottom, left, and right set to the superview's; and the height set to a hard-coded 60: it's the width of the superview, and placed at the bottom.

I'm trying to add another view to the superview to give a total of two views. I want this view to fill the remainder of the space. I'm trying this code,

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    locationManager = LocationManager()

    webview = WKWebView()
    webview.backgroundColor = .blue
    webview.translatesAutoresizingMaskIntoConstraints = true
    webview.autoresizingMask = [.flexibleWidth, .flexibleHeight, .flexibleTopMargin, .flexibleBottomMargin]
    view.addSubview(webview)

    var constraints: [NSLayoutConstraint] = ([.top, .width] as [NSLayoutAttribute]).map {
        NSLayoutConstraint(item: webview, attribute: $0, relatedBy: .equal, toItem: view, attribute: $0, multiplier: 1, constant: 0)
    };
    constraints.append(NSLayoutConstraint(item: webview, attribute: .bottom, relatedBy: .equal, toItem: connectionButton, attribute: .top, multiplier: 1, constant: 0))

    view.addConstraints(constraints)
    NSLayoutConstraint.activate(constraints)
}

However, the effect is that the button takes up the entirety of the screen, and I can't see the new view at all. What am I doing wrong?

Answer 1

You're close, but missing a couple of key things:

1. When creating your own constraints, you don't want to use the auto resizing mask constraints, so set webview.translatesAutoresizingMaskIntoConstraints to false and you don't need the autoresizingMask line.

2. You set the width equal to the view, but didn't define any x position. You can also constrain the leading edges or the horizontal centers to define the position.

I think that will fix your issues.

Answer 2

If I understood correctly, something like this could work. Your webView takes up all the space except bottom 60. Two buttons for left and right are in those bottom 60. They have 20 margin on the left, 60 width and 10 spacing between them.

webView.translatesAutoresizingMaskIntoConstraints = false
buttonLeft.translatesAutoresizingMaskIntoConstraints = false
buttonRight.translatesAutoresizingMaskIntoConstraints = false

addSubview(webView)
addSubview(buttonLeft)
addSubview(buttonRight)

// setup your views

let viewsDict = [
  "web"  : webView,
  "btnL" : buttonLeft,
  "btnR" : buttonRight
]

addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[web]-60-|", options: [], metrics: nil, views: viewsDict))
addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[web]|", options: [], metrics: nil, views: viewsDict))

addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|2000@1-[btnL(60)]|", options: [], metrics: nil, views: viewsDict))
addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|2000@1-[btnR(60)]|", options: [], metrics: nil, views: viewsDict))
addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[btnL(60]-10-[btnR(60)]-2000@1|", options: [], metrics: nil, views: viewsDict))