前言
因為公司專案中使用了大量的 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