How to set the scrollview height when UI elements are dynamically created

Question

On the storyboard, inside a view controller I have a scrollview. A navigation bar and a stack view are embedded inside the scrollview. Programmatically I am adding some UI elements one below the other inside the stack view.

Via storyboard, constraints of the scrollview are set to the same as safe area - top, bottom, leading, trailing and width.

Navigation bar constraints - trailing, leading, top, width are same as super view.

Stackview constraints - trailing, leading, bottom, width are same as superview.

Navigation bar's bottom is same as stackview's top so that they are one below the other.

After setting these constraints, there is an error about scrollview - need constraints for: Y position or Height

Since the UI elements are being added dynamically to the stackview, How do I set the height in storyboard? Is there a better way to do this?

I tried "add missing constraint" option and it adds a constant height to the stack view which does not work well for all devices. Any help is appreciated since I am new to iOS app development. Thanks.

user_6257435 · Answer

An empty UIStackView has no intrinsic height, so IB / Storyboard doesn't know how to satisfy the contentSize of the scroll view.

You need to give it a height constraint at design-time - it can be any value, because it's going to change at runtime. So, give your stack view a height constraint of, say, 300.

Of course, that won't allow it to "grow" as you dynamically add arranged subviews, so you have a couple options.

1 - Give the height constraint a low priority:

This will satisfy IB, but will allow the stack view to grow.

2 - Set the height constraint to be a "placeholder":

At build time, this constraint will be removed, again allowing the stack view to grow.

Edit: Using the first option (low priority), this is how your Document Outline should look:

Simple example... This class will add 30 labels as arranged subviews of the initially empty stack view:

import UIKit

class StackInScrollViewController: UIViewController {

    @IBOutlet var theStackView: UIStackView!

    override func viewDidLoad() {
        super.viewDidLoad()

        for i in 1...30 {
            let v = UILabel()
            v.translatesAutoresizingMaskIntoConstraints = false
            v.backgroundColor = .yellow
            v.text = "This is Label \(i)"
            theStackView.addArrangedSubview(v)
        }

    }

}

and here is the Storyboard source:

user_3278326 · Answer

As per your question you need scroll view with dynamic content in it. You can solve your problem in 2 ways. First is using Tableview instead of the scroll view. But I will try to answer your questions with your implementation.

Add ScrollView to the ViewController with constraint top, bottom, leading, trailing with its super view.
Add StackView with the constraint of leading, trailing, top and bottom.
Whenever you add StackView content programmatically, call self.view.layoutIfNeeded() and self.view.layoutSubviews().
Finally set the content size of scroll view.scrollView.contentSize = CGSize(width:CGFloat, height: CGFloat)

How to set the scrollview height when UI elements are dynamically created

2 Answers