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),
        ])
    }
}

我遇到的几个无法找到解决方案的问题是：

标题甚至都没有显示，我试图更改常数几次，但还是一无所获。
constraits问题，我将stackView topAnchor设置为postImage bottomAnchor，但仍然无法正常工作。这是模拟器的屏幕截图。
如您在下面的屏幕快照中所见，由于某种原因，收集视图偏向侧面。我猜这是一个collectionView问题，而不是单元问题，但是我也没有找到解决方案。

Answer 1

将此常数更改为负Anything else that you wish to match is a match，当您使用postImage.topAnchor.constraint(equalTo: postTitle.bottomAnchor, constant: 10)或bottomAnchor时，该常数必须为负。如果您想了解更多信息，请参阅Bottom and Right constraints of view are negative?
约束常数为rightAnchor的相同问题，请尝试将其更改为-50
如果要使用动态像元高度创建“收藏夹视图”，则需要计算像元大小。您可以通过创建自定义视图布局来实现此目的，请参见 https://www.raywenderlich.com/392-uicollectionview-custom-layout-tutorial-pinterest 这是创建自定义stackView.topAnchor.constraint(equalTo: postImage.bottomAnchor, constant: 50)的很好的教程，或者您可以使用UICollectionViewLayout在方法func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize中计算像元大小，如果所有约束都设置正确，则此方法将返回像元大小，但是您需要记住此函数将叫每个当单元格出现时，解决方法是保存高度并检查如果内容已用于计算像元的高度。如果您需要在另一时间更改单元格的高度，也更新保存的值或删除它以计算大小再次。

systemLayoutSizeFitting

无法在CollectionView中获得自定义单元格以正常工作

1 个答案: