Swift之UICollectionView瀑布流

相信大家对UICollectionView的使用都不陌生了,这里我要简单说下瀑布流的功能实现,希望有助于大家对瀑布流的实现逻辑有所加深理解,先上效果图

效果图
效果图
WaterFallLayout 类
import Foundation
import UIKit

class WaterFallLayout: UICollectionViewFlowLayout {
    // item个数
    let itemCount: Int
    // items的布局信息
    var attributeArray: Array?
    
    // 实现必要的构造方法
    required init?(coder: NSCoder) {
        itemCount = 0
        super.init(coder: coder)
    }
    
    // 自定义一个初始化构造方法
    init(itemCount: Int) {
        self.itemCount = itemCount
        super.init()
    }
    
    // 准备方法
    override func prepare() {
        // 调用父类的准备方法
        super.prepare()
        // 设置为竖直布局
        self.scrollDirection = .vertical
        // 初始化数组
        attributeArray = Array()
        // 先计算每个item的宽度,默认为两列布局
        let WIDTH = (UIScreen.main.bounds.size.width - self.minimumInteritemSpacing) / 2
        // 定义一个元组表示每一列的动态高度
        var queueHeight:(one: Int, two: Int) = (0,0)
        // 进行循环设置
        for index in 0.. [UICollectionViewLayoutAttributes]? {
        return attributeArray
    }
}
ViewController 类
import UIKit

class ViewController: UIViewController, UICollisionBehaviorDelegate, UICollectionViewDataSource, UICollectionViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let layout = WaterFallLayout(itemCount: 30)
        let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "itemID")
        self.view.addSubview(collectionView)
        
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 30
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "itemID", for: indexPath)
        cell.backgroundColor = UIColor(red: CGFloat(arc4random()%255)/255, green: CGFloat(arc4random()%255)/255, blue: CGFloat(arc4random()%255)/255, alpha: 1)
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("点击了第\(indexPath.row)个item")
    }

}

参考文章:
swift4-UICollectionView(实现瀑布流)

你可能感兴趣的:(Swift之UICollectionView瀑布流)