Height contraint in storyboard for a custom view with dynamic height

Question

Starting swift here... How to set a constraint height to a custom view that wrap content or in other words that have a dynamic height ?

In Android we use wrap content or match parent for height. Match parent equivalent for ios is putting top, bottom, left, right constraint to 0 (if I understand well) but what about wrap content ?

Most of the time a custom view height can be dynamic. When I drag a view from the storyboard that extends my custom view, I'a asked for a height constraint... Txs for help !

edited: Why someone put a -1 without giving any reason, is this such a stupid question ?!

Answer 1

First step is making sure you have configured your custom @IBDesignable view correctly.

Here is a simple example, with a UITextField and a "helper" UILabel .

The text view is set to non-scrolling -- which allows it to auto-size its own height based on the text. It will grow / shrink as you type and add / delete text.

The text view and label are added to a vertical UIStackView to make it really, really easy to layout:

@IBDesignable
class MyCustomView: UIView {

    let theTextView: UITextView = {
        let v = UITextView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.isScrollEnabled = false
        return v
    }()

    let helperLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.textAlignment = .center
        v.textColor = .white
        v.backgroundColor = .blue
        v.text = "Helper Text"
        return v
    }()

    let theStackView: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .vertical
        v.alignment = .fill
        v.distribution = .fill
        v.spacing = 8
        return v
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {

        // add the stack view as a subview
        addSubview(theStackView)

        // constrain the stack view top / bottom / leading / trailing
        // with 8-pts "padding" on each side
        NSLayoutConstraint.activate([

            theStackView.topAnchor.constraint(equalTo: topAnchor, constant: 8.0),
            theStackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),

            theStackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
            theStackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),

            ])

        // add the text view and label to the stack view
        theStackView.addArrangedSubview(theTextView)
        theStackView.addArrangedSubview(helperLabel)

    }

}

Now, in a new view controller in Storyboard, add a normal UIView and give it a background color (so we can see it). Add Leading and Trailing constraints of 40 , and add a Center Vertically constraint. It should look similar to this:

and Storyboard will tell you it needs a constraint:

With the view selected, go to the Identity Inspector and change the Class to MyCustomClass . If you have **Automatically Refresh Views` turned on, it should change to this:

It is now centered vertically, and uses its own height (determined by the intrinsic heights of the text view and the label, embedded in the stack view). No more Needs constraints for: Y position or height error message, without needing to set any additional constraints.

When you run the app (and type some text into the text view), you'll get this: