UICollectionView顯示多種Cell

思路:類比tableView的多種cell顯示,通過操作UICollectionView的分組實現(xiàn),當(dāng)只有一種cell時通常會直接創(chuàng)建FlowLayout,但是有多種cell時,不同的cell還有itemSize的區(qū)別,所以不能直接設(shè)置FlowLayout的值,而是通過代理判斷不同情況下itemSize的值

效果如圖:

截屏2020-02-24上午12.37.38.png

開始編碼:

Step1:懶加載UICollectionView

注意點1:雖然我們的layout設(shè)置時在代理中,我們也要創(chuàng)建一個layout否則會爆這個錯 -> 'UICollectionView must be initialized with a non-nil layout parameter'
注意點2:這里的layout是UICollectionViewFlowLayout 而不是 UICollectionViewLayout,因為我們實現(xiàn)的是UICollectionViewFlowLayout的代理方法(UICollectionViewDelegateFlowLayout)

lazy var collectionView:UICollectionView = {
        let layout = UICollectionViewFlowLayout.init()
        let collectionView = UICollectionView.init(frame: self.view.bounds, collectionViewLayout: layout)
        collectionView.backgroundColor = .clear
        //注冊cell
        collectionView.register(UICollectionViewCell.classForCoder(), forCellWithReuseIdentifier: CellID01)
        collectionView.register(UICollectionViewCell.classForCoder(), forCellWithReuseIdentifier: CellID02)
        collectionView.register(UICollectionViewCell.classForCoder(), forCellWithReuseIdentifier: CellID03)
        //注冊頭部
        collectionView.register(Demo05HeaderView.classForCoder(), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: HeaderID)
        //設(shè)置數(shù)據(jù)源代理
        collectionView.dataSource = self
      // 設(shè)置flowlayout的代理,用于控制itemSize等
        collectionView.delegate = self
        return collectionView
    }()

Step2:實現(xiàn)數(shù)據(jù)源代理方法(UICollectionViewDataSource)

extension ViewController05: UICollectionViewDataSource {
    //有多少的分組
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 3
    }
    //每組有多少個item
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return 1
        }else if section == 1{
            return 5
        }else{
            return 10
        }
    }
    //
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if indexPath.section == 0{
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CellID01, for: indexPath)
            cell.backgroundColor = UIColor.systemGreen
            return cell
        }else if indexPath.section == 1{
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CellID02, for: indexPath)
            cell.backgroundColor = UIColor.systemRed
            return cell
        }else{
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CellID03, for: indexPath)
            cell.backgroundColor = UIColor.systemBlue
            return cell
        }
    }
    
    //頭部
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionView.elementKindSectionHeader {
            let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: HeaderID, for: indexPath) as! Demo05HeaderView
            view.titleLabel.text = "第\(indexPath.section)組"
            return view
        }else{
            fatalError("No Such kind")
        }
    }
}

Step3:實現(xiàn)FlowLayout代理方法UICollectionViewDelegateFlowLayout

extension ViewController05: UICollectionViewDelegateFlowLayout{
    //設(shè)置頭部的尺寸
       func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
             return CGSize.init(width: self.view.bounds.width, height: 35)
       }
       
       //itemSize
       func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
           switch indexPath.section {
           case 0:
               return CGSize.init(width: self.view.bounds.width, height: 150)
           case 1:
               return CGSize.init(width: (self.view.bounds.width - 30) / 2, height: 45)
           default:
               return CGSize.init(width: (self.view.bounds.width - 40) / 3, height: 25)
           }
       }
       // 設(shè)置 minimumLineSpacing   水平間隔
       func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
           switch section {
           case 0:
               return 1
           case 1:
               return 2
           default:
               return 5
           }
       }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
           return 5
       }
}

備注:HeaderView的實現(xiàn)

class Demo05HeaderView: UICollectionReusableView {
    lazy var titleLabel:UILabel = {
        let titleLabel = UILabel.init(frame: CGRect.init(x: self.redView.frame.maxX+15, y: 5, width: 150, height: self.frame.size.height-10))
        titleLabel.textColor = .black
        titleLabel.font = UIFont.systemFont(ofSize: 16)
        return titleLabel
    }()
    lazy var redView:UIView = {
        let redView = UIView.init(frame: CGRect.init(x: 20, y: 5, width: 5, height: self.frame.size.height-10))
        redView.backgroundColor = UIColor.init(red:203/255.0, green:13/255.0, blue:29/255.0, alpha:1)
        return redView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(self.redView)
        self.addSubview(self.titleLabel)
        self.backgroundColor = UIColor.init(red:243/255.0, green:243/255.0, blue:243/255.0, alpha:1)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
}

總結(jié):本實戰(zhàn)主要是對UICollectionView的數(shù)據(jù)源代理,和FlowLayout代理的應(yīng)用,可以把FlowLayout代理理解成tableview的delegate,舉一反三 Godog!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容