说句老实话，UICollectionView真的太强大了，而且要掌握高级部分是相当困难的。至少笔者是这么认为的，如果觉得自己比较厉害，可以轻而易举地掌握UICollectionView的使用的，希望可以总结点经验！
本篇文章是在练习如何使用UICollectionView进行网格布局。网格布局是非常常见的UI布局，在很多的App中都这么设计过。本篇文章只讲如何实现风格布局，demo中有一些是优化方面的，会单独写一篇文章讲解如何优化网格布局中的图片。
实现效果
FlowLayout
本demo中需要使用到UICollectionViewFlowLayout，因此先讲讲这个类：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// iOS6.0以后才有的
: UICollectionViewLayout
// 行之间的最小间距
;
// item之间的最小间距
;
// 如果cell的大小是固定的，应该直接设置此属性，就不用实现代理
;
// 这是8.0后才能使用，评估item的大小
;
// 支持两种滚动方向，水平滚动和竖直功能
// 因此不要再想要使用横向tableview，直接使用collectionview就okb
;
// header参考大小
;
// footer参考大小
;
// section的inset，用于设置与上、左、底、右的间隔
;
// 9.0以后才有的属性，用于设置header/footer与tableview的section效果一样。
// 可以悬停
;
;
@end
|
这个类是用于决定UICollectionView的item的布局的。
创建CollectionView
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// 创建UI布局
;
// 设置成固定的大小
;
// 行间距最小设置为10
;
// 列间距最小设置为10
;
bounds
;
;
// 注册cell
]
;
// 设置代理
;
;
// 设置数据源代理
;
|
实现代理
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#pragma mark - UICollectionViewDataSource & UICollectionViewDelegate
collectionView
{
:cellIdentifier
;
;
;
;
}
{
;
}
|
创建一个对应的cell，这里呢实现只是简单的添加两个控件而已：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
{
{
;
;
;
;
;
;
;
;
;
;
;
}
;
}
|