Description:

UICollectionView protocol是繼承自UIScrollView protocol，可以用來實現瀑布流、網格、或是iOS內建相簿app的照片排列方式。

Collection View field是由一個或多個section所組成，每個section中則由上下一個header及footer和中間的cell zone所組成。

Component:
1.UICollectionView

Highlight function：

1. 首先透過 UICollectionViewFlowLayout() 來規劃每個section中cell、header和footer的layout:

let layout = UICollectionViewFlowLayout() 
layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5); 
layout.minimumLineSpacing = 10 // space between each cell row 
layout.minimumInteritemSpacing = 10 // space between each cell
layout.scrollDirection = .horizontal // scroll direction
layout.itemSize = CGSize(width: CGFloat(fullSize.width) / 3 - 10, 
                         height: CGFloat(fullSize.height) / 3 - 10) 
layout.headerReferenceSize = CGSize(width: fullSize.width, height: 40) // header zone
layout.footerReferenceSize = CGSize(width: fullSize.width, height: 40) // footer zone

2. 建立 UICollectionView 物件，除了要register個別cell的layout之外，也必須register header 或 footer (如果要自訂layout的話)，以供後續重複使用。本練習使用“Cell”這個Identifier來register cell layout：

let myCollectionView = UICollectionView(frame: CGRect(x: 0, 
                                                      y: 20, 
                                                      width: fullSize.width, 
                                                      height: fullSize.height - 20), 
                                        collectionViewLayout: layout) 

myCollectionView.register(CollectionViewCell.self, 
                          forCellWithReuseIdentifier: "Cell") 

myCollectionView.register(UICollectionReusableView.self, 
                          forSupplementaryViewOfKind:
                            UICollectionElementKindSectionHeader, 
                          withReuseIdentifier: "Header") 

myCollectionView.register(UICollectionReusableView.self, 
                          forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, 
                          withReuseIdentifier: "Footer")

3.透過UICollectionViewCell protocol來自定所需之cell layout：

class CollectionViewCell: UICollectionViewCell { 
  var imgView: UIImageView! 
  var titleLabel: UILabel! 

  override init(frame: CGRect) { 
    super.init(frame: frame) 
    let width = Double(UIScreen.main.bounds.size.width) 

    // UIImageView
    imgView = UIImageView(frame: CGRect(x: 0, 
                                        y: 0, 
                                        width: width/3 - 10.0, 
                                        height: width/3 - 10.0)) 
    self.addSubview(imgView) 

    // UILabel 
    titleLabel = UILabel(frame: CGRect(x: 0, 
                                       y: 0, 
                                       width: Int(width / 3 - 10), 
                                       height: 40)) 
    titleLabel.textAlignment = .center 
    titleLabel.textColor = UIColor.orange 
    self.addSubview(titleLabel) 
    } 

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

4.使用UICollectionViewDataSource protocol來完成畫面結果：

// number of cells in a section 
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
  return 4 
} 

// reused cell with identifier
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 

  let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell 
  cell.imgView.image = UIImage(named: "0\(indexPath.item + 1).jpg") 
  cell.titleLabel.text = "0\(indexPath.item + 1)" 
  return cell 
} 

// number of section 
func numberOfSections(in collectionView: UICollectionView) -> Int { 
  return 2 
} 

Additional：
若是要顯示header或footer，可透過透過UICollectionViewDataSource protocol中的viewForSupplementaryElementOfKind()來顯示，此function提供了"kind"這個參數來辨別header或是footer:

// set reuse header and footer in section 
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 

  //Create UICollectionReusableView 
  var reusableView = UICollectionReusableView() 

  let label = UILabel(frame: CGRect(x: 0, 
                                    y: 0, 
                                    width: fullSize.width, 
                                    height: 40)) 
  label.textAlignment = .center 

  if kind == UICollectionElementKindSectionHeader { 
    // header 
    reusableView = collectionView.dequeueReusableSupplementaryView( 
                                    ofKind: 
                                      UICollectionElementKindSectionHeader, 
                                    withReuseIdentifier: "Header", 
                                    for: indexPath) 
    //header content 
    reusableView.backgroundColor = UIColor.darkGray 
    label.text = "Header"; 
    label.textColor = UIColor.white 
  } else if kind == UICollectionElementKindSectionFooter { 
    // footer 
    reusableView = collectionView.dequeueReusableSupplementaryView( 
                                    ofKind: 
                                      UICollectionElementKindSectionFooter, 
                                    withReuseIdentifier: "Footer", 
                                    for: indexPath) 
    //footer content 
    reusableView.backgroundColor = UIColor.cyan
    label.text = "Footer"; 
    label.textColor = UIColor.black 
  } 
  reusableView.addSubview(label) 
  return reusableView 
}

Reference：
Source code on Github