swift - 无法让 CollectionView 中的自定义单元格正常工作

Question

我为我的 CollectionView 创建了一个自定义单元格，但是，我在按需要显示单元格时遇到了问题。这是自定义单元格的代码:

import Foundation
import UIKit

class CardCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupCell()
        setupViewsInCell()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupCell()
        setupViewsInCell()
    }

    var postTitle: UILabel = {
        let label = UILabel()
        label.text = "POST TITLE"
        label.font = UIFont.boldSystemFont(ofSize: 14)
        label.textColor = UIColor.appColors.mainBlack
        label.translatesAutoresizingMaskIntoConstraints = false

        return label
    }()

    //postImage need to be the image the user uploaded.
    var postImage: UIImageView = {
        let image = UIImageView(image: UIImage(named: "placeholder-image"))
        image.contentMode = .scaleAspectFit
        image.clipsToBounds = true
        image.translatesAutoresizingMaskIntoConstraints = false

        return image
    }()

    var likeImage: UIImageView = {
        let image = UIImageView(image: UIImage(named: "like"))
        image.contentMode = .scaleAspectFit
        image.clipsToBounds = true
        image.translatesAutoresizingMaskIntoConstraints = false

        return image
    }()

    var numberOfLikes: UILabel = {
        let label = UILabel()
        label.text = "20"
        label.font = UIFont.systemFont(ofSize: 8)
        label.textColor = UIColor.appColors.mainBlack
        label.translatesAutoresizingMaskIntoConstraints = false

        return label
    }()

    var dislikeImage: UIImageView = {
        let image = UIImageView(image: UIImage(named: "dislike"))
        image.contentMode = .scaleAspectFit
        image.clipsToBounds = true
        image.translatesAutoresizingMaskIntoConstraints = false

        return image
    }()

    var numberOfDislikes: UILabel = {
        let label = UILabel()
        label.text = "34"
        label.font = UIFont.systemFont(ofSize: 8)
        label.textColor = UIColor.appColors.mainBlack
        label.translatesAutoresizingMaskIntoConstraints = false

        return label
    }()

    func setupCell(){
        backgroundColor = UIColor.appColors.mainWhite
        layer.cornerRadius = 10
        clipsToBounds = true
        layer.shadowColor = UIColor(white: 0, alpha: 0.25).cgColor
        layer.shadowOffset = CGSize.zero
        layer.shadowOpacity = 1
        layer.shadowRadius = 2
        layer.masksToBounds = false
    }

    func setupViewsInCell(){

        let stackView = UIStackView(arrangedSubviews: [likeImage, numberOfLikes, dislikeImage, numberOfDislikes])
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(postTitle)
        self.addSubview(postImage)
        self.addSubview(stackView)

        NSLayoutConstraint.activate([
            postTitle.topAnchor.constraint(equalTo: self.topAnchor, constant: 0),
            postTitle.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8),
            postImage.topAnchor.constraint(equalTo: postTitle.bottomAnchor, constant: 10),
            postImage.leftAnchor.constraint(equalTo: self.leftAnchor),
            postImage.rightAnchor.constraint(equalTo: self.rightAnchor),
            postImage.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 30),
            stackView.topAnchor.constraint(equalTo: postImage.bottomAnchor, constant: 50),
            stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0),
            stackView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8),
            stackView.heightAnchor.constraint(equalToConstant: 40),
            stackView.widthAnchor.constraint(equalToConstant: self.frame.width / 2),
        ])
    }
}

我遇到的几个问题，但找不到解决方案是:

1. 标题甚至没有显示，我尝试更改常量几次，但仍然没有。
2. 约束问题，我将 stackView topAnchor 设置为 postImage bottomAnchor，但它仍然不起作用。这是模拟器的屏幕截图。
3. 正如您在下面的屏幕截图中所看到的，出于某种原因， Collection View 偏向了一边。我猜这是一个 collectionView 问题而不是单元格问题，但我也找不到解决方案。

Answer 1

1. 当您使用 bottomAnchor 或 时，将此常量更改为负 postImage.topAnchor.constraint(equalTo: postTitle.bottomAnchor, constant: 10) rightAnchor 常量需要为负数。如果您想了解更多信息，请参阅Bottom and Right constraints of view are negative?

2. 约束常量stackView.topAnchor.constraint(equalTo: postImage.bottomAnchor, constant: 50)同样的问题，改成-50试试

3. 如果要创建具有动态单元格高度的 Collection View ，则需要计算单元格大小。您可以通过创建自定义 View 布局来做到这一点，请参阅 https://www.raywenderlich.com/392-uicollectionview-custom-layout-tutorial-pinterest这是创建自定义 UICollectionViewLayout 的好教程，或者您可以在方法 func 中计算单元格大小
collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout:UICollectionViewLayout，sizeForItemAt
indexPath: IndexPath) -> CGSize 使用systemLayoutSizeFitting，如果所有约束设置正确，这个方法将返回单元格的大小，但你需要记住这个函数将被调用每一个当一个单元格出现时，解决这个问题的方法是保存高度并检查如果内容已用于计算单元格的高度。如果你需要在另一个时间改变单元格的高度，你需要也更新保存的值或删除它以计算大小再次。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 50)
        let dummyCell = Cell(frame: frame)
        let targetSize = CGSize(width: view.frame.width, height: 1000)
        let dummyData = data[indexPath.row]
        dummyCell.data = dummyData
        dummyCell.layoutIfNeeded()
        let height = max(MINIMUM_CELL_SIZE, 
         dummyCell.systemLayoutSizeFitting(targetSize).height)
        return CGSize(width: view.frame.width, height: height)
    }