Scroll view that contains a stack view (and/or a content view) not working expectedly

Question

I want to have a scroll view that displays all of my things in a stack view vertically.

First, I created a view named contentView within the scroll view which contains the stack view, which means I now have view -> scrollView -> contentView -> stackView.
I set the content view's leading, trailing, top and bottom anchors to be equal to those constraints of the scroll views content layout guide.
I made the width of the content view the same as the width of the scroll views frame layout guide.
I made the stack view's leading, trailing, top and bottom anchors to be equal to the content view's corresponding anchors.

This doesn't scroll.

I tried following this SO answer:

I got rid of the Content Layout Guides and applied the contentView's constraints to be 0,0,0,0 to all 4 sides and center it horizontally and vertically to the scroll view.
In size inspector, change bottom and align center Y priority to 250.
Set the bottom anchor of the stack view to view (not the scroll view).

This only scrolls a little bit, but doesn't fully scroll the bottom. Much of the view is just hidden outside of the screen.

I also tried getting rid of contentView all together and pinned my stack view to either the scroll view or to view directly, but none worked.

Finally, I tried this super hacky-looking solution:

override func viewWillLayoutSubviews(){
    super.viewWillLayoutSubviews()
    scrollView.contentSize = CGSize(width: view.bounds.width, height: view.bounds.height+300)
}

but, it squishes the stack view vertically and doesn't display the content fully.

P.S. I'm adding the constraints for the stack view programmatically:

stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true

DonMag · Accepted Answer

Here's an example that will work - see if you can figure out what you may have done differently.

Instead of using a "content view" we'll just add the stack view directly to the scroll view via code.

Here's the Storyboard layout:

Here's the source for the Storyboard, so you can examine it directly:

And here's example code that will add a stack view to the scroll view, add 40 labels to the stack view, and then properly constrain the stack view to the scroll view:

class KevvvViewController: UIViewController {

    @IBOutlet var scrollView: UIScrollView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = 12
        
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        scrollView.addSubview(stack)
        
        for i in 1...40 {
            let v = UILabel()
            v.backgroundColor = .yellow
            v.text = "Label \(i)"
            stack.addArrangedSubview(v)
        }

        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            stack.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            stack.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            stack.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            
            stack.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
        ])
        
        // to make it easy to see the scroll view frame
        scrollView.backgroundColor = .cyan
    }
    
}

Result, after scrolling down to the 17th label (iPhone 8):

Scroll view that contains a stack view (and/or a content view) not working expectedly

Answers (2)

Related Questions