UIScrollView 没有显示在视图中

Question

我在CollectionViewCell 中实现UIScrollView。我有一个滚动视图应该显示的自定义视图，因此我在CollectionViewCell 中执行以下程序。我以编程方式创建了所有内容，下面是我的代码：

struct ShotsCollections {
    let title: String?
}

class ShotsMainView: UICollectionViewCell {

    override init(frame: CGRect) {
        super.init(frame: frame)

        setupViews()

        containerScrollView.contentSize.width = frame.width * CGFloat(shotsData.count)

        shotsData = [ShotsCollections.init(title: "squad"), ShotsCollections.init(title: "genral")]
        var i = 0
        for data in shotsData {

            let customview = ShotsMediaView(frame: CGRect(x: containerScrollView.frame.width * CGFloat(i), y: 0, width: containerScrollView.frame.width, height: containerScrollView.frame.height))

            containerScrollView.addSubview(customview)
            i += 1
        }

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    var shotsData = [ShotsCollections]()

    var containerScrollView: UIScrollView = {
        let instance = UIScrollView()
        instance.isScrollEnabled = true
        instance.bounces = true
        instance.backgroundColor = blueColor
        return instance
    }()


    private func setupViews() { //These are constraints by using TinyConstraints
        addSubview(containerScrollView)
        containerScrollView.topToSuperview()
        containerScrollView.bottomToSuperview()
        containerScrollView.rightToSuperview()
        containerScrollView.leftToSuperview()
    }
}

现在的问题是，当显示滚动视图时，其中的内容却没有。我在打印滚动视图的contentSize 和frame 时，它显示为0。但是如果我检查调试视图层次结构，滚动视图包含2 个带有特定框架的视图。

我不确定出了什么问题。任何帮助表示赞赏。

Answer 1

当您在containerScrollView 中添加customView 时，您并未在customView 和containerScrollView 之间设置约束。

添加这些约束，您将能够看到您的customViews，因为您的customView 有一定的高度。此外，当您添加更多视图时，您需要删除最后添加的视图的底部约束，并使用最新添加的视图为containerScrollView 创建底部约束。

Answer 2

我为您的用例创建了一个示例应用。我在下面粘贴代码和生成的屏幕截图。希望这是您正在寻找的功能。我建议您将其粘贴到一个新项目中并调整代码，直到您满意为止。我添加了 cmets 以使其清楚。

视图控制器

import UIKit

class ViewController: UIViewController {

    // Initialize dummy data array with numbers 0 to 9
    var data: [Int] = Array(0..<10)

    override func loadView() {
        super.loadView()
        // Add collection view programmatically
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.register(ShotsMainView.self, forCellWithReuseIdentifier: ShotsMainView.identifier)
        self.view.addSubview(collectionView)
        NSLayoutConstraint.activate([
            self.view.topAnchor.constraint(equalTo: collectionView.topAnchor),
            self.view.bottomAnchor.constraint(equalTo: collectionView.bottomAnchor),
            self.view.leadingAnchor.constraint(equalTo: collectionView.leadingAnchor),
            self.view.trailingAnchor.constraint(equalTo: collectionView.trailingAnchor),
        ])
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.backgroundColor = UIColor.white
        self.view.addSubview(collectionView)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.view.backgroundColor = UIColor.white
    }
 }   

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ShotsMainView.identifier, for: indexPath) as! ShotsMainView
        return cell
    }
}

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // The cell dimensions are set from here
        return CGSize(width: collectionView.frame.size.width, height: 100.0)
    }
}

ShotsMainView 这是集合视图单元格

import UIKit

class ShotsMainView: UICollectionViewCell {

    static var identifier = "Cell"
    weak var textLabel: UILabel!

    override init(frame: CGRect) {
        // Initialize with zero frame
        super.init(frame: frame)
        // Add the scrollview and the corresponding constraints
        let containerScrollView = UIScrollView(frame: .zero)
        containerScrollView.isScrollEnabled = true
        containerScrollView.bounces = true
        containerScrollView.backgroundColor = UIColor.blue
        containerScrollView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(containerScrollView)
        NSLayoutConstraint.activate([
            self.topAnchor.constraint(equalTo: containerScrollView.topAnchor),
            self.bottomAnchor.constraint(equalTo: containerScrollView.bottomAnchor),
            self.leadingAnchor.constraint(equalTo: containerScrollView.leadingAnchor),
            self.trailingAnchor.constraint(equalTo: containerScrollView.trailingAnchor)
        ])

        // Add the stack view that will hold the individual items that
        // in each row that need to be scrolled horrizontally
        let stackView = UIStackView(frame: .zero)
        stackView.distribution = .fill
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        containerScrollView.addSubview(stackView)
        stackView.backgroundColor = UIColor.magenta

        NSLayoutConstraint.activate([
            containerScrollView.leadingAnchor.constraint(equalTo: stackView.leadingAnchor),
            containerScrollView.trailingAnchor.constraint(equalTo: stackView.trailingAnchor),
            containerScrollView.topAnchor.constraint(equalTo: stackView.topAnchor),
            containerScrollView.bottomAnchor.constraint(equalTo: stackView.bottomAnchor)
        ])

        // Add individual items (Labels in this case).
        for i in 0..<10 {
            let label = UILabel(frame: .zero)
            label.translatesAutoresizingMaskIntoConstraints = false
            stackView.addArrangedSubview(label)
            label.text = "\(i)"
            label.font = UIFont(name: "System", size: 20.0)
            label.textColor = UIColor.white
            label.backgroundColor = UIColor.purple
            label.layer.masksToBounds = false
            label.layer.borderColor = UIColor.white.cgColor
            label.layer.borderWidth = 1.0
            label.textAlignment = .center


            NSLayoutConstraint.activate([
                label.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 1.0, constant: 0.0),
                label.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.2, constant: 0.0)
            ])
        }
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

截图