Adding Stackview to UIScrollView

Question

I have a UIScrollView. It has a stack view. And this stack view contains 12 buttons. (Horizontal scroll view)

Stackview constraints :- top,leading,trailing,bottom to the scroll view and equal widths to the scroll view.

My problem is every time when I run, stack view width limits to the scroll view width and buttons are too small acording to the width of the stack view and my scroll view is not scrollable.

How to make this scrollable

Answer 1

Step-by-Step for setting this up in IB / Storyboards...

1. Add a view - height 50 leading/top/trailing - blue background

2. add a scrollview to that view - pin leading/top/trailing/bottom to 0 - set scrollview background to yellow so we can see where it is

3. add a button to the scroll view

4. duplicate it so you have 12 buttons

5. group them into a stack view, and set the stack view's constraints to 0 leading/top/trailing/bottom

6. and set the stack view's distribution to "equal spacing"

7. result running in simulator (with no code at all):

and the buttons scroll left and right... no code setting of .contentSize...

Answer 2

So you want this:

Here's how I did it in Xcode 8.3.3.

1. New Project > iOS > Single View Application.

2. Open Main.storyboard.

3. Drag a scroll view into the scene.

4. Pin top, leading, and trailing of the scroll view to 0. Set height to 30.

   

5. Drag a horizontal stack view into the scroll view.

6. Pin all four edges of the stack view to 0.

   

7. Set stack view spacing to 4.

8. Drag twelve buttons into the stack view.

9. Set target device to iPhone SE.

10. Build & run.

Resulting document outline:

Answer 3

If you make your Stackview width equal to the scrollview width, then that's all you'll get, and of course it won't scroll.

Don't give your Stackview a width constraint... let the buttons "fill it out".

---

Edit: Here is a simple example that you can run directly in a Playground page:

import UIKit
import PlaygroundSupport

class TestViewController : UIViewController {

    let scrollView: UIScrollView = {
        let v = UIScrollView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .cyan
        return v
    }()

    let stackView : UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .horizontal
        v.distribution = .equalSpacing
        v.spacing = 10.0
        return v
    }()


    override func viewDidLoad() {
        super.viewDidLoad()

        // add the scroll view to self.view
        self.view.addSubview(scrollView)

        // constrain the scroll view to 8-pts on each side
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true


        // add the stack view to the scroll view 
        scrollView.addSubview(stackView)

        // constrain the stackview view to 8-pts on each side
        //   this *also* controls the .contentSize of the scrollview
        stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 8.0).isActive = true
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0).isActive = true
        stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -8.0).isActive = true
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0).isActive = true

        // add ten buttons to the stack view
        for i in 1...10 {

            let b = UIButton()
            b.translatesAutoresizingMaskIntoConstraints = false
            b.setTitle("Button \(i)", for: .normal)
            b.backgroundColor = .blue
            stackView.addArrangedSubview(b)

        }

    }

}

let vc = TestViewController()
vc.view.backgroundColor = .yellow
PlaygroundPage.current.liveView = vc