Jody Heavener Jody Heavener - 3 months ago 16
iOS Question

Auto set height of container view based on subviews

I know this question has been asked numerous times, but I can't quite seem to get to the bottom of this problem.

Using Auto Layout, I would like to automatically set the height of my container UIView based on its subviews. I have looked at using

sizeToFit
and other various methods of summing up the height of my subviews, however from what I've read the height of my container height should be automatic when using Auto Layout because of the subviews "intrinsic" content size.

Below is a reduced case of what I'm experiencing. I would really appreciate any guidance!

Overview:


  1. Create container UIView, pin to left and right sides of superview, no explicit height, align its centerY with its superview centerY

  2. Create a 300 width by 100 height UIView, add it as a subview to container view, align its centerX with container view's centerX, pin to container view's top edge

  3. Repeat step #2, except this time pin its top to #2's bottom edge

  4. The expected height of the container view is 200, except its height is actually still 0 (therefor centerY alignment is off)



Issue visual

Code:

class ViewController: UIViewController {

let redView = RedView()

override func viewDidLoad() {
super.viewDidLoad()

view.addSubview(redView)
view.setNeedsUpdateConstraints()
}

}

class RedView: UIView {

let greenView = GreenView()
let blueView = BlueView()

init() {
super.init(frame: CGRect.zero)

translatesAutoresizingMaskIntoConstraints = false
backgroundColor = UIColor.red()

addSubview(greenView)
addSubview(blueView)
setNeedsUpdateConstraints()
}

override func updateConstraints() {
super.updateConstraints()

NSLayoutConstraint(item: greenView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: blueView, attribute: .top, relatedBy: .equal, toItem: greenView, attribute: .bottom, multiplier: 1, constant: 0).isActive = true

NSLayoutConstraint(item: self, attribute: .left, relatedBy: .equal, toItem: superview, attribute: .left, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: self, attribute: .right, relatedBy: .equal, toItem: superview, attribute: .right, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: self, attribute: .centerY, relatedBy: .equal, toItem: superview, attribute: .centerY, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200).isActive = true
}

}

class GreenView: UIView {

init() {
super.init(frame: CGRect.zero)

translatesAutoresizingMaskIntoConstraints = false
backgroundColor = UIColor.green()
}

override func updateConstraints() {
super.updateConstraints()

NSLayoutConstraint(item: self, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 300).isActive = true
NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100).isActive = true
NSLayoutConstraint(item: self, attribute: .centerX, relatedBy: .equal, toItem: superview, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
}

}

class BlueView: UIView {

init() {
super.init(frame: CGRect.zero)

translatesAutoresizingMaskIntoConstraints = false
backgroundColor = UIColor.blue()
}

override func updateConstraints() {
super.updateConstraints()

NSLayoutConstraint(item: self, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 300).isActive = true
NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100).isActive = true
NSLayoutConstraint(item: self, attribute: .centerX, relatedBy: .equal, toItem: superview, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
}

}

Answer

You need to pin blueView's bottom to redView's bottom, just add this line to redView's updateConstraints:

NSLayoutConstraint(item: blueView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: 0).active = true
Comments