用Storyboard慢速创建UICollectionView

Tip: 致敬@

参照原创文章:kittenyang.com/collectionview/

最终效果

用Storyboard慢速创建UICollectionView_第1张图片


新建一个项目

1. 选择Single View Application模板

用Storyboard慢速创建UICollectionView_第2张图片
New Project

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

用Storyboard慢速创建UICollectionView_第3张图片
Delete View Controller Scene

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

用Storyboard慢速创建UICollectionView_第4张图片
Delete XX.h&&XX.m


新建并设置Collection View Controller

1. 拖拽一个Collection View Controller到Main.Storyboard中

用Storyboard慢速创建UICollectionView_第5张图片
Drag Collection View Controller

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

用Storyboard慢速创建UICollectionView_第6张图片
Set Initial

3. New File , 继承自UICollectionViewController

用Storyboard慢速创建UICollectionView_第7张图片
New Controller

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

用Storyboard慢速创建UICollectionView_第8张图片
Set Custom Class


新建并设置Collection View Cell

1. New File,继承自UICollectionViewCell

用Storyboard慢速创建UICollectionView_第9张图片
New Cell Class

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

用Storyboard慢速创建UICollectionView_第10张图片
Set Custom Class

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

用Storyboard慢速创建UICollectionView_第11张图片
Config Cell


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

用Storyboard慢速创建UICollectionView_第12张图片
Outlet

实现协议

1. 返回每个Section的item的个数

Return Item Number

2. 返回Cell

用Storyboard慢速创建UICollectionView_第13张图片
Return Cell

关键点

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

用Storyboard慢速创建UICollectionView_第14张图片
Key1

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

Key2

你可能感兴趣的:(用Storyboard慢速创建UICollectionView)