How can I put UICollectionViews in stackView?

Question

I want to put 3 collectionViews in stackViews like this picture. However, when I simulate it, I cannot see collectionViews as I designed it.

Here is my Design. 3 CollectionViews in StackView

In the past, I had tried this solution from this site, CollectionView Disappears within StackView (Swift). However, it doesn't work.

class SecondViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    let tcells:Int = 3, pcells:Int = 4
    var p1name:String = " ", p2name:String = " "
    var binScore: Array<Int> = [0,0,0,0]
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if collectionView == timerReset {
            return tcells
        }
        return pcells
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if collectionView == p1board {
            if let p1nc: p1Name = collectionView.dequeueReusableCell(withReuseIdentifier: "p1Name", for: indexPath) as? p1Name{
                p1nc.p1n.text! = p1name
                return p1nc
            }
            if let p1jc: p1Judge = collectionView.dequeueReusableCell(withReuseIdentifier: "p1Judge", for: indexPath) as? p1Judge {
                return p1jc
            }
            if let p1sc: p1Score = collectionView.dequeueReusableCell(withReuseIdentifier: "p1Score", for: indexPath) as? p1Score {
                return p1sc
            }
        }
        else if collectionView == p2board {
            if let p2nc: p2Name = collectionView.dequeueReusableCell(withReuseIdentifier: "p2Name", for: indexPath) as? p2Name{
                p2nc.p2n.text! = p2name
                return p2nc
            }
            if let p2jc: p2Judge = collectionView.dequeueReusableCell(withReuseIdentifier: "p2Judge", for: indexPath) as? p2Judge {
                return p2jc
            }
            if let p2sc: p2Score = collectionView.dequeueReusableCell(withReuseIdentifier: "p2Score", for: indexPath) as? p2Score {
                return p2sc
            }
        }
        else {
            if let mtm: matchTimer = collectionView.dequeueReusableCell(withReuseIdentifier: "matchTimer", for: indexPath) as? matchTimer{
                return mtm
            }
            if let gtm: groundTimer = collectionView.dequeueReusableCell(withReuseIdentifier: "groundTimer", for: indexPath) as? groundTimer {
                return gtm
            }
            if let rbtn: resetBtn = collectionView.dequeueReusableCell(withReuseIdentifier: "resetBtn", for: indexPath) as? resetBtn {
                return rbtn
            }
        }
        return UICollectionViewCell()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBOutlet weak var timerView: UIStackView!
    @IBOutlet weak var p1board: UICollectionView! // left side
    @IBOutlet weak var timerReset: UICollectionView! // mid
    @IBOutlet weak var p2board: UICollectionView! // right side

    override func viewDidLoad() {
        super.viewDidLoad()

        timerView.addArrangedSubview(p1board)
        timerView.addArrangedSubview(timerReset)
        timerView.addArrangedSubview(p2board)

        NSLayoutConstraint.activate([
            timerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            timerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            timerView.topAnchor.constraint(equalTo: view.topAnchor),
            timerView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            p1board.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.3)
        ])

    }

    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

Answer 1

If you want to add constraints programmatically to a view (timerView in this case), you must do this:

timerView.translatesAutoresizingMaskIntoConstraints = false

Collection views also need to know their width and height. So you two options:

1) Add a height and width constraint to each collection view.

2) Set distribution of the stack as fill equally, if you want the collection views to have the same width.

timerView.distribution = .fillEqually

PD: Watching your design, I think you should use three TableViews instead of CollectionViews.