【iOS】用CHTCollectionViewWaterfall

学习文章

用CHTCollectionViewWaterfallLayout写瀑布流

效果

WaterFall.gif

源码

WaterfallCell.swift

import UIKit

let cellIdentifier = "WaterfallCell"

class WaterfallCell: UICollectionViewCell {
    
    var showImageView: UIImageView?
    
    override init(frame: CGRect) {
       
        super.init(frame: frame)
        
        let imageViewRect:CGRect = CGRect(x: 0, y: 0, width: CGRectGetMaxX(self.contentView.bounds), height: CGRectGetMaxY(self.contentView.bounds))
        
        showImageView = UIImageView(frame: imageViewRect)
        showImageView?.contentMode      = .ScaleAspectFill
        showImageView?.autoresizingMask = [.FlexibleHeight, .FlexibleWidth]
        showImageView?.clipsToBounds    = true
        
        self.addSubview(showImageView!)
        
        self.layer.borderWidth = 0.5
        
    }

    required init?(coder aDecoder: NSCoder) {
        
        fatalError("init(coder:) has not been implemented")
    }
    
}  

CollectionHeaderView.swift

import UIKit

let headerIdentifier = "WaterfallHeader"

class CollectionHeaderView: UICollectionReusableView {
    
    override init(frame: CGRect) {
        
        super.init(frame: frame)
        
        self.layer.borderWidth = 1
        self.backgroundColor   = UIColor.redColor()
    }

    required init?(coder aDecoder: NSCoder) {
        
        fatalError("init(coder:) has not been implemented")
    }
        
}  

CollectionFooterView.swift

 import UIKit

let footerIdentifier = "WaterfallFooter"

class CollectionFooterView: UICollectionReusableView {
    
    override init(frame: CGRect) {
        
        super.init(frame: frame)
        
        self.layer.borderWidth = 1
        self.backgroundColor   = UIColor.purpleColor()
    }
    
    required init?(coder aDecoder: NSCoder) {
        
        fatalError("init(coder:) has not been implemented")
    }
}  

ViewController.swift

import UIKit

let sourceUrl = "http://www.duitang.com/album/1733789/masn/p/0/100/"

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, CHTCollectionViewDelegateWaterfallLayout {
    
    var collectionView : UICollectionView?
    var dataSource     : [AnyObject]? = Array()
    var sizeSource     : [AnyObject]? = Array()
    var layout         : CHTCollectionViewWaterfallLayout?

    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        buildCollectionView()
        
        loadData()
    }
    
    func buildCollectionView() {
    
        // 初始化布局
        layout = CHTCollectionViewWaterfallLayout()
        
        layout!.sectionInset            = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10) // section 内边距
        layout!.headerHeight            = 40 // HeaderView高度
        layout!.footerHeight            = 40 // FooterView高度
        layout!.columnCount             = 3  // 几列显示
        layout!.minimumColumnSpacing    = 5  // cell之间的水平间距
        layout!.minimumInteritemSpacing = 5  // cell之间的垂直间距
        
        // 初始化CollectionView
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout!)
        
        collectionView?.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        collectionView?.dataSource       = self
        collectionView?.delegate         = self
        collectionView?.backgroundColor  = UIColor.whiteColor()
        
        // 注册Cell HeaderView FooterView
        collectionView?.registerClass(WaterfallCell.classForCoder(),
            forCellWithReuseIdentifier: cellIdentifier)
        collectionView?.registerClass(CollectionHeaderView.classForCoder(),
            forSupplementaryViewOfKind: layout!.CHTCollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
        collectionView?.registerClass(CollectionFooterView.classForCoder(),
            forSupplementaryViewOfKind: layout!.CHTCollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier)
        
        view.addSubview(collectionView!)
    }
    
    func loadData() {
        
    
        GCDQueue.globalQueue .excute { () -> Void in
            
            // 获取json数据
            let data = NSData(contentsOfURL: NSURL(string: sourceUrl)!)
            
            // 转换数据
            if let jsonDic = try? NSJSONSerialization.JSONObjectWithData(data!, options: [.MutableContainers, .MutableLeaves]) as![String : AnyObject] {
            
                let array = jsonDic["data"]!["blogs"] as! [AnyObject]
                
                for value in array {
                    
                    let temp = value as! [String : AnyObject]
                    
                    print(temp["isrc"])
                    self.dataSource?.append(ImageModel(dictionary: temp)!)
                }
            }
            
            // 主线程更新
            GCDQueue.mainQueue.excute({ () -> Void in
                
                self.collectionView?.reloadData()
            })
        }
    }
    
    // MARK: UICollectionViewDataSource
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return (dataSource?.count)!
    }
    
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    
        return 2
    }
    
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let waterCell = collectionView.dequeueReusableCellWithReuseIdentifier(cellIdentifier, forIndexPath: indexPath) as! WaterfallCell
        
        let imageModel : ImageModel = self.dataSource![indexPath.row] as! ImageModel;
        
        waterCell.showImageView?.sd_setImageWithURL(NSURL(string: imageModel.isrc!));
        
        return waterCell
    }
    
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        
        var reusableView : UICollectionReusableView?
        
        if kind == layout!.CHTCollectionElementKindSectionHeader {
        
            reusableView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: headerIdentifier, forIndexPath: indexPath)
            
        } else {
        
            reusableView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: footerIdentifier, forIndexPath: indexPath)
        }
        
        return reusableView!
    }
    
    // MARK: CHTCollectionViewDelegateWaterfallLayout
    func collectionView (collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,
        sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

       let imageModel : ImageModel = self.dataSource![indexPath.row] as! ImageModel
            
       return CGSize(width: CGFloat(imageModel.iwd!), height: CGFloat(imageModel.iht!))
    }
}

下载源码

• 下载源码

• CHTCollectionViewWaterfallLayout