时间戳

首页 > 解决方案 > 如何将 UICollectionViews 放入 stackView？

ios - 如何将 UICollectionViews 放入 stackView？

问题描述

我想像这张图片一样将 3 个 collectionViews 放在 stackViews 中。但是，当我模拟它时，我看不到我设计的 collectionViews。

这是我的设计。StackView 中的 3 个 CollectionView

过去，我曾在此站点上尝试过此解决方案，CollectionView Disappears within StackView (Swift)。但是，它不起作用。

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
    }
}

标签： iosswiftuicollectionviewuistackview

解决方案

如果您想以编程方式将约束添加到视图（在本例中为 timerView），您必须这样做：

timerView.translatesAutoresizingMaskIntoConstraints = false

集合视图还需要知道它们的宽度和高度。所以你有两个选择：

1) 为每个集合视图添加高度和宽度约束。

2) 如果您希望集合视图具有相同的宽度，请将堆栈的分布设置为平均填充。

timerView.distribution = .fillEqually

PD：看着你的设计，我认为你应该使用三个 TableViews 而不是 CollectionViews。

推荐阅读