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(如下图)。

![UICollectionViewFlowLayout布局.png](http://upload-images.jianshu.io/upload_images/223244-6400190b74ad45ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

UICollectionView FlowLayout实现了一种线形布局的方式，如下图所示：
![UICollectionViewFlowLayout 布局方式.png](http://upload-images.jianshu.io/upload_images/223244-d0fe62e10ab45121.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如上图 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的间距就会不同

![4个cell不足已占满屏幕且放不下第五个](http://upload-images.jianshu.io/upload_images/223244-0cb0d932133f5214.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![cell不等大.png](http://upload-images.jianshu.io/upload_images/223244-1ec55d1f9874ca39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

以下是实现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 *)layoutAttributesForElementsInRect:(CGRect)rect

方法对UICollectionViewFlowLayout计算出的默认位置，做出调整。如把第一个cell下移450个点

![自定义FlowLayout子类.png](http://upload-images.jianshu.io/upload_images/223244-d7c5bad51c1c2ba2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

  NSArray *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;
  }