UICollectionView瀑布流效果就是这么cool~

瀑布.jpg

实现思路:

• 自定义UICollectionViewLayout布局
• 根据item的相关属性, margin等设置每一个item的布局属性
• 每次设置item的布局属性时找到当前collectionView的所有列中高度最小的列, 把下一个item放在高度最小的列下面进行排布

---

1.自定义UICollectionViewLayout布局

• 1>重写prepareLayout方法进行每次刷新的初始化设置

- (void)prepareLayout {
[super prepareLayout];
  
  self.contentHeight = 0;
  
  // 清除以前计算的所有高度
  [self.columnHeights removeAllObjects];
  for (NSInteger i = 0; i < self.columnCount; i++) {
      [self.columnHeights addObject:@(self.edgeInsets.top)];
  }
  
  // 清除之前所有的布局属性
  [self.attrsArray removeAllObjects];
  // 开始创建每一个cell对应的布局属性
  NSInteger count = [self.collectionView numberOfItemsInSection:0];
  for (NSInteger i = 0; i < count; i++) {
      // 创建位置
      NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
      // 获取indexPath位置cell对应的布局属性
      UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
      [self.attrsArray addObject:attrs];
  }
}

• 2>重写layoutAttributesForElementsInRect方法, 返回所有的布局属性

/**
* 决定cell的排布
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
  return self.attrsArray;
}

• 3>重点重写layoutAttributesForItemAtIndexPath方法, 实现对每个item的布局属性进行计算, 返回每个UICollectionViewCell的布局属性

/**
* 返回indexPath位置cell对应的布局属性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
  // 创建布局属性
  UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
  
  // collectionView的宽度
  CGFloat collectionViewW = self.collectionView.frame.size.width;
  
  // 设置布局属性的frame
  CGFloat w = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
  CGFloat h = [self.delegate waterflowLayout:self heightForItemAtIndex:indexPath.item itemWidth:w];
  
  // 找出高度最短的那一列
  NSInteger destColumn = 0;
  CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
  for (NSInteger i = 1; i < self.columnCount; i++) {
      // 取得第i列的高度
      CGFloat columnHeight = [self.columnHeights[i] doubleValue];
      
      if (minColumnHeight > columnHeight) {
          minColumnHeight = columnHeight;
          destColumn = i;
      }
  }
  
  CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
  CGFloat y = minColumnHeight;
  if (y != self.edgeInsets.top) {
      y += self.rowMargin;
  }
  attrs.frame = CGRectMake(x, y, w, h);
  
  // 更新最短那列的高度
  self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
  
  // 记录内容的高度
  CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
  if (self.contentHeight < columnHeight) {
      self.contentHeight = columnHeight;
  }
  return attrs;
}

• 4>重写collectionViewContentSize返回瀑布流的内容尺寸

- (CGSize)collectionViewContentSize {
return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}

---

2.仿照UITableView对瀑布流进行封装

• 定义代理MRWaterflowLayoutDelegate和方法

      @protocol MRWaterflowLayoutDelegate 
      @required
      // 对应item的高度(必须实现)
      - (CGFloat)waterflowLayout:(MRWaterflowLayout *)waterflowLayout heightForItemAtIndex:(NSUInteger)index itemWidth:(CGFloat)itemWidth;

      @optional
      // 瀑布流的列数
      - (CGFloat)columnCountInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
      // 瀑布流每列之间的间距
      - (CGFloat)columnMarginInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
      // 瀑布流每行元素之间的间距
      - (CGFloat)rowMarginInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
      // 整个瀑布流的边距
      - (UIEdgeInsets)edgeInsetsInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
    @end

• 将代理MRWaterflowLayoutDelegate设置为自定义布局的属性

/** 瀑布流代理 */
@property (nonatomic, weak) id delegate;

• 如果实现了代理则使用代理返回的数据, 否则使用默认值进行计算UICollectionViewCell的布局属性(例如rowMargin)

#pragma mark - 常见数据处理
- (CGFloat)rowMargin
{
  if ([self.delegate respondsToSelector:@selector(rowMarginInWaterflowLayout:)]) {
      return [self.delegate rowMarginInWaterflowLayout:self];
  } else {
      return MRDefaultRowMargin;
  }
}

• 创建瀑布流 类似于使用UITableView

// 创建布局
  MRWaterflowLayout *layout = [[MRWaterflowLayout alloc] init];
  layout.delegate = self;
  
  // 创建CollectionView, layout一定要创建才能对UICollectionView进行初始化
  UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
  collectionView.backgroundColor = [UIColor whiteColor];
  collectionView.dataSource = self;
  [self.view addSubview:collectionView];

---

瀑布流效果

温馨提示: 如果您喜欢, 可以前往GitHub点击Star哦~