swift 第八课 CollectView的 添加 footerView 、headerView

collectView 也是 iOS 很常用的瀑布流展示控件了，虽然使用过很多次，一直没有系统的总结过，尤其是在添加header 和footer view 的时候，很常见，写起来总觉得不是很流畅，这里着重备份下，留待备用……

这里贴上最终的成品样子：

刚刚做demo 做了好久，这个控件，我也是醉了……，既然做完了，写步骤。。。。。。

在铺设下自己创建的类：

再次提示 这个 header 和footer 一定要分开继承，刚刚自己就是在这里 耽搁了大部分的时间

约束完成之后，主要提示下 ，自己耽误这么长时间，做这个demo 的主要知识点吧：

1.在 storybord 写的view 布局，不用在 vc里面注册（ regest 之类的 ）了，这个是比较省事的

2.我还没有在storybord 找到 collectcell 的 layout 设置项，所以直接贴上layout 代码了，（如果真的有这个设置，希望找到后在回来修改……）

我果然还是习惯撸代码，语言不是我强项……唉，不懂的时候，再偷偷看注释吧

collectCell 类：

class CollectionViewCell: UICollectionViewCell {
    /**
     demo 特别简单 ，这里只加载了一个按钮
   */
    @IBOutlet weak var textButton: UIButton!
}

collect header and footer

import UIKit

class CollectionHeader: UICollectionReusableView {
   /**
   好久不用代理了，觉得 这么写会比较简单触发点击事件……
   */
    var headerButtonClick:((UIButton)->Void)?

    @IBAction func didHeadButtonClick(_ sender: UIButton) {
        
        if (self.headerButtonClick != nil) {
            
            self.headerButtonClick!(sender)
        }
    }
}

import UIKit

class CollectionFooter: UICollectionReusableView {
    
    var footerButtonClick:((UIButton)->Void)?
    
    @IBAction func didFooterButtonClick(_ sender: UIButton) {
        
        if self.footerButtonClick != nil {
            
            self.footerButtonClick!(sender )
        }
    }
}

view controller 类

import UIKit

class ViewController: UIViewController , UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var myCollectionView: UICollectionView!
 
    lazy var collectArr : Array<String> = {
        var arr = Array<String>()
        for i in 0...26{
            
            var str = String(format:"%c",putchar(64 + i))
            arr.append(str)
        }
        return arr
    }()
    
    /**
     flow layout
     */
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
        
        return CGSize.init( self.view.frame.size.width/3-30, height: 50)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets{
        
        return  UIEdgeInsets.init(top: 5, left: 5, bottom: 5, right: 5)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize{
        
        return CGSize(self.view.frame.size.width,height:60)
    }

   /**
    data source
     */
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.collectArr.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectCell", for: indexPath) as! CollectionViewCell
        cell.textButton.setTitle(self.collectArr[indexPath.item], for: .normal)
        return cell
    }
    
    /**
     delegate
     */
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
       collectionView .deselectItem(at: indexPath, animated: true)
    }
    
/**
重要的事情 说三遍，这已经这篇博客第三遍 提到 footer 和header 要分开继承，自己就是在这里耽搁了许久
在就是 这里好多的关键字要对应好
*/
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView{
        
        var reusableView :UICollectionReusableView?
        if kind == UICollectionElementKindSectionFooter {
            
            let footer :CollectionFooter = collectionView.dequeueReusableSupplementaryView(ofKind:UICollectionElementKindSectionFooter, withReuseIdentifier: "footerView", for: indexPath) as! CollectionFooter
          
            footer.footerButtonClick = { ( btn: UIButton )  in
            
            print("footer view 按钮被点击")
            }
            reusableView = footer
       
        } else if  kind == UICollectionElementKindSectionHeader {

            let header :CollectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", for: indexPath) as! CollectionHeader
           
             header.headerButtonClick = {  (btn :UIButton) in
                
                print("header view  按钮被点击")
            }
            reusableView = header
        }
        return reusableView!
    }
    
/**
view controller 系统的方法
*/
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }
    


}

终于写完了，有补充的积极给我留言……