瀑布.jpg

實現(xiàn)思路:

• 自定義UICollectionViewLayout布局
• 根據(jù)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];
  // 開始創(chuàng)建每一個cell對應的布局屬性
  NSInteger count = [self.collectionView numberOfItemsInSection:0];
  for (NSInteger i = 0; i < count; i++) {
      // 創(chuàng)建位置
      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方法, 實現(xiàn)對每個item的布局屬性進行計算, 返回每個UICollectionViewCell的布局屬性

/**
* 返回indexPath位置cell對應的布局屬性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
  // 創(chuàng)建布局屬性
  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));
  
  // 記錄內(nèi)容的高度
  CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
  if (self.contentHeight < columnHeight) {
      self.contentHeight = columnHeight;
  }
  return attrs;
}

• 4>重寫collectionViewContentSize返回瀑布流的內(nèi)容尺寸

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

2.仿照UITableView對瀑布流進行封裝

• 定義代理MRWaterflowLayoutDelegate和方法

      @protocol MRWaterflowLayoutDelegate <NSObject>
      @required
      // 對應item的高度(必須實現(xiàn))
      - (CGFloat)waterflowLayout:(MRWaterflowLayout *)waterflowLayout heightForItemAtIndex:(NSUInteger)index itemWidth:(CGFloat)itemWidth;

      @optional
      // 瀑布流的列數(shù)
      - (CGFloat)columnCountInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
      // 瀑布流每列之間的間距
      - (CGFloat)columnMarginInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
      // 瀑布流每行元素之間的間距
      - (CGFloat)rowMarginInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
      // 整個瀑布流的邊距
      - (UIEdgeInsets)edgeInsetsInWaterflowLayout:(MRWaterflowLayout *)waterflowLayout;
    @end

• 將代理MRWaterflowLayoutDelegate設置為自定義布局的屬性

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

• 如果實現(xiàn)了代理則使用代理返回的數(shù)據(jù), 否則使用默認值進行計算UICollectionViewCell的布局屬性(例如rowMargin)

#pragma mark - 常見數(shù)據(jù)處理
- (CGFloat)rowMargin
{
  if ([self.delegate respondsToSelector:@selector(rowMarginInWaterflowLayout:)]) {
      return [self.delegate rowMarginInWaterflowLayout:self];
  } else {
      return MRDefaultRowMargin;
  }
}

• 創(chuàng)建瀑布流 類似于使用UITableView

// 創(chuàng)建布局
  MRWaterflowLayout *layout = [[MRWaterflowLayout alloc] init];
  layout.delegate = self;
  
  // 創(chuàng)建CollectionView, layout一定要創(chuàng)建才能對UICollectionView進行初始化
  UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
  collectionView.backgroundColor = [UIColor whiteColor];
  collectionView.dataSource = self;
  [self.view addSubview:collectionView];

瀑布流效果

溫馨提示: 如果您喜歡, 可以前往GitHub點擊Star哦~