swift x输入流_Swift-简单瀑布流实现

image.png

大神解说原理是一样的这里主要是Swift版的

1.定义所需属性

瀑布流的思路就是，从上往下，那一列最短，就把下一个item放在哪一列，因此我们需要定义一个字典来记录每一列的最大y值

每一个item都有一个attributes，因此定义一个数组来保存每一个item的attributes。

我们还必须知道有多少列以及列间距、行间距、section到collectionView的边距。

image.png

2.重写系统方法

我们一共需要重写4个方法

1)- (void)prepareLayout

2)- (CGSize)collectionViewContentSize

3)- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

4)- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

- (void)prepareLayout 方法

布局前的一些准备工作都在这里进行，初始化字典，有几列就有几个键值对，key为第几列，value为列的最大y值，初始值为上内边距：

接下来计算item的坐标，要想计算坐标，那就必须知道最短的那一列，先遍历字典，找出最短列是哪一列(minColumn)以及其最大y值。

item的y值就等于最短列的最大y值再加上行间距，x值就等于左边距 + (item宽度 + 列间距) * minColumn

image.png

直接上代码 (每一步都有注释)

import UIKit

@objc protocol HWCollectionViewFlowLayoutDelegate : NSObjectProtocol {

/// 返回高度

func hw_setCellHeght(layout : HWCollectionViewFlowLayout,indexPath : NSIndexPath,itemWidth : CGFloat) -> CGFloat

/// 返回行数

@objc optional func hw_columnCountInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> Int

/// 返回列间距

@objc optional func hw_columnMarginInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> CGFloat

/// 返回行间距

@objc optional func hw_rowMarginInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> CGFloat

@objc optional func hw_edgeInsetsInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> UIEdgeInsets

}

class HWCollectionViewFlowLayout: UICollectionViewFlowLayout {

weak open var delegate : HWCollectionViewFlowLayoutDelegate?

fileprivate let defaultColumnCount : Int = 3 //列数

fileprivate let defaultColumnMargin : CGFloat = 10 // 列间距

fileprivate let defaultRowMargin : CGFloat = 10 // 行间距

fileprivate let defaultEdgeInsets : UIEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

/*懒加载创建存放属性的数组*/

fileprivate lazy var attrs : [UICollectionViewLayoutAttributes] = []

/// 列高度数组

fileprivate lazy var columnHeights : [CGFloat] = []

/// 内容高度

fileprivate var contentHeight : CGFloat?

fileprivate func columnCount() -> Int { // 列数

if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_columnCountInWaterFlowLayout(layout:))))!{ // 判断代理是否实现 实现走代理方法

return (self.delegate?.hw_columnCountInWaterFlowLayout!(layout: self))!

}else{ // 没有实现走默认的

return defaultColumnCount

}

}

// MARK: - 列间距

fileprivate func columnMargin() -> CGFloat {

if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_columnMarginInWaterFlowLayout(layout:))))!{

return (self.delegate?.hw_columnMarginInWaterFlowLayout!(layout: self))!

}else{

return defaultColumnMargin

}

}

// MARK: - 行间距

fileprivate func rowMargin() -> CGFloat {

if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_rowMarginInWaterFlowLayout(layout:))))!{

return (self.delegate?.hw_rowMarginInWaterFlowLayout!(layout: self))!

}else{

return defaultRowMargin

}

}

// MARK: - 额外区域

fileprivate func edgeInsets() -> UIEdgeInsets {

if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_edgeInsetsInWaterFlowLayout(layout:))))!{

return (self.delegate?.hw_edgeInsetsInWaterFlowLayout!(layout: self))!

}else{

return defaultEdgeInsets

}

}

/// 准备所有view的layoutAttribute信息

override func prepare() {

super.prepare()

if self.collectionView == nil { return }

/// 清除列高度数组

self.columnHeights.removeAll()

/// 清除内容高度

self.contentHeight = 0

/// 把每组的额外滚动区域高度添加进去

for _ in 0 ..< self.columnCount() {

self.columnHeights.append(self.edgeInsets().top)

}

/// 清除属性

self.attrs.removeAll()

/// 获取组数

let count : Int = (self.collectionView?.numberOfItems(inSection: 0))!

/// 获取宽度

let width : CGFloat = (self.collectionView?.frame.size.width)!

/// 获取列间距总和

let colMagin = (CGFloat)(self.columnCount() - 1) * self.columnMargin()

/// 计算cell宽度

let cellWidth : CGFloat = (width - self.edgeInsets().left - self.edgeInsets().right - colMagin) / CGFloat(self.columnCount())

for i in 0 ..< count {

let indexPath : NSIndexPath = NSIndexPath(item: i, section: 0)

let attr : UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes(forCellWith: indexPath as IndexPath)

//获取高度

let cellHeight : CGFloat = (self.delegate?.hw_setCellHeght(layout: self, indexPath: indexPath as NSIndexPath, itemWidth: cellWidth))!

/// 默认最小高度为第一组

var minColumnHeight = self.columnHeights[0]

var minColumn : Int = 0

/// 筛选最小高度的组

for i in 1 ..< self.columnCount() {

let colHeight = self.columnHeights[i]

if colHeight < minColumnHeight {

minColumnHeight = colHeight

minColumn = i

}

}

/// 将下一个cell添加在最小高度的那一组

let cellX : CGFloat = self.edgeInsets().left + CGFloat(minColumn) * (self.columnMargin() + cellWidth)

var cellY = minColumnHeight

if cellY != self.edgeInsets().top { // 如果不是第一次加入需要加上行间距

cellY = self.rowMargin() + cellY

}

/// 设置frame

attr.frame = CGRect(x: cellX, y: cellY, width: cellWidth, height: cellHeight)

/// 那么当前的最大Y值就是新加的这个Cell的底部

let maxY = cellY + cellHeight;

/// 修改该组的列高度

self.columnHeights[minColumn] = maxY

/// 比较当前的最大高度是否是大于内容高度的

let maxContentHeight = self.columnHeights[minColumn]

if CGFloat(self.contentHeight!) < CGFloat(maxContentHeight) {

/// 大于修改内容高度

self.contentHeight = maxContentHeight

}

/// 添加属性数组

self.attrs.append(attr)

}

}

/// 返回属性数组

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

return self.attrs

}

/// 返回内容高度

override var collectionViewContentSize: CGSize {

get {

return CGSize(width: 0, height: CGFloat(self.contentHeight!) + CGFloat(self.edgeInsets().bottom))

}

set {

self.collectionViewContentSize = newValue

}

}

}