用Storyboard慢速创建UICollectionView
2015-10-26 本文已影响2956人
kDurian
Tip: 致敬@简书
最终效果

新建一个项目
1. 选择Single View Application模板

2. 删除Main.storyborad中的默认ViewController

3. 删除文件列表中的ViewController.h && ViewController.m

新建并设置Collection View Controller
1. 拖拽一个Collection View Controller到Main.Storyboard中

2. 在Attributes Inspector中,设置为Is Initial View Controller

3. New File , 继承自UICollectionViewController

4. 回到Main.storyboard,设置Collection View Controller的Custom Class

新建并设置Collection View Cell
1. New File,继承自UICollectionViewCell

2. 回到Main.storyborad,设置Collection View里Cell视图的Custom Class

3. 布置Cell,调整Cell的大小,添加ImageView并配上合适的图片,添加Label

4. 关联Cell视图中的Image View 和 Label控件到CollectionViewCell.h

实现协议
1. 返回每个Section的item的个数

2. 返回Cell

关键点
1. kReuseId = "Mycell",这里的值需要和下图中的配置一致

2. 使用Identifier后,不能用代码注册Cell(你可以试一试)
