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(width: 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(width: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()

    }
    


}

 

終於寫完了，有補充的積極給我留言……