在更新过程中,可扩散数据源部分标题闪烁 [英] diffable data source section header blinks during update
问题描述
我目前正面临一个问题,即在将新快照应用于当前数据源时,页眉,页脚和装饰视图不是集合视图的子视图的一部分,这会引起奇怪的闪烁.有人遇到过这个问题吗?
I'm currently facing the issue, that when applying a new snapshot to my current data source, that the header, footer and decoration views are not part of the collection view's subviews, which can be noticed as a weird flicker. Did anyone face that issue before?
我通过以下方式更新数据源:
I update the data source via:
var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()
snapshot.appendSections(Sections.allCases)
items.forEach { snapshot.appendItems([$0], toSection: ItemSectionMapper.getSection(for: $0)) }
self.dataSource?.apply(snapshot)
这似乎只发生在iOS 14设备上.
It only seems to happen on iOS 14 devices.
这是示例项目中相同问题的屏幕录像: https://imgur.com/a/0rS9aZU
Here is a screen recording of the same issue in an example project: https://imgur.com/a/0rS9aZU
下面的代码:
import UIKit
// MARK: - Cell -
final class Cell: UICollectionViewCell {
static let reuseIdentifier = "Cell"
var isExpanded = false {
didSet { label.numberOfLines = numberOfLines }
}
var numberOfLines: Int { isExpanded ? 0 : 3 }
lazy var label: UILabel = {
let label = UILabel()
label.numberOfLines = numberOfLines
label.frame.size = contentView.bounds.size
label.autoresizingMask = [.flexibleWidth, .flexibleHeight]
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(label)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
label.sizeThatFits(size)
}
}
final class Header: UICollectionReusableView {
static let elementKind = "Header"
lazy var label: UILabel = {
let label = UILabel()
label.numberOfLines = 1
label.frame.size = bounds.size
label.autoresizingMask = [.flexibleWidth, .flexibleHeight]
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(label)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
label.sizeThatFits(size)
}
}
// MARK: - UIViewController -
class ViewController: UIViewController {
struct Item: Hashable {
let text: String
var isExpanded = false
private let uuid = UUID()
}
var items: [Item] = [
.init(
text: """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
"""
),
.init(
text: """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
""",
isExpanded: true
)
]
lazy var collectionView: UICollectionView = {
let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createCollectionViewLayout())
collectionView.register(Cell.self, forCellWithReuseIdentifier: Cell.reuseIdentifier)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
collectionView.contentInset.top = 44
collectionView.backgroundColor = .white
collectionView.delegate = self
return collectionView
}()
lazy var dataSource = UICollectionViewDiffableDataSource<Int, Item>(collectionView: collectionView) { collectionView, indexPath, itemIdentifier in
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Cell.reuseIdentifier, for: indexPath) as? Cell else { fatalError() }
cell.isExpanded = itemIdentifier.isExpanded
cell.label.text = itemIdentifier.text
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
dataSource.supplementaryViewProvider = { (collectionView, kind, indexPath) -> UICollectionReusableView? in
guard let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: Header.elementKind, for: indexPath) as? Header else { fatalError() }
view.label.text = "Test"
return view
}
view.addSubview(collectionView)
collectionView.register(Header.self, forSupplementaryViewOfKind: Header.elementKind, withReuseIdentifier: Header.elementKind)
updateSnapshot()
}
private func createCollectionViewLayout() -> UICollectionViewCompositionalLayout {
let layoutSize = NSCollectionLayoutSize.init(
widthDimension: .fractionalWidth(1.0),
heightDimension: .estimated(200)
)
let section = NSCollectionLayoutSection(group:
.vertical(
layoutSize: layoutSize,
subitems: [.init(layoutSize: layoutSize)]
)
)
let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .estimated(20)), elementKind: Header.elementKind, alignment: .top)
section.boundarySupplementaryItems = [header]
section.contentInsets = .init(top: 0, leading: 16, bottom: 0, trailing: 16)
section.interGroupSpacing = 20
return .init(section: section)
}
private func updateSnapshot() {
var snapshot = NSDiffableDataSourceSnapshot<Int, Item>()
snapshot.appendSections([0])
snapshot.appendItems(items)
dataSource.apply(snapshot, animatingDifferences: true)
}
}
// MARK: - UICollectionViewDelegate -
extension ViewController: UICollectionViewDelegate {
public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
guard let itemIdentifier = dataSource.itemIdentifier(for: indexPath) else { return }
items[indexPath.row] = .init(text: itemIdentifier.text, isExpanded: !itemIdentifier.isExpanded)
updateSnapshot()
}
}
对@JWK表示敬意
推荐答案
此行为似乎是意料之外的,尽管我认为发生这种情况的原因仅仅是因为整个部分都已通过apply(_:animatingDifferences:completion:)
中的动画进行了更新.您可以尝试以下几种解决方法:
This behavior seems unexpected, though I believe it's happening simply because the entire section is updated with animation in apply(_:animatingDifferences:completion:)
. There are a few workarounds you could try:
- 在调用
apply(_:animatingDifferences:completion:)
时将animatingDifferences
设置为false
.如果您想要动画,那是不理想的. - 添加另一个部分,而不使用
boundarySupplementaryItems
.不会扩展的部分不应在视觉上受到影响.您可能需要引入另一个单元格,并为此使用UICollectionViewCompositionalLayout
的init(sectionProvider:)
(为每个部分提供正确的NSCollectionLayoutSection
). - 如果您使用的是iOS 14+,我认为您可以通过将
UICollectionViewListCell
的accessories
属性设置为UICellAccessory.OutlineDisclosureOptions(style: .header)
来免费获得所需的行为.在此处. >
- Set
animatingDifferences
tofalse
when callingapply(_:animatingDifferences:completion:)
. Not ideal if you want animation. - Add another section instead of using
boundarySupplementaryItems
. Sections that don't expand shouldn't be affected visually. You will probably need to introduce another cell and useUICollectionViewCompositionalLayout
'sinit(sectionProvider:)
for this (to provide the correctNSCollectionLayoutSection
for each section). - If you're using iOS 14+, I think you get the desired behavior for free by setting your
UICollectionViewListCell
'saccessories
property toUICellAccessory.OutlineDisclosureOptions(style: .header)
. There's a sample project along with other helpful examples here.
这篇关于在更新过程中,可扩散数据源部分标题闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!