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)

EDIT: It only seems to happen on iOS 14 devices.

EDIT2: Here is a screen recording of the same issue in an example project: https://imgur.com/a/0rS9aZU

Below the code for it:

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()
    }
}

Kudos to @JWK

回答1:

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:

1. Set animatingDifferences to false when calling apply(_:animatingDifferences:completion:). Not ideal if you want animation.
2. 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 use UICollectionViewCompositionalLayout's init(sectionProvider:) for this (to provide the correct NSCollectionLayoutSection for each section).
3. If you're using iOS 14+, I think you get the desired behavior for free by setting your UICollectionViewListCell's accessories property to UICellAccessory.OutlineDisclosureOptions(style: .header). There's a sample project along with other helpful examples here.

来源：https://stackoverflow.com/questions/64790617/diffable-data-source-section-header-blinks-during-update