自带过渡效果的UICollectionView瀑布流布局。
Feature：
✅ 自带过渡效果；
✅ 可自定义列数、间距等属性；
✅ 适配横竖屏；
✅ 提供异步刷新；
✅ 兼容 OC & Swift；
✅ API简单易用。
- 整体刷新效果
- 列数变化效果
- 增/删/改效果
- 适配横竖屏
-
只需将
WaterfallLayout.swift文件拖进项目 -
初始化
waterfallLayout及collectionView并成为其代理
let waterfallLayout = WaterfallLayout()
waterfallLayout.delegate = self
let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: waterfallLayout)
collectionView.delegate = self
collectionView.dataSource = self
view.addSubview(collectionView)- 实现
waterfallLayout的代理方法，搞定
extension ViewController: WaterfallLayoutDelegate {
/// 提供item的下标和（根据列数和间距得出）的宽度，需代理返回对应item的高度
func waterfallLayout(_ waterfallLayout: WaterfallLayout, heightForItemAtIndex index: Int, itemWidth: CGFloat) -> CGFloat {
// 具体可参考Demo
let girl = girls[index]
return itemWidth / girl.whRatio
}
///【可选】cell的总列数
func colCountInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> Int {
4
}
///【可选】cell的列间距
func colMarginInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> CGFloat {
5
}
///【可选】cell的行间距
func rowMarginInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> CGFloat {
5
}
///【可选】collectionView的内容间距
func edgeInsetsInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> UIEdgeInsets {
UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
}
}- 刷新布局
// 带动画刷新：使用自定义动画包裹collectionView的刷新操作
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.88, initialSpringVelocity: 1) {
self.collectionView.performBatchUpdates {
self.collectionView.reloadSections(IndexSet(integer: 0))
}
}
// 不带动画刷新
collectionView.reloadData()-
目前仅支持
UICollectionViewCell和单Section的布局，也就是说不支持Section头、Section尾和多个Section的情况； -
当数据量庞大时，可使用异步刷新：
waterfallLayout.asyncUpdateLayout(itemTotal: girls.count) { [weak self] index, itemWidth in
// 提供item的下标和（根据列数和间距得出）的宽度，返回对应item的高度
guard let self = self else { return 1 }
let girl = self.girls[index]
return itemWidth / girl.whRatio
} completion: { [weak self] in
// 刷新布局
guard let self = self else { return }
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.88, initialSpringVelocity: 1) {
self.collectionView.performBatchUpdates {
self.collectionView.reloadSections(IndexSet(integer: 0))
}
}
}PS：目前已做了初步优化，即便不使用异步刷新，在展示和滑动大量数据的列表（如用户相册）时也能保持页面流畅：
- 后续迭代将不断优化！