IOS:Swift-UICollectionView 与 UIC

在ViewController.中

ViewController.swift:
//UICollectionViewDelegate是父协议UICollectionViewDelegateFlowLayout是子协议
//遵循了子协议就不用遵循父协议了
class ViewController: UIViewController ,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{

    //定义重用标识
    let itemIdentifier = "item"
    //区头 区尾
    let headerIdentifier = "header"
    //注册重用标识
    let footerIdentifier = "footer"
   
    override func viewDidLoad() {
        super.viewDidLoad()
   
        //创建布局对象
        let flowLayout = UICollectionViewFlowLayout()
       
        //设置item的大小
        flowLayout.itemSize = CGSize(width: 100, height: 100)
       
        //设置滚动的方向  horizontal水平混动
        flowLayout.scrollDirection = .vertical
       
        //设置最小行间距
        flowLayout.minimumLineSpacing = 1
       
        //设置最小列间距
        flowLayout.minimumInteritemSpacing = 40
       
        //设置分区缩进量
        flowLayout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 20, right: 10)
       
        //设置区头的大小
        flowLayout.headerReferenceSize = CGSize(width: 0, height: 100)
        flowLayout.footerReferenceSize = CGSize(width: 0, height: 60)
       
        //创建一个UICollectionView对象
        //UICollectionView布局比较复杂，所以专门为他设计了一个布局类UICollectionView，但是很少直接使用他的基类，都是实用他的子类UICollectionViewFlowLayout
        let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: flowLayout)
       
       collectionView.backgroundColor = UIColor.cyan
       
        //注册item
       
        //UICollectionViewCell就是一个视图上面什么控件都没有，当我们要展示文字或图片，就需要自定义cell
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: itemIdentifier)

        //注册区头
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
       
        //注册区尾
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier)
       
        //指定数据源代理
        collectionView.dataSource = self
       
        //指定业务代理
        collectionView.delegate = self
       
        //添加到父类视图
        self.view.addSubview(collectionView)
       
    }
   
    //MARK:_UICollectionViewDataSource的协议方法
   
    //返回区头区尾视图的代理方法
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        //返回区头视图
        if kind == UICollectionElementKindSectionHeader{
            let headerview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier, for: indexPath)
            headerview.backgroundColor = UIColor.red
           
        return headerview
        }else{
            //返回区尾视图
            let footerview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier, for: indexPath)
            footerview.backgroundColor = UIColor.purple
        return footerview
        }
       
    }
   
    //返回CollectionView有多少分区
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 3
    }
   
    //返回一个分区有多少个Item的方法
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return section % 2 == 0 ? 10 : 20
    }
   
    //返回UICollectionViewCell视图
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: itemIdentifier, for: indexPath)
       
        cell.backgroundColor = #colorLiteral(red: 0, green: 0.9768045545, blue: 0, alpha: 1)
       
        return cell
    }
   
//MARK:- UICollectionDelegateFlowLayout协议方法
    //选中item会触发的方法//加导航栏
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//        print("item所在分区的下标\(indexPath.section)")
//        print("item所在分区中的下标\(indexPath.item)")
        let detailVC = DetailViewController()
        self.navigationController?.pushViewController(detailVC, animated: true)
       
    }
   
    //返回item高度的方法
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return indexPath.section % 2 == 0 ? CGSize(width: 80, height: 80) : CGSize(width: 120, height: 120)
       
    }
   
    //返回分区缩进量的方法
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        if section == 0 {
        return UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        }
        else{
        return UIEdgeInsets(top: 30, left: 10, bottom: 30, right: 10)
       
        }
    }
   
    //返回区头大小的方法
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        if section == 0 {
        return CGSize(width: 0, height: 200)
        }else{
        return CGSize(width: 0, height: 50)
        }
    }
    //返回区尾视图的方法
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        if section != 0 {
        return CGSize(width: 0, height: 20)
        }
        else{
        return CGSize(width: 0, height: 100)
        }
    }
   
   
   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat{
    return 1
    
    }
     
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat{
    return 40
        
    }
     

//跳转界面
DetailViewController.swift:

class DetailViewController: UIViewController ,UICollectionViewDataSource{

    //给item
    let itemIdentifier = "item"
    let headerIdentifier = "header"
    let footerIdentifier = "footer"
   
    override func viewDidLoad() {
        super.viewDidLoad()

//        self.view.backgroundColor = UIColor.yellow
        //创建布局对象
        let flowView = UICollectionViewFlowLayout()
       
        flowView.itemSize = CGSize(width: 100, height: 100)
       
        //表头标尾视图大小
        flowView.headerReferenceSize = CGSize(width: 0, height: 120)
       
        flowView.footerReferenceSize = CGSize(width: 0, height: 40)
        //创建UICollectionView对象
        let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: flowView)
       
        collectionView.backgroundColor = #colorLiteral(red: 0, green: 0.9768045545, blue: 0, alpha: 1)
       
        //配置数据源代理
        collectionView.dataSource = self
       
        //
//        collectionView.delegate = self
      
        //注册cell
        collectionView.register(Image_CollectionViewCell.self, forCellWithReuseIdentifier: itemIdentifier)
       
        //注册区头区尾
        collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
       
        collectionView.register(FooterView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier)
   
       
        //添加到父视图
        self.view.addSubview(collectionView)
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }
   
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: itemIdentifier, for: indexPath) as! Image_CollectionViewCell
     cell.imageView.image = UIImage(named: "e.jpg")
    
     return cell
 }
 ```
 ```c
 然后自定义cell：（布局）
 Image CollectionViewCell.swift:
 class Image_CollectionViewCell: UICollectionViewCell {
 var imageView:UIImageView!

 override init(frame: CGRect) {
    super.init(frame: frame)
     self.setupViews()
 }

 func setupViews()   {
     imageView = UIImageView(frame:self.contentView.bounds)
    
     imageView.backgroundColor = UIColor.yellow
    
     self.contentView.addSubview(imageView)
 }


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

}

 func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    
     if kind == UICollectionElementKindSectionHeader{
     let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier, for: indexPath) as!HeaderView
        
         headerView.headerPic.image = UIImage(named: "c.jpg")
     return headerView
     }
     else{
     let footer = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier, for: indexPath) as! FooterView
         footer.sectionNumberLabel.text = "第几\(indexPath.section)分区"
         return footer
     }
 }

新建界面UICollectionReusableView
class HeaderView: UICollectionReusableView {
   
    var headerPic : UIImageView!
   
    override init(frame: CGRect) {
        super.init(frame: frame)
       
        self.setupView()
    }
    func setupView(){
        headerPic =  UIImageView(frame: self.bounds)
       
        headerPic.backgroundColor = #colorLiteral(red: 0.9098039269, green: 0.4784313738, blue: 0.6431372762, alpha: 1)
       
        self.addSubview(headerPic)
   
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

FooterView.swift:新建界面UICollectionReusableView
class FooterView: UICollectionReusableView {
   
    var sectionNumberLabel:UILabel!
   
    override init(frame: CGRect) {
        super.init(frame: frame)
       
        self.setupViews()
    }
    func setupViews(){
       
    sectionNumberLabel = UILabel(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 40))
   
    sectionNumberLabel.backgroundColor = #colorLiteral(red: 1, green: 0.2527923882, blue: 1, alpha: 1)
       
        self.addSubview(sectionNumberLabel)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
   
}