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

Question

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

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

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

The, I... 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, constant: 5),
            countryNameLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 5),
//            countryNameLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 0),
            countryNameLabel.widthAnchor.constraint(equalToConstant: 20),

            countryUserCountLabel.leadingAnchor.constraint(equalTo: countryNameLabel.trailingAnchor, constant: 5),
            countryUserCountLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 5),
            countryUserCountLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 5),
            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)
    }
}

Answer 1

好的 - 一些东西...

正如我在评论中所说，将子视图和约束添加到单元格 .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, constant: 5),

        countryNameLabel.heightAnchor.constraint(equalToConstant: 30),
        countryNameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
        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, constant: 5),
        countryUserCountLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
        countryUserCountLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -5),
        countryUserCountLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -5),
        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)
    ])

}

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

Horizontal scrolling collection view partially hiding first cell content on initial load

ios

uicollectionview

uicollectionviewcell

uicollectionviewlayout

swift