UICollectionView Cell Expansion Animation Problem

Question

I'm having an issue where my UICollectionView using UICollectionViewCompositionalLayout + Diffable Data source is not allowing me to animate vertical cell expansion smoothly. I have a single column of full-width cells similar to a UITableView, and I'm trying to expand the cell to reveal truncated text upon cell selection.

This works fine without an animation, but when I try to animate it I can't get it to look fluid if the cell below the expanding cell will have a final position out of the screen's bounds, as the cell will just instantly disappear instead of being 'pushed' downward by the animation. The issue can be seen in the linked gif https://i.sstatic.net/Hd5Dx.jpg

This issue does not present itself if the final position of the cell beneath the expanding cell is in the screen's bounds, as can be seen here: https://i.sstatic.net/g0QK9.jpg.

I found an older question which appears to have a similar issue: UICollectionView animating cell size change causes undesired behavior

The answer there is quite old and does not help me since I'm not using Flow Layout nor am I using Obj-C.

I see many apps (Instagram for instance, when a image caption has "see more") that achieve the desired result without any animation problems using a UICollectionView so I'm thinking it must be possible.

Answer 1

It's difficult to diagnose your issue without seeing any code, so here's an example proving that vertically expanding cells with smooth animation can be achieved using UICollectionViewCompositionalLayout and UICollectionViewDiffableDataSource.

How It Works

There are two classes worth noting:

1. Cell: This is the vertically expanding UICollectionViewCell.
2. ViewController: This is the UIViewController that configures the collection view, data source, etc.

When a Cell is selected via collectionView(_:didSelectItemAt:), the isExpanded property for the corresponding item in the items array is toggled, and the snapshot for the data source is updated via updateSnapshot():

Code

Create a new Xcode project using the Single View App template and drop this code into the ViewController.swift file:

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

// 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()
        view.addSubview(collectionView)
        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)]
            )
        )
        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()
    }
}