[iOS] [Swift]自定义UIcollectionView

最近开始有机会用到UIcollectionView，就来做一下笔记吧，个人本来认为它跟UItableView蛮像的，但实际做起来还是有一些区别。

直接开始吧！先拉个集合查看到故事板上面并设置好约束，

collectionView左上角有内建一个cell，在这里不会用到所以可以直接删除掉，或者在下图右边的Collection查看项目将1改成0。

拉好后马上设定delegate，在文档大纲视图中，选择集合视图再重新按下ctrl +左键拖曳到viewController，选择delegate，再重复一次选择数据源。（当然用代码设定也是可以，看个人喜好）

接下来要设定我们想要自定的cell的格式，我本来是使用内建的cell再去修改的，但后来发现xib似乎比较好用，所以就用xib来创建cell，也可以顺便学一下xib 。

先New一个Cocoa Touch Class，子类为UICollectionViewCell，XIB那栏要打勾。

创建好之后就会多出xib档案和swift档，那先来设计我们的cell吧。先在cell里面拉一个视图出来。

设定View的约束条件，这边宽度要记得重置因为后面会用到，AspectRatio我也有勾。

接下来再把需要的元件拉进去并排好位置

再来设定各元件的约束，设定完后可以调整视图的背景色，可以帮助理解单元格的正确显示区域。

再来单击最上层的我的收藏夹视图单元格，在右边显示属性检查器的第一个收藏夹可重用视图栏位填上自己设置的标识符名称，像这边设定成myCell的话，文档大纲视图的我的收藏夹视图单元格就会改名成myCell。

接下来要建立xib和myCollectionViewCell.swift档案之间的连结，在该档案加入以下的代码：

到这里就完成xib的设定了，此时应该会会想要忍不住Run一下程式，但很不幸的crash了，这是因为viewController那边还有很多地方未设定。

回到ViewController.swift，给StoryBoard上的收藏视图设置ㄧ个插座

iPhone SE

大尺吋平板和最小手机都试过了，经过以萤幕宽度的计算，来达到一次显示两行单元，而且大小会自动缩放，那其他型号应该也没问题了吧！

范例档网址：

ttyUSB0978 / customCollectionViewTest

参考资料：

UICollectionView具有在iOS 9和10中使用自动布局自动调整单元格大小的功能

相关资料：

WWDC2016会议笔记— iOS 10 UICollectionView新特性

Swift —圆形图片的生成及显示（两种方式）

Swift：用UICollectionView整一个瀑布流

PS。 demo用的图片是我之前在网路上收集的，如果作者看到觉得不OK请通知我，我再换掉