我正在使用 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")
}
}
我们显然不知道苹果是如何决定实施
.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 分是更现实的估计。