UICollectionViewCompositionalLayout Collectionview 单元格宽度在重新加载数据后无法正确调整大小

Question

我正在使用 UICollectionViewCompositionalLayout 在我的 collectionview 的某些部分创建动态宽度、固定高度、标签单元类型的布局。当我向数据库中的数组添加新字符串、将数组重新加载到数据源并执行 CollectionView 重新加载数据时，单元格以不可预测的方式调整大小。有时它们会正确调整大小以适应字符串的宽度，有时它们似乎使用单元格的估计宽度并截断字符串。对于如何解决这个问题，有任何的建议吗？我在下面发布了一个 gif。

这是我的 makelayout 函数（简化并删除了不必要的代码行）：

override func makeLayout() -> UICollectionViewLayout {
        let layout = UICollectionViewCompositionalLayout(sectionProvider: { (sectionIndex, environment) -> NSCollectionLayoutSection? in


        let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(40), heightDimension: .absolute(40))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        let inset: CGFloat = 10
        item.contentInsets = NSDirectionalEdgeInsets(top: inset, leading: inset, bottom: inset, trailing: inset)
            
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(40))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        group.interItemSpacing = NSCollectionLayoutSpacing.fixed(CGFloat(10))
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = CGFloat(10.0)
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
        section.supplementariesFollowContentInsets = false

        return section
          
    })
        
        
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .vertical
    config.interSectionSpacing = 10
    layout.configuration = config
      
    return layout
}

这是我的自定义集合视图单元

class CollectionViewCell: UICollectionViewCell {
    
    lazy var textLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont(name: "Stolzl-Regular", size: 12)
        label.textAlignment = NSTextAlignment.left
        label.backgroundColor = .clear //.red
        label.textColor = .white
        label.text = ""
        label.numberOfLines = 0
        label.translatesAutoresizingMaskIntoConstraints = false
        label.lineBreakMode = NSLineBreakMode.byWordWrapping
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        setupLabel()

    }
    
    func setupLabel(){
        addSubview(textLabel)
        addConstraintsWithFormat("H:|-10-[v0]-10-|", views: textLabel)
        addConstraintsWithFormat("V:|-10-[v0]-10-|", views: textLabel)
    }

    override func prepareForReuse() {
        super.prepareForReuse()

    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Answer 1

我们显然不知道苹果是如何决定实施

.estimated(n)

布局机制的。如果我们可以看到他们的代码，我们也许可以准确地查明这里发生了什么。但我过去在自己的应用程序中也看到过类似的 UI 布局问题。我相信问题在于以下代码行之间的相互作用：

let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(40),  heightDimension: .absolute(40)).
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping

你基本上对你的细胞限制不足。 a) 您允许标签上有无数行。 b) 你也允许台词被“文字打断”。 c）此外，您告诉布局引擎您不知道单元格（或标签 - 因为这是单元格中唯一的东西）的大小。重新加载视图后，截断的标签也满足您对它们施加的约束，尽管这可能不是您的意图。 当约束不明确时，有多种方法可以满足约束。看起来在第一次布局过程中，布局引擎选择一种方法来满足这些约束，当您重新加载集合视图时，布局引擎选择另一种方法。理想情况下，布局引擎是一致的，并且始终使用相同的方法来执行布局。这可能就是问题所在。我认为如果您将 numberOfLines 属性切换为 1 并将 NSLineBreakMode 切换为 byTruncatingTail，我的猜测是您将获得更一致的布局体验。

我还建议调整您的估计大小，因为它应该接近细胞的平均大小。从 gif 的表格视图中查看可能存在的值 - 我可以看出 40 点太小了。也许 120 分是更现实的估计。