前言
因为公司项目中使用了大量的 CollectionView 来显示列表，平常使用 UICollectionView + UICollectionViewFlowLayout 基本能够满足需求，但是针对一些特殊页面，我们会可能需要一些特殊的列表布局，这个时候我们就需要 UICollectionView + 自定义 Layout 的形式进行实现，下面就以比较简单的自定义瀑布流布局为例。
自定义 Layout
UICollectionViewLayout 是一个抽象基类，要使用必须进行子类化，用来生成 CollectionView 的布局信息。注意，该类只负责 CollectionView 的布局，不负责具体视图的创建。
UICollectionViewLayout有 3 种布局元素：
- Cell（列表视图）
- SupplementaryView（追加视图）
- DecorationView（装饰视图）【不常用，可忽略】
我们先来看下 UICollectionViewLayout 里面都有哪些常用方法和属性：
// 返回当前 CollectionView 的滚动范围，要重写
var collectionViewContentSize: CGSize { get }
// 预布局方法 所有的布局应该写在这里面，要重写
func prepare()
// 此方法应该返回当前屏幕正在显示的视图的布局属性集合，要重写
func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]
// 获取 Cell 视图的布局，要重写【在移动/删除的时候会调用该方法】
func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
// 获取 SupplementaryView 视图的布局
func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
// 是否重新布局，默认是 false，当返回 true 时，prepare 会被频繁调用
func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool
// 这4个方法用来处理插入、删除和移动 Cell 时的一些动画
func prepare(forCollectionViewUpdates updateItems: [UICollectionViewUpdateItem])
func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes?
func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes?
func finalizeCollectionViewUpdates()然后我们会注意到一个非常重要的类UICollectionViewLayoutAttributes，这个就是用来存储视图的布局信息，很简单，主要属性和方法如下：
@available(iOS 6.0, *)
class UICollectionViewLayoutAttributes : NSObject, NSCopying, UIDynamicItem {
@available(iOS 7.0, *)
open var bounds: CGRect // 大小
@available(iOS 7.0, *)
open var transform: CGAffineTransform // 形变
open var frame: CGRect // 位置和大小
open var center: CGPoint // 中心点位置
open var size: CGSize // 大小
open var transform3D: CATransform3D // 形变
open var alpha: CGFloat // 透明度
open var zIndex: Int // 视图层级，用来实现视图分层，默认是 0
open var isHidden: Bool // 是否隐藏，少用，一般使用 alpha
open var indexPath: IndexPath // 列表的索引
open var representedElementCategory: UICollectionElementCategory { get } // 是个枚举，表示 3 种布局类型
open var representedElementKind: String? { get } //当是 cell 时，该值为 nil，该属性用来区分 header 和 footer
// 初始化方法
public convenience init(forCellWith indexPath: IndexPath)
public convenience init(forSupplementaryViewOfKind elementKind: String, with indexPath: IndexPath)
public convenience init(forDecorationViewOfKind decorationViewKind: String, with indexPath: IndexPath)
}下面是瀑布流实战代码：
import UIKit
/// 定义瀑布流代理，用于计算每个瀑布流卡片高度、顶部视图大小、底部视图大小，配置行间距、列间距、缩进属性
@objc protocol CollectionViewDelegateWaterLayout {
// cell 大小
func collectionView(_ collectionView: UICollectionView, limitSize: CGSize, sizeForItemAt indexPath: IndexPath) -> CGSize
// 组缩进
@objc optional func collectionView(_ collectionView: UICollectionView, insetForSectionAt section: Int) -> UIEdgeInsets
// 行间距
@objc optional func collectionView(_ collectionView: UICollectionView, rowSpacingForSectionAt section: Int) -> CGFloat
// 列间距
@objc optional func collectionView(_ collectionView: UICollectionView, columnSpacingForSectionAt section: Int) -> CGFloat
// 顶部视图大小
@objc optional func collectionView(_ collectionView: UICollectionView, referenceSizeForHeaderInSection section: Int) -> CGSize
// 底部视图大小
@objc optional func collectionView(_ collectionView: UICollectionView, referenceSizeForFooterInSection section: Int) -> CGSize
}
/// 自定义瀑布流 CollectionView 布局，支持水平和垂直方向
class CollectionViewWaterFlowLayout: UICollectionViewLayout {
fileprivate var layoutAttributes = [UICollectionViewLayoutAttributes]()
fileprivate var waterLengths: [Int: CGFloat] = [:]
fileprivate var waterCount: Int = 1
fileprivate var updateIndexPaths: [IndexPath] = []
weak var delegate: CollectionViewDelegateWaterLayout?
var rowSpacing: CGFloat = 0
var columnSpacing: CGFloat = 0
var scrollDirection: UICollectionViewScrollDirection = .vertical
var sectionInset: UIEdgeInsets = .zero
/// 初始化传入瀑布流的数量
init(waterCount: Int = 1) {
super.init()
self.waterCount = max(1, waterCount)
for index in 0..<waterCount {
waterLengths[index] = 0.0
}
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
/// 布局后的内容大小
override var collectionViewContentSize: CGSize {
var totalSize: CGSize = .zero
if scrollDirection == .vertical {
totalSize.height = layoutAttributes.map({ $0.frame.origin.y + $0.frame.size.height }).sorted(by: { $0 > $1 }).first ?? 0.0
if let collectionView = collectionView {
totalSize.width = collectionView.frame.size.width
}
} else {
totalSize.width = layoutAttributes.map({ $0.frame.origin.x + $0.frame.size.width }).sorted(by: { $0 > $1 }).first ?? 0.0
if let collectionView = collectionView {
totalSize.height = collectionView.frame.size.height
}
}
return totalSize
}
/// reloadData 后，系统在布局前会调用
override func prepare() {
super.prepare()
guard let collectionView = collectionView else { return }
// 清空瀑布流长度和布局数据
layoutAttributes.removeAll()
for index in 0..<waterLengths.count {
waterLengths[index] = 0.0
}
for sectionIndex in 0..<collectionView.numberOfSections {
let cellCount = collectionView.numberOfItems(inSection: sectionIndex)
if cellCount <= 0 { continue }
// 设置行间距、列间距、组缩进
rowSpacing = self.delegate?.collectionView?(collectionView, rowSpacingForSectionAt: sectionIndex) ?? 0.0
columnSpacing = self.delegate?.collectionView?(collectionView, columnSpacingForSectionAt: sectionIndex) ?? 0.0
sectionInset = self.delegate?.collectionView?(collectionView, insetForSectionAt: sectionIndex) ?? .zero
// 获取该组的顶部视图布局
let sectionIndexPath: IndexPath = IndexPath(row: 0, section: sectionIndex)
if let headerLayoutAttribute = getSupplementaryViewLayoutAttribute(ofKind: UICollectionElementKindSectionHeader, at: sectionIndexPath) {
layoutAttributes.append(headerLayoutAttribute)
}
// 获取该组的所有 cell 布局
for cellIndex in 0..<cellCount {
let cellIndexPath: IndexPath = IndexPath(row: cellIndex, section: sectionIndex)
if let cellLayoutAttribute = getCellLayoutAttribute(at: cellIndexPath) {
layoutAttributes.append(cellLayoutAttribute)
}
}
// 获取该组的底部视图布局
if let footerLayoutAttribute = getSupplementaryViewLayoutAttribute(ofKind: UICollectionElementKindSectionFooter, at: sectionIndexPath) {
layoutAttributes.append(footerLayoutAttribute)
}
}
}
/// 计算各个 cell 的布局
fileprivate func getCellLayoutAttribute(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
guard let collectionView = collectionView else { return nil }
let layoutAttribute = UICollectionViewLayoutAttributes(forCellWith: indexPath)
// 计算瀑布流 cell 限制大小
var limitSize = CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude)
if scrollDirection == .vertical {
let interitemSpacingWidth: CGFloat = CGFloat(waterCount - 1) * columnSpacing
let columnWidth: CGFloat = (collectionView.frame.size.width - sectionInset.left - sectionInset.right - interitemSpacingWidth) / CGFloat(waterCount)
limitSize.width = columnWidth
} else {
let interitemSpacingHeight: CGFloat = CGFloat(waterCount - 1) * rowSpacing
let columnHeight: CGFloat = (collectionView.frame.size.height - sectionInset.top - sectionInset.bottom - interitemSpacingHeight) / CGFloat(waterCount)
limitSize.height = columnHeight
}
// 通过代理获取瀑布流 cell 大小
if let layout = self.delegate {
layoutAttribute.frame.size = layout.collectionView(collectionView, limitSize: limitSize, sizeForItemAt: indexPath)
}
// 找到最短的那一条，把该 cell 的位置放到该条后面，并更新瀑布流长度
let minWater = waterLengths.sorted(by: { (first, second) in
if first.value < second.value {
return true
} else if first.value == second.value {
return first.key < second.key
}
return false
}).first
if let minWater = minWater {
if scrollDirection == .vertical {
layoutAttribute.frame.origin.x = sectionInset.left + CGFloat(minWater.key) * (limitSize.width + columnSpacing)
layoutAttribute.frame.origin.y = minWater.value + rowSpacing
waterLengths[minWater.key] = layoutAttribute.frame.origin.y + layoutAttribute.frame.size.height
} else {
layoutAttribute.frame.origin.y = sectionInset.top + CGFloat(minWater.key) * (limitSize.height + rowSpacing)
layoutAttribute.frame.origin.x = minWater.value + columnSpacing
waterLengths[minWater.key] = layoutAttribute.frame.origin.x + layoutAttribute.frame.size.width
}
}
return layoutAttribute
}
/// 计算的顶部/底部视图的布局
fileprivate func getSupplementaryViewLayoutAttribute(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
guard let collectionView = collectionView else { return nil }
let layoutAttribute = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: elementKind, with: indexPath)
var supplementarySize: CGSize = .zero
if let delegate = self.delegate {
if elementKind == UICollectionElementKindSectionHeader {
supplementarySize = delegate.collectionView?(collectionView, referenceSizeForHeaderInSection: indexPath.section) ?? .zero
} else if elementKind == UICollectionElementKindSectionFooter {
supplementarySize = delegate.collectionView?(collectionView, referenceSizeForFooterInSection: indexPath.section) ?? .zero
}
}
layoutAttribute.frame.size = supplementarySize
if scrollDirection == .vertical {
layoutAttribute.frame.origin.x = self.sectionInset.left
let lastLayoutBottom: CGFloat = layoutAttributes.map({ $0.frame.origin.y + $0.frame.size.height }).sorted(by: { $0 > $1 }).first ?? 0.0
if elementKind == UICollectionElementKindSectionHeader {
layoutAttribute.frame.origin.y = lastLayoutBottom + self.sectionInset.top
} else if elementKind == UICollectionElementKindSectionFooter {
layoutAttribute.frame.origin.y = lastLayoutBottom + self.sectionInset.bottom
}
} else {
layoutAttribute.frame.origin.y = self.sectionInset.top
let lastLayoutRight: CGFloat = layoutAttributes.map({ $0.frame.origin.x + $0.frame.size.width }).sorted(by: { $0 > $1 }).first ?? 0.0
if elementKind == UICollectionElementKindSectionHeader {
layoutAttribute.frame.origin.x = lastLayoutRight + self.sectionInset.left
} else if elementKind == UICollectionElementKindSectionFooter {
layoutAttribute.frame.origin.x = lastLayoutRight + self.sectionInset.right
}
}
return layoutAttribute
}
// 获取 Cell 视图的布局，要重写【在移动/删除的时候会调用该方法】
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return layoutAttributes.filter({ $0.indexPath == indexPath && $0.representedElementCategory == .cell }).first
}
// 获取 SupplementaryView 视图的布局
override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return layoutAttributes.filter({ $0.indexPath == indexPath && $0.representedElementKind == elementKind }).first
}
// 此方法应该返回当前屏幕正在显示的视图的布局属性集合，要重写
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return layoutAttributes.filter({ rect.intersects($0.frame) })
}
// collectionView 调用 performBatchUpdates 触发动画开始
override func prepare(forCollectionViewUpdates updateItems: [UICollectionViewUpdateItem]) {
super.prepare(forCollectionViewUpdates: updateItems)
var willUpdateIndexPaths: [IndexPath] = []
for updateItem in updateItems {
switch updateItem.updateAction {
case .insert:
// 保存将要插入的列表索引
if let indexPathAfterUpdate = updateItem.indexPathAfterUpdate {
willUpdateIndexPaths.append(indexPathAfterUpdate)
}
case .delete:
// 保存将要删除的列表索引
if let indexPathBeforeUpdate = updateItem.indexPathBeforeUpdate {
willUpdateIndexPaths.append(indexPathBeforeUpdate)
}
default:
break
}
}
self.updateIndexPaths = willUpdateIndexPaths
}
// 动画插入 cell 时调用
override func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
if self.updateIndexPaths.contains(itemIndexPath) {
if let attr = layoutAttributes.filter({ $0.indexPath == itemIndexPath }).first {
attr.alpha = 0.0
self.updateIndexPaths = self.updateIndexPaths.filter({ $0 != itemIndexPath })
return attr
}
}
return nil
}
// 动画删除 cell 时调用
override func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
if self.updateIndexPaths.contains(itemIndexPath) {
if let attr = layoutAttributes.filter({ $0.indexPath == itemIndexPath }).first {
attr.alpha = 0.0
self.updateIndexPaths = self.updateIndexPaths.filter({ $0 != itemIndexPath })
return attr
}
}
return nil
}
// 结束动画
override func finalizeCollectionViewUpdates() {
super.finalizeCollectionViewUpdates()
self.updateIndexPaths = []
}
}在控制器 ViewController 内进行使用，逻辑和一般用法一致：
let waterLayout = CollectionViewWaterFlowLayout(waterCount: 2)
waterLayout.scrollDirection = .vertical
waterLayout.delegate = self
collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: waterLayout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.alwaysBounceHorizontal = false
collectionView.alwaysBounceVertical = true
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
collectionView.backgroundColor = UIColor.clear
if #available(iOS 11.0, *) {
collectionView.contentInsetAdjustmentBehavior = .never
} else {
self.automaticallyAdjustsScrollViewInsets = false
}
self.view.addSubview(collectionView)
我写的这个 Demo 的代码地址：WaterFlowLayoutDemo
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦