Day 21 UICollectionView的练习(1/2)

今天我们使用XIB来练习CollectionView，还不知道XIB怎麽使用的，可以看这边：

连结

首先我们进到，MainVC里面，拉一个CollectionView进去，然後用autolayout，四个点都设成0，如下图

一般来说，我们的MainStoryboard里面就可以设定cell里面要放什麽东西，譬如Image,Label等等，但是因为我们是用XIB去当成我们的主画面，所以我们必须用register的方式去自订我们的cell，我们可以建立一个资料夹叫做Model，里面放我们的struct结构跟MycollectionViewCell，之後在Model资料夹底下再建立一个资料夹叫MyCollectionViewCell，像这样：

之後新增档案，选Cocoa Touch Class

之後名称取一个你喜欢的，这边我是命名为MyCollectionViewCell，然後subclass选UICollectionViewCell，别忘了勾Also create XIB file喔～

好了之後我们把我们cell里面要放的东西放进去(UIImage跟Label)：

接下来去MyCollectionViewCell.swift里面把IBOutlet拉好。

*这边要留意下Cell整体的大小：

之後回到MainVC，改一下CollectionViewCell的大小

我是设定比我的XIB Cell 还要大个10，长宽都是

接下来我们在Model底下建立一个swift档案，名称随意

代码：

struct collectionViewCellData {
import UIKit
    var image: UIImage?
    var placeName: String?
    
    init(image: UIImage,placeName: String) {
        self.image = image
        self.placeName = placeName
    }
    
}

当然你要写在MainVC那边也可以，记得写在class外面～我会写在这边是比较好把它做一个分类，万一之後要改参数，就不用找来找去，找到眼花，然後记得要import UIKIt，不然你会找不到UIImage～

接下来我们要到MainVC里面，把我们的cell注册到我们的CollectionView里面，那这个是要写在view.didload里面，也就是说当画面载入时，cell也会着被注册进去，这个方法也适用於你用XIB去做TableView。

在override func viewDidLoad()底下加入这段代码:

let nibCell = UINib(nibName: "MyCollectionViewCell", bundle: nil)
MyCollectionView.register(nibCell, forCellWithReuseIdentifier: "Cell")

今天就到这边，明天见～