View and its subviews disappearing after adding constraints

Question

I have a view (addressLabelBackground) at the top of my controller, underneath the navigation bar. It shows up fine in portrait mode, but I'm trying to get it to re-size when I turn the device to landscape mode.

So I attempted to add some constraints in storyboard by pinning addressLabelBackground to the left of the view (0), right of the view (0) and the top to the navigation bar (0), but when I run the application, the view and all its subviews disappear.

I also tried adding the constraints programmatically (like I did for the subviews), but again, addressLabelBackground and the subviews within disappear.

Here's the code (in viewDidLoad): Updated after answer, got a crash

    view.addSubview(addressLabelBackground)
    addressLabelBackground.addSubview(addressLabel)
    addressLabelBackground.addSubview(turnToTechLogo)

    addressLabelBackground.translatesAutoresizingMaskIntoConstraints = false

    addressLabelBackground.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    addressLabelBackground.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    addressLabelBackground.topAnchor.constraint(equalTo: (navigationController?.navigationBar.bottomAnchor)!).isActive = true

    addressLabel.font = UIFont.boldSystemFont(ofSize: 16.0)
    addressLabel.translatesAutoresizingMaskIntoConstraints = false

    addressLabel.centerXAnchor.constraint(equalTo: addressLabelBackground.centerXAnchor).isActive = true
    addressLabel.topAnchor.constraint(equalTo: addressLabelBackground.topAnchor).isActive = true
    addressLabel.bottomAnchor.constraint(equalTo: addressLabelBackground.bottomAnchor).isActive = true

The constraints for the addressLabel work perfectly fine in both portrait and landscape - it stays centered in the view. However when I try to add the constraints for addressLabelBackground the same way, or in storyboard, everything disappears.

How can I get this view to stay pinned underneath the navigation bar, and stretch its width to fit the width of the screen, when the device is in landscape mode?

EDIT (next day): Still trying to figure this out. I've tried making a subview called innerContainer and pinning it to the topAnchor of that:

    let frame = CGRect(x: 0, y: 20, width: self.view.bounds.width, height: self.view.bounds.height-20)
    let innerContainer = UIView(frame: frame)

    self.view.addSubview(innerContainer)
    innerContainer.addSubview(addressLabelBackground)

    addressLabelBackground.translatesAutoresizingMaskIntoConstraints = false
    addressLabelBackground.topAnchor.constraint(equalTo: innerContainer.topAnchor).isActive = true

But once again it disappears.

I've also tried pinning it to the top (0 points) of the topLayoutGuide in storyboard, and it disappears then too.

Is this your complete set of constraints? If not, please post the rest - they matter. — dfd
They were, although I took out the programmatic constraints because they weren't necessary. Now I just have view.addSubview(addressLabelBackground). And in storyboard I have addressLabel and logo placed within addressLabelBackground. For now those subviews stay put within addressLabelBackground regardless of orientation. However I still can't get the addressLabelBackground to resize to full width in landscape mode — KingTim
Then you are missing some constraints on addressLabelBackground. You've given it a centerX and a top, but what's it's intrinsic width? Have you added a text attribute value? — dfd
I'm not sure what you mean about text attribute value. And the problem seems to be if I give it any constraints at all, it (along with the subviews) disappear. Do you mean if I add certain constraints, it will resolve the problem? — KingTim
As of now I have no constraints on anything and the logo and label are staying where they need to be within addressLabelBackground. — KingTim

dfd dfd · Accepted Answer · 2017-02-27T01:13:53

Your addressLabelBackground needs an auto layout that not only is pinned to the top, but to the sides of it's superview. Replace your existing widthAnchor constraint with these two:

addressLabelBackground.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
addressLabelBackground.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

View and its subviews disappearing after adding constraints

1 Answers