UICollectionView显示多种Cell

思路:类比tableView的多种cell显示,通过操作UICollectionView的分组实现,当只有一种cell时通常会直接创建FlowLayout,但是有多种cell时,不同的cell还有itemSize的区别,所以不能直接设置FlowLayout的值,而是通过代理判断不同情况下itemSize的值

效果如图:

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

开始编码:

Step1:懒加载UICollectionView

注意点1:虽然我们的layout设置时在代理中,我们也要创建一个layout否则会爆这个错 -> 'UICollectionView must be initialized with a non-nil layout parameter'
注意点2:这里的layout是UICollectionViewFlowLayout 而不是 UICollectionViewLayout,因为我们实现的是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)
        //设置数据源代理
        collectionView.dataSource = self
      // 设置flowlayout的代理,用于控制itemSize等
        collectionView.delegate = self
        return collectionView
    }()

Step2:实现数据源代理方法(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:实现FlowLayout代理方法UICollectionViewDelegateFlowLayout

extension ViewController05: UICollectionViewDelegateFlowLayout{
    //设置头部的尺寸
       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)
           }
       }
       // 设置 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的实现

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")
    }
    
    
}

总结:本实战主要是对UICollectionView的数据源代理,和FlowLayout代理的应用,可以把FlowLayout代理理解成tableview的delegate,举一反三 Godog!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容