iosswiftuicollectionviewrx-swiftrxdatasources

RxDataSources collection view cell always uses fade for insert cell animation, can't change to a different animation


I am having an issue with cell animations using RxSwift on a UICollectionView, my simple setup is as follows:

collectionView.register(UINib(nibName: "CustomCollectionCell", bundle: nil), forCellWithReuseIdentifier: "cell")

let dataSource = RxCollectionViewSectionedAnimatedDataSource<SectionOfCustomDataAnimated>(
    animationConfiguration: AnimationConfiguration(insertAnimation: .bottom, reloadAnimation: .bottom, deleteAnimation: .bottom),
    configureCell: { dataSource, cv, indexPath, element in
        let cell = cv.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCollectionCell
        cell.colorView.backgroundColor = element.color
        return cell
    })

With the cell and data models like so:

struct CustomDataAnimated {
    let id: Int
    let color: UIColor
}

extension CustomDataAnimated: IdentifiableType, Equatable {
    typealias Identity = Int

    var identity: Identity {
        return id
    }
}

struct SectionOfCustomDataAnimated {
    var items: [Item]

    // Need to provide a unique id, only one section in our model
    var identity: Int {
        return 0
    }
}

extension SectionOfCustomDataAnimated: AnimatableSectionModelType {
    typealias Identity = Int
    typealias Item = CustomDataAnimated

    init(original: SectionOfCustomDataAnimated, items: [Item]) {
        self = original
        self.items = items
    }
}

I am using a BehaviourRelay that updates when the update button is pressed:

 private let sections = BehaviorRelay<[SectionOfCustomDataAnimated]>(
        value: [SectionOfCustomDataAnimated(items: [
            CustomDataAnimated(id: 0, color: .red),
            CustomDataAnimated(id: 1, color: .yellow)
    ])])

 @IBAction func didTapUpdate(_ sender: Any) {
        let colors: [UIColor] = [.red, .blue, .green, .purple, .orange]
        let originalColors = sections.value.first!.items
        self.sections.accept([SectionOfCustomDataAnimated(items: originalColors + [CustomDataAnimated(id: originalColors.count ,color: colors.randomElement()!)])])
    }

enter image description here

The problem is that the collection view does animate however it seems it always uses a fade style animation. Choosing a different option such as .bottom in the example above still results in the same fade animation. I have used similar logic on a table view before and there was no issue, I only seem to have the issue in collection views. How can I get the different style of animations to work?


Solution

  • UICollectionView insertion/deletion animations are handled by the layout so the RxCollectionViewSectionedAnimatedDataSource cannot do that for you. If you take a look at the insertRows/insertItems funcs for example, you will notice that for UITableView it takes animation while for UICollectionView does not. What you are seeing is the default animation used by UICollectionViewFlowLayout which is a fade animation. If you want a custom behavior you have to create a layout subclass and there are plenty of tutorials for that.