水平滚动集合视图在初始加载时部分隐藏第一个单元格内容

问题描述

我有一个 UIView，在里面，我添加了一个 UILabel 和 UICollectionView。 UICollectionView 水平滚动。但问题是，当我运行应用程序时，UICollectionView 偏移量的设置方式使第一个单元格部分隐藏。如果我向右滚动，则可以看到第一个单元格的内容。但是当我放手时，它会弹回原来的隐藏状态。

正如您在此处看到的，第一个单元格有 2 个 UIViews，但只有第二个单元格可见。

当我向右滚动时，它是这样的：

那个，我... 10，是被隐藏的单元格。我以编程方式添加了元素，所以可能是一个约束问题。但我无法将导致它的原因归零。

这是我的UICollectionViewCell：

class UserCountryCell: UICollectionViewCell {
    
    let countryNameLabel: UILabel
    let countryUserCountLabel: UILabel
    
    
    override init(frame: CGRect) {
        countryNameLabel = UILabel()
        countryUserCountLabel = UILabel()
        super.init(frame: frame)

        self.addSubview(countryNameLabel)
        countryNameLabel.translatesAutoresizingMaskIntoConstraints = false
        countryNameLabel.font = UIFont.boldSystemFont(ofSize: 13)
        countryNameLabel.textColor = .white
        
        self.addSubview(countryUserCountLabel)
        countryUserCountLabel.translatesAutoresizingMaskIntoConstraints = false
        countryUserCountLabel.font = UIFont.systemFont(ofSize: 13)
        countryUserCountLabel.textColor = .white
        
        NSLayoutConstraint.activate([
            countryNameLabel.trailingAnchor.constraint(equalTo: self.leadingAnchor,constant: 5),countryNameLabel.heightAnchor.constraint(equalToConstant: 30),countryNameLabel.topAnchor.constraint(equalTo: self.topAnchor,countryNameLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor,//            countryNameLabel.widthAnchor.constraint(greaterThanorEqualToConstant: 0),countryNameLabel.widthAnchor.constraint(equalToConstant: 20),countryUserCountLabel.leadingAnchor.constraint(equalTo: countryNameLabel.trailingAnchor,countryUserCountLabel.topAnchor.constraint(equalTo: self.topAnchor,countryUserCountLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor,countryUserCountLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor,constant: -5),countryUserCountLabel.heightAnchor.constraint(equalToConstant: 30),countryUserCountLabel.widthAnchor.constraint(equalToConstant: 40)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureCell(countryName: String,countryUserCount: Int) {
        countryNameLabel.text = countryName
        countryUserCountLabel.text = String(countryUserCount)
    }
}

解决方法

好的 - 几件事......

正如我在评论中所说，将子视图和约束添加到单元格的 .contentView，而不是单元格本身。

您的约束确实存在一些错误。您将 countryNameLabel.trailingAnchor 限制为 self.leadingAnchor ... 应该是 .leadingAnchor 到 .leadingAnchor。

您的 .bottomAnchor 常量应该是负数。

如果您希望标签的文本确定其宽度，请不要指定 .widthAnchor。

尝试用这个替换你的初始化：

override init(frame: CGRect) {
    countryNameLabel = UILabel()
    countryUserCountLabel = UILabel()
    super.init(frame: frame)
    
    contentView.addSubview(countryNameLabel)
    countryNameLabel.translatesAutoresizingMaskIntoConstraints = false
    countryNameLabel.font = UIFont.boldSystemFont(ofSize: 13)
    countryNameLabel.textColor = .white
    
    contentView.addSubview(countryUserCountLabel)
    countryUserCountLabel.translatesAutoresizingMaskIntoConstraints = false
    countryUserCountLabel.font = UIFont.systemFont(ofSize: 13)
    countryUserCountLabel.textColor = .white
    
    NSLayoutConstraint.activate([

        // needs to be .leadingAnchor to .leadingAnchor
        //countryNameLabel.trailingAnchor.constraint(equalTo: self.leadingAnchor,constant: 5),countryNameLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor,countryNameLabel.heightAnchor.constraint(equalToConstant: 30),countryNameLabel.topAnchor.constraint(equalTo: contentView.topAnchor,countryNameLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor,constant: -5),// if you want the label width to fit its text
        //  don't set the label's widthAnchor
        //countryNameLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 0),//countryNameLabel.widthAnchor.constraint(equalToConstant: 20),countryUserCountLabel.leadingAnchor.constraint(equalTo: countryNameLabel.trailingAnchor,countryUserCountLabel.topAnchor.constraint(equalTo: contentView.topAnchor,countryUserCountLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor,countryUserCountLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor,countryUserCountLabel.heightAnchor.constraint(equalToConstant: 30),// if you want the label width to fit its text
        //  don't set the label's widthAnchor
        //countryUserCountLabel.widthAnchor.constraint(equalToConstant: 40)
    ])

}