iOS 多section瀑布流實現(swift)

基於 UICollectionViewFlowLayout,實現一個支持多 section 的瀑布流組件git

 最近因項目需求,寫了一個支持多 section 的瀑布流實現組件,徹底基於 swift 5 來實現。 先來直接看效果圖: github

 (PS:瀑布流的實現原理其實挺簡單的,網上現有的教程一抓一大把,我也懶得複述了。。。)

稍微整理了下,讓這個小組件儘可能作到集成簡單快捷。swift

1. 初始化

 由於基於 UICollectionViewFlowLayout 實現的,因此該 flowLayout 的初始化調用流程與系統的無異,只須要遵循 WaterfallMutiSectionDelegate 代理。bash

let layout = WaterfallMutiSectionFlowLayout()
layout.delegate = self
let collection = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
複製代碼

2. 代理實現

2.1 必須實現代理方法

/// collectionItem高度
func heightForRowAtIndexPath(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, indexPath: IndexPath, itemWidth: CGFloat) -> CGFloat
複製代碼

2.2 可選實現代理方法

/// 每一個section 列數(默認2列)
  @objc optional func columnNumber(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> Int
  
  /// header高度(默認爲0)
  @objc optional func referenceSizeForHeader(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> CGSize
  
  /// footer高度(默認爲0)
  @objc optional func referenceSizeForFooter(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> CGSize
  
  /// 每一個section 邊距(默認爲0)
  @objc optional func insetForSection(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> UIEdgeInsets
  
  /// 每一個section item上下間距(默認爲0)
  @objc optional func lineSpacing(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> CGFloat
  
  /// 每一個section item左右間距(默認爲0)
  @objc optional func interitemSpacing(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> CGFloat
  
  /// section頭部header與上個section尾部footer間距(默認爲0)
  @objc optional func spacingWithLastSection(collectionView collection: UICollectionView, layout: WaterfallMutiSectionFlowLayout, section: Int) -> CGFloat
複製代碼

最後附上demo連接:github.com/RoganZheng/… 若是對你有幫助,記得點個 star。ui

相關文章
相關標籤/搜索