DAY 8 『 CollectionView 』Part1

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 的拉线

敬请期待！