iOS CollectionView FlowLayout与风火
一般来说，UITableVIew 与 UICollectionView 是iOS开发最重要的两个视图，现在市面上大量的App的布局都可以用这两者实现。
大多数初学者(新入行，包括我自己)可能对 UITableVIew 比较熟悉，而对 UICollectionVIew 了解的比较少，自己看过的几本iOS初级开发类的书籍，对 UICollectionView 也是一笔带过，而不像对 UITableView 那样介绍代码与View控件间交互流程、每个API的用法。一个偶然的机会，我便拾起了对 UICollectionVIew 的学习。
这里对自己学到的东西(见Demo)，从三个方面做一个总结：
- UICollectionView理解
- UICollectionView FlowLayout学习与使用
- UICollectionView自定义布局实现风火轮(Ray wenderlich上的教程)
- 自定义supplementary view的使用
CollectionView Demo.gif
UICollectionView的理解
-
UICollectionView 与 UITableView 一样都是用来展示有序数据的方式。
-
像 UITableView 一样，大多数 UICollectionView 用网格型(grid-like)呈现数据，但不像 UITableView 一列多行的方式，UICollectionView 支持多行多列方式的布局
-
UICollectionView 也支持其他方式的布局 环形(见demo)、栈型等几乎所有你能想到的布局方式
-
像 UITableView 一样，UICollectionView 也有相类似的 datasource 来提供数据、delegate来管理交互
-
UICollectionView实现了展示与数据分离，方便了我们定义自己布局方式
-
相同的数据，不同的
collectionViewLayout,就能用不同布局方式展现，比如 demo 中点击右上角 switch 按钮就可以在 FlowLayout 与 环形布局间切换。 -
像 UITableView 一样，UICollectionView 也有相类似的 datasource 来提供数据、delegate来管理交互
-
UICollectionViewDataSource 提供data
```
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath
- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
- UICollectionViewDelegate 提供与collectioncell 的 selection 与highlighting 交互
##UICollectionView FlowLayout学习与使用
像 UITableView，使用 UICollectionView FlowLayout 允许你定义多个section，每个section有自己的cell、header、footer(如下图)。
UICollectionView FlowLayout实现了一种线形布局的方式，如下图所示：
如上图 UICollectionView 的滑动方向是上下，则每一个section则是从左到右的方式排列，当一行不足以放下一个cell时，这个cell就会放到下一行。
你可以通过 ```minimumLineSpacing``` 与 ```minimumInterItemSpacing``` 或者 UICollectionViewDelegateFlowLayout(其默认为UICollectionViewDelegate是同一个对象)的
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
不过这两个值都只是参考，实际情况还是需要根据UICollectionView排列情况而定。
- 两个cell间的间距可能会大于实际值
- 如果cell不等大，上下两个item的间距就会不同
以下是实现demo种flow布局的代码：
pragma mark - collection view datasource
-
(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 10;
} -
(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
} -
(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:myCollectionViewCellIdentifier
forIndexPath:indexPath];
cell.indexLabel.text = [NSString stringWithFormat:@"%ld", indexPath.item + 1];
cell.blankView.backgroundColor = indexPath.item % 2 ? [UIColor blueColor] : [UIColor redColor];return cell;
}
pragma mark - uicollectionview flow layout delegate
-
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
//返回每个cell大小
return CGSizeMake(100, 100);
} -
(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
//cell间最小间距
return 10.0f;
}
-
(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
//每个line间最小距离
return 10.0f;
} -
(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
//上、左、右与header与collectionview保持10的距离
return UIEdgeInsetsMake(10, 10, 0, 10);
}
###关于定义UICollectionViewFlowLayout子类
在几种情况下，你可能需要定义UICollectionViewFlowLayout子类，最常见的以下几种:
- 另外增加 supplementary 或者 decoration view
- 对UICollectionViewFlowLayout返回的每个cell的frame做改变
比如说可以重载
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
方法对UICollectionViewFlowLayout计算出的默认位置，做出调整。如把第一个cell下移450个点
-
(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray<UICollectionViewLayoutAttributes *> *layoutAttributesArray = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes *layoutAttributes in layoutAttributesArray) {
if (layoutAttributes.indexPath.item == 0) { CGRect frame = layoutAttributes.frame; layoutAttributes.frame = frame; frame.origin.y = frame.origin.y + 450; frame.origin.x = frame.origin.x; layoutAttributes.frame = frame; }return layoutAttributesArray;
}
