這次Demo是關於UICollectionView的

//
//  ViewController.swift
//  UIKitPrograming
//

import UIKit

class ViewController: UIViewController {

    // 定義一些不變數
    let ScreenWidth = UIScreen.main.bounds.width // 螢幕寬度的一半
    let cellIdentifier = "cell"
    let headerIdentifier = "header"
    let footerIdentifier = "footer"
    let headerKind = UICollectionView.elementKindSectionHeader
    let footerKind = UICollectionView.elementKindSectionFooter
    
    // 返回一個隨機的顏色
    func randomColor() -> UIColor {
        return UIColor(displayP3Red: CGFloat(drand48()), green: CGFloat(drand48()), blue: CGFloat(drand48()), alpha: 1)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // 先設定佈局，這是collectionView必須做的
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 5
        layout.minimumInteritemSpacing = 5
        layout.itemSize = CGSize(width: ScreenWidth / 7 - layout.minimumInteritemSpacing * 2, height: ScreenWidth / 7 - layout.minimumInteritemSpacing * 2) // 設定方塊的長和寬
        layout.scrollDirection = .vertical // 垂直滾動
        layout.sectionInset = .init(top: 5, left: 5, bottom: 5, right: 5) // 設定每個方塊的四周空隙
        layout.headerReferenceSize = CGSize(width: ScreenWidth, height: 80) // 設定header大小
        layout.footerReferenceSize = CGSize(width: ScreenWidth, height: 80)
        
        // 第二步是建立一個UICollectionView的例項
        let colletionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
        colletionView.backgroundColor = UIColor.white
        // 設定代理
        colletionView.delegate = self
        colletionView.dataSource = self
        
        // 註冊方塊
        colletionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellIdentifier)
        colletionView.register(CollectionHeaderView.self, forSupplementaryViewOfKind: headerKind, withReuseIdentifier: headerIdentifier)
        colletionView.register(CollectionFooterView.self, forSupplementaryViewOfKind: footerKind, withReuseIdentifier: footerIdentifier)
        
        // 別忘了最後要新增例項
        view.addSubview(colletionView)
    }
}

// 下面要實現委託的內容
extension ViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    // 一個section有多少個方塊
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 40
    }
    
    // 幾個section
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    // 返回cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // cell一定要用dequeueReusableCell的方法去取
        let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
        cell.backgroundColor = randomColor() // 設定cell的顏色隨機
        return cell
    }

    // 點選方塊，列印他的編號
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print(indexPath.row)
    }
    
    // 這個函式是針對header和footer來做的，返回值是UICollectionReusableView型別，這個型別繼承自UIView，因此可以理解成一個UIView
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == headerKind {
            // CollectionHeaderView就是UICollectionReusableView型別的
            let headView: CollectionHeaderView = collectionView.dequeueReusableSupplementaryView(ofKind: headerKind, withReuseIdentifier: headerIdentifier, for: indexPath) as! CollectionHeaderView
            headView.title.text = "This is HeaderView"
            headView.backgroundColor = UIColor.gray
            headView.setUpView()
            return headView
        } else {
            let footerView: CollectionFooterView = collectionView.dequeueReusableSupplementaryView(ofKind: footerKind, withReuseIdentifier: footerIdentifier, for: indexPath) as! CollectionFooterView
            footerView.title.text = "This is FooterView"
            footerView.backgroundColor = UIColor.gray
            footerView.setUpView()
            return footerView
        }
    }
}
 

//
//  CollectionHeaderView.swift
//  UIKitPrograming
//

import UIKit
import SnapKit

class CollectionHeaderView: UICollectionReusableView {
    lazy var title: UILabel = {
        let title: UILabel = UILabel()
        title.font = UIFont.boldSystemFont(ofSize: 14)
        title.textColor = UIColor.black
        title.textAlignment = .center
        return title
    }()
    
    
    func setUpView() {
        addSubview(title)
        title.snp.makeConstraints { (make) in
            make.center.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.5)
            make.height.equalToSuperview().multipliedBy(0.5)
        }
    }
}
 

//
//  CollectionFooterView.swift
//  UIKitPrograming
//

import UIKit

class CollectionFooterView: UICollectionReusableView {
    lazy var title: UILabel = {
        let title: UILabel = UILabel()
        title.font = UIFont.boldSystemFont(ofSize: 14)
        title.textColor = UIColor.black
        title.textAlignment = .center
        return title
    }()
    
    
    func setUpView() {
        addSubview(title)
        title.snp.makeConstraints { (make) in
            make.center.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.5)
            make.height.equalToSuperview().multipliedBy(0.5)
        }
    }
}