文件图例.png

ViewController.swift代码如下：

import UIKit

class ViewController: UIViewController,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

    //重用标识
    let itemindefier = "item"
    //区头重用标识
    let headerIdenfier = "header"
    //区尾重用标识
    let footerIdenfier = "footer"

    override func viewDidLoad() {
        super.viewDidLoad()
        //创建布局对象
        let flowLayout = UICollectionViewFlowLayout()
        //创建Item大小
        flowLayout.itemSize = CGSize(width: 100, height: 100)
        //设置滚动方向
        flowLayout.scrollDirection = .vertical
        //设置行间距(最小)
        flowLayout.minimumLineSpacing = 1
        //设置列间距(最小)
        flowLayout.minimumInteritemSpacing = 1
        //设置分区缩进量
        flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20)
        //设置区头的大小
        flowLayout.headerReferenceSize = CGSize(width: 0, height: 100)
        //设置区尾的大小
        flowLayout.footerReferenceSize = CGSize(width: 0, height: 100)
        //创建一个UICollectionView对象
        //UICollectionView布局比较复杂，所以系统专门为他设计一个布局类型UICollectionViewFlowLayout，但是很少直接使用他的基类，都使用他的子类UICollectionViewFlowLayout
        let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: flowLayout)
        collectionView.backgroundColor = UIColor.black
        //注册Item
        //UICollectionViewCell就是一个视图，上面什么都没有，当我们展示东西，就要自定义cell 
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: itemindefier)
        //注册区头
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdenfier)
        //注册区尾
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdenfier)
        //指定数据代理
        collectionView.dataSource = self
        //指定业务代理
        collectionView.delegate = self
        //添加到父视图
        self.view.addSubview(collectionView)
    }
    //MARK:- UICollectionViewDelegateFlowLayout协议方法

    //选中Item时会触发的方法
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        //关联DetailViewController
        let detailVC = DetailViewController()
        self.navigationController?.pushViewController(detailVC, animated: true)


    }
    //返回ItemSize的方法
    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 UIEdgeInsetsMake(20, 20, 20, 20)
        }else{
            return UIEdgeInsetsMake(30, 10, 30, 10)
        }
    }
    //返回区头视图大小的方法
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

        return section == 0 ? CGSize(width: 0, height: 200) : CGSize(width: 0, height: 50)
    }
    //返回区尾视图大小的方法
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {

        return section == 0 ? CGSize(width: 0, height: 20) : CGSize(width: 0, height: 100)
    }
    //返回UICollectionView有多少个分区
    func numberOfSections(in collectionView: UICollectionView) -> Int{
        return 5
        }
    //返回一个分区有多少个Item (多少条)
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
        return section % 2 == 0 ? 40 : 10
    }
    //返回UICollectionViewCell视图
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: itemindefier, for: indexPath)
        cell.backgroundColor = UIColor.cyan
        return cell
    }
    //返回区头区尾视图的代理方法
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView{
        if kind == UICollectionElementKindSectionHeader {//返回区头视图
            let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdenfier, for: indexPath)
            headerView.backgroundColor = #colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 1)
            return headerView
        }else{//返回区尾视图
            let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdenfier, for: indexPath)
            footerView.backgroundColor = #colorLiteral(red: 0.9764705896, green: 0.850980401, blue: 0.5490196347, alpha: 1)
            return footerView
        }
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

imageCell.swift代码如下：

import UIKit

class imageCell: UICollectionViewCell {

    var imageView:UIImageView!
    //重新init方法
    override init(frame: CGRect) {

        super.init(frame: frame)
        self.setupViews()
    }
    func setupViews(){
        imageView = UIImageView(frame: self.contentView.bounds)
        imageView.backgroundColor = UIColor.blue
        //添加视图
        self.contentView.addSubview(imageView)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

HeaderView.swift代码如下：

import UIKit

class HeaderView: UICollectionReusableView {

    var headerPic:UIImageView!
    //重写init方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupViews()
    }
    func setupViews(){
        headerPic = UIImageView(frame: self.bounds)
        headerPic.backgroundColor = UIColor.brown
        self.addSubview(headerPic)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

FooterView.swift代码如下：

import UIKit

class FooterView: UICollectionReusableView {

    var sectionNumberLable:UILabel!

    override init(frame: CGRect) {

        super.init(frame: frame)
        self.setupViews()
    }
    func setupViews(){
        sectionNumberLable = UILabel(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 40))
        sectionNumberLable.backgroundColor = UIColor.purple
        self.addSubview(sectionNumberLable)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

DetailViewController.swift代码如下：

import UIKit

class DetailViewController: UIViewController,UICollectionViewDataSource {

    var itemIdentifier = "item"
    var headerIdentifier = "header"
    var footerIdentifier = "footer"

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.white
        //布局对象
        let flowLayout = UICollectionViewFlowLayout()
        //设置Item大小
        flowLayout.itemSize = CGSize(width: 100, height: 100)
        //表头表尾视图大小
        flowLayout.headerReferenceSize = CGSize(width: 0, height: 120)
        flowLayout.footerReferenceSize = CGSize(width: 0, height: 40)
        //创建UICollectionView对象
        let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: flowLayout)
        collectionView.backgroundColor = UIColor.cyan
        //注册cell
        collectionView.register(imageCell.self, forCellWithReuseIdentifier: itemIdentifier)
        //注册区头区尾
        collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
        collectionView.register(FooterView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier)
        collectionView.dataSource = self
        //添加到父视图
        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! imageCell
        cell.imageView.image = UIImage(named: "xiangge.jpg")
        return cell

    }
    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:"xiangge.jpg")

            return headerView
        }else{
            let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier, for: indexPath) as! FooterView

            footerView.sectionNumberLable.text = "第\(indexPath.section)分区"

            return footerView
        }
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */
}

效果图1.png

效果图2.png