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()!)])])
}
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?
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.