为什么我的自定义UICollectionViewCell不显示？

Question

我正在使用iPad的Swift Playgrounds编写一个模拟的聊天机器人应用程序，作为对Apple的WWDC 2020学生挑战赛的提交。我有一个带有自定义单元格的UICollectionView。但是，当我运行Playground时，看不到UICollectionView或自定义单元格。我所看到的只是我为view设置的红色背景色。

这是我的代码：

import UIKit
import PlaygroundSupport

struct CustomData {
    var message = String()
}

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    fileprivate let data = [
        CustomData(message: "help")
    ]

    internal let collectionView:UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        // Set scroll direction to vertical
        layout.scrollDirection = .vertical
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.translatesAutoresizingMaskIntoConstraints = false
        // Register custom cell
        cv.register(ChatLogMessageCell.self, forCellWithReuseIdentifier: "cell")
        return cv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .red
        collectionView.backgroundColor = .red
        view.addSubview(collectionView)
        collectionView.delegate = self
        collectionView.dataSource = self

        // Disable horizontal scrollbar
        collectionView.showsVerticalScrollIndicator = false

        // Set anchors to give collection view adaquate spacing
    }        
}

extension ViewController {
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // Get which cell was tapped
        print(indexPath.row)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 250)
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // Number of cards
        return 5
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ChatLogMessageCell
        cell.messageTextView.text = "sample message text"
        return cell
    }
}

class ChatLogMessageCell: UICollectionViewCell {
    let messageTextView : UITextView = {
        let textView = UITextView()
        //textView.font = UIFont.systemFont(ofSize: 18)
        textView.text = "sample message"
        return textView
    }()

    let messageBubbleView : UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.blue
        view.layer.cornerRadius = 15
        view.layer.masksToBounds = true
        return view
    }()

    func setupViews(){
        addSubview(messageBubbleView)
        addSubview(messageTextView)
    }
}

PlaygroundPage.current.liveView = ViewController()

Answer 1

您需要在viewDidLoad中更新集合视图的框架，因为它的大小在创建后为零。以下代码将收集视图固定在view的边缘：

NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        ])

此外，不调用ChatLogMessageCell的setupViews方法。以下代码调用setupViews，然后再设置子视图的框架：

class ChatLogMessageCell : UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .lightGray
        setupViews()
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    let messageTextView : UITextView = {
        let textView = UITextView()
        textView.text = "sample message"
        return textView
    }()
    let messageBubbleView : UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.blue
        view.layer.cornerRadius = 15
        view.layer.masksToBounds = true
        return view
    }()
    func setupViews(){
        addSubview(messageBubbleView)
        messageBubbleView.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 50)
        addSubview(messageTextView)
        messageTextView.frame = CGRect(x: 0, y: 60, width: bounds.width, height: 60)
    }
}