CollectionView：Storyboard、Xib + Collection View + Collection View Cell + Image View + Lable * 2

成品：

在 DAY 6 、 DAY 7 分享如何使用 TableView 呈現清單，今天會分享如何使用 CollectionView 呈現出與 TableView 一樣的清單效果，且 利用 Xib 實作 Collection View Cell 的畫面。

把準備好的圖片拖曳到 Assets.xcassets

先拉一個 CollectionView，並且在右邊的 Prototype Cells 更改為 1

在 Storyboard -> Collection View Cell 的 Identifier 更改 Collection View Cell 的名稱（ 此設為 MyCollectionViewCell ）

在專案底下 New Group / New File / 選 Cocoa Touch Class

串連 Xib Cell 以及 MyCollectionViewCell
在 Xib Cell 內加入 Image View 和兩個 Lable，用來顯示圖片、名稱、上映日期

在 MyCollectionViewCell 檔裡，分別加入各個物件的 @outlet

import UIKit

class MyCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var ibImage: UIImageView!
    @IBOutlet weak var ibdate: UILabel!
    @IBOutlet weak var ibname: UILabel!
    

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

}

Collection View Cell 註冊
當 cell 數量超過一個畫面可顯示時，目前存在的 cell 只有畫面上的這些，當上下滑動時，會隨顯示畫面的不同，同時移出並加入 cell，這個動作不是一直建立新的 cell 而是會重複使用( reuse )，所以必須先註冊這個 reuse 的 cell ，辨識名稱設為"MyCollectionViewCell"，來讓後續顯示時可以使用。

// 在 viewDidLoad() 裡，寫 register cell
let nibCell = UINib(nibName: "MyCollectionViewCell", bundle: nil)
collectionView.register(nibCell, forCellWithReuseIdentifier: "MyCollectionViewCell")

在 ViewController 檔裡，加入 CollectionView 的 @outlet

在 ViewController 檔裡寫一個 struct 函數，用來定義宣告型態

struct mvs {
    var image : UIImage?
    var date : String?
    var name : String?
    
    init(image: UIImage, date: String, name: String){
        self.image = image
        self.date = date
        self.name = name
    }
}

在 class ViewController: UIViewController 函數底下寫一個 function 新增影片項目

var movies = [mvs]()
func moviesitem(){
        movies.append(mvs(image: UIImage(named:"引爆摩天樓")! , date: "1997年4月19日", name: "引爆摩天樓"))
        movies.append(mvs(image: UIImage(named:"第14號獵物")!, date: "1998年4月18日", name: "第14號獵物"))
        movies.append(mvs(image: UIImage(named:"世紀末的魔術師")!, date: "1999年4月17日", name: "世紀末的魔術師"))
        movies.append(mvs(image: UIImage(named:"瞳孔中的暗殺者")!, date: "2000年4月22日", name: "瞳孔中的暗殺者"))
        movies.append(mvs(image: UIImage(named:"往天國的倒數計時")!, date: "2001年4月21日", name: "往天國的倒數計時"))
        movies.append(mvs(image: UIImage(named:"貝克街的亡靈")!, date: "2002年4月20日", name: "貝克街的亡靈"))
        movies.append(mvs(image: UIImage(named:"迷宮的十字路")!, date: "2003年4月19日", name: "迷宮的十字路"))
        movies.append(mvs(image: UIImage(named:"銀翼的奇術師")!, date: "2004年4月17日", name: "銀翼的奇術師"))
        movies.append(mvs(image: UIImage(named:"水平線上的陰謀")!, date: "2005年4月9日", name: "水平線上的陰謀"))
        movies.append(mvs(image: UIImage(named:"偵探們的鎮魂歌")!, date: "2006年4月15日", name: "偵探們的鎮魂歌"))
        movies.append(mvs(image: UIImage(named:"紺碧之棺")!, date: "2007年4月21日", name: "紺碧之棺"))
        movies.append(mvs(image: UIImage(named:"戰慄的樂譜")!, date: "2008年4月19日", name: "戰慄的樂譜"))
        movies.append(mvs(image: UIImage(named:"漆黑的追跡者")!, date: "2009年4月18日", name: "漆黑的追跡者"))
        movies.append(mvs(image: UIImage(named:"魯邦三世VS名偵探柯南")!, date: "2009年3月27日", name: "魯邦三世VS名偵探柯南"))
        movies.append(mvs(image: UIImage(named:"天空的劫難船")!, date: "2010年4月17日", name: "天空的劫難船"))
        movies.append(mvs(image: UIImage(named:"沉默的15分鐘")!, date: "2011年4月16日", name: "沉默的15分鐘"))
        movies.append(mvs(image: UIImage(named:"第11位前鋒")!, date: "2012年4月14日", name: "第11位前鋒"))
        movies.append(mvs(image: UIImage(named:"絕海的偵探")!, date: "2013年4月20日", name: "絕海的偵探"))
        movies.append(mvs(image: UIImage(named:"魯邦三世VS名偵探柯南 THE MOVIE")!, date: "2013年12月7日", name: "魯邦三世VS名偵探柯南 THE MOVIE"))
        movies.append(mvs(image: UIImage(named:"異次元的狙擊手")!, date: "2014年4月19日", name: "異次元的狙擊手"))
        movies.append(mvs(image: UIImage(named:"江戶川柯南失蹤事件 ～史上最糟糕的兩天～")!, date: "2014年12月26日", name: "江戶川柯南失蹤事件 ～史上最糟糕的兩天～"))
        movies.append(mvs(image: UIImage(named:"業火的向日葵")!, date: "2015年4月18日", name: "業火的向日葵"))
        movies.append(mvs(image: UIImage(named:"純黑的惡夢")!, date: "2016年4月16日", name: "純黑的惡夢"))
        movies.append(mvs(image: UIImage(named:"Episode ONE 變小的名偵探")!, date: "2016年12月9日", name: "Episode ONE 變小的名偵探"))
        movies.append(mvs(image: UIImage(named:"唐紅的戀歌")!, date: "2017年4月15日", name: "唐紅的戀歌"))
        movies.append(mvs(image: UIImage(named:"零的執行人")!, date: "2018年4月13日", name: "零的執行人"))
        movies.append(mvs(image: UIImage(named:"紺青之拳")!, date: "2019年4月12日", name: "紺青之拳"))
        movies.append(mvs(image: UIImage(named:"紅之校外旅行")!, date: "2020年11月20日", name: "紅之校外旅行"))
        movies.append(mvs(image: UIImage(named:"緋色的不在場證明")!, date: "2021年2月11日", name: "緋色的不在場證明"))
        movies.append(mvs(image: UIImage(named:"緋色的彈丸")!, date: "2021年4月16日", name: "緋色的彈丸"))
    }

在 override func viewDidLoad() 函數底下呼叫新增影片的函數

override func viewDidLoad() {
    super.viewDidLoad()  
    moviesitem()  
    // 重新將陣列資料載入 CollectionView
    collectionView.reloadData()
}

明天會介紹：

1. 擴充 ViewController（ UICollectionViewDelegate , UICollectionViewDataSource ）
2. delegate & dataSource 的拉線

敬請期待！