ios基于UICollectionView實現(xiàn)橫向瀑布流

更新時間：2018年12月11日 08:39:35 作者：shengdaVolleyball

這篇文章主要為大家詳細介紹了ios基于UICollectionView實現(xiàn)橫向瀑布流，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在網(wǎng)上找了許久，一直沒有發(fā)現(xiàn)有提供橫向瀑布流效果的。在項目中用到了我就在垂直瀑布流的基礎上，進行了修改，做出了橫向瀑布流的效果。同時也對一些UICollectionView的屬性進行簡單的注釋，方便以后查閱。

1、首先要寫一個繼承與NSObject的布局類，記錄每一行（列）目前的寬度（高度）。再添加一個新的cell的時候進行判斷比較，添加到最短的那一行或一列上。

2、橫向的布局類入下，垂直的話就是講對應的X Y軸數(shù)據(jù)進行調整即可。
WaterfallFlowLayout為布局類，繼承與NSObject。.h文件入下

#import <UIKit/UIKit.h>
// 類的前置聲明
@class WaterfallFlowLayout;

@protocol WaterfallFlowLayoutDelegate <NSObject>
// 動態(tài)獲取 item 寬度
- (CGFloat) WaterfallFlowLayout:(WaterfallFlowLayout *) layout widthForItemAtIndexPath:(NSIndexPath *) indexPath;

@end

@interface WaterfallFlowLayout : UICollectionViewLayout

@property (nonatomic,assign) id <WaterfallFlowLayoutDelegate> delegate;

@property (nonatomic) NSInteger numberOfColumns;
@property (nonatomic) CGFloat minimumLineSpacing;
@property (nonatomic) CGFloat minimumInteritemSpacing;
@property (nonatomic) UIEdgeInsets sectionInset;
@end

WaterfallFlowLayout為布局類，繼承與NSObject。.m文件入下

#import "WaterfallFlowLayout.h"

@interface WaterfallFlowLayout ()
{
  // 用于記錄每一列布局到的寬度
  NSMutableArray * _widthOfColumns;
  // 用于保存所有item的屬性 (frame)
  NSMutableArray * _itemsAttributes;
}

@end


@implementation WaterfallFlowLayout
- (void) setNumberOfColumns:(NSInteger)numberOfColumns {
  if (_numberOfColumns != numberOfColumns) {
    _numberOfColumns = numberOfColumns;
    // 讓原有布局失效，需要重新布局
    [self invalidateLayout];
  }
}

- (void)setMinimumLineSpacing:(CGFloat)minimumLineSpacing {
  if (_minimumLineSpacing != minimumLineSpacing) {
    _minimumLineSpacing = minimumLineSpacing;
    [self invalidateLayout];
  }
}
- (void)setMinimumInteritemSpacing:(CGFloat)minimumInteritemSpacing {
  if (_minimumInteritemSpacing != minimumInteritemSpacing) {
    _minimumInteritemSpacing = minimumInteritemSpacing;
    [self invalidateLayout];
  }
}

- (void)setSectionInset:(UIEdgeInsets)sectionInset {
  if (!UIEdgeInsetsEqualToEdgeInsets(_sectionInset, sectionInset)) {
    _sectionInset = sectionInset;
    [self invalidateLayout];
  }
}

//重寫方法 1: 準備布局
-(void)prepareLayout {
  [super prepareLayout];
  // 真正的布局在這里完成
  if (_itemsAttributes) {
    [_itemsAttributes removeAllObjects];
  }else {
    _itemsAttributes = [[NSMutableArray alloc] init];
  }
  if (_widthOfColumns) {
    [_widthOfColumns removeAllObjects];
  }else {
    _widthOfColumns = [[NSMutableArray alloc] init];
  }
  for (NSInteger i = 0; i < self.numberOfColumns; i++) {
    // 初始化每一列的寬度(默認為上邊距)
//    _heightOfColumns[i] = @(self.sectionInset.top);
    [_widthOfColumns addObject:@(self.sectionInset.left)];
  }
  // item的總數(shù)
  NSInteger count = [self.collectionView numberOfItemsInSection:0];

//  CGFloat itemWidth = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (_numberOfColumns-1) * _minimumInteritemSpacing )/_numberOfColumns;

  // 總的高度 (集合視圖的寬度)
  CGFloat totalHeight = self.collectionView.frame.size.height;
  // 有效的高度 (出去間隔及邊界)
  CGFloat validHeight = totalHeight - self.sectionInset.top - self.self.sectionInset.bottom - (self.numberOfColumns-1) * self.minimumInteritemSpacing;
  // 每一個item的高度
  CGFloat itemHeight = validHeight/self.numberOfColumns;


  // 設置item的默認寬度
  CGFloat itemWidth = itemHeight;
  for (NSInteger i = 0; i<count; i++) {
    // 最短列的下標
    NSInteger index = [self indexOfShortestColumn];
    CGFloat originY = self.sectionInset.top + index * (itemHeight +self.minimumInteritemSpacing);
    CGFloat originX = [_widthOfColumns[index] floatValue];
    // 構造 indexPath
    NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
    // 動態(tài)的獲取寬度
    if ([self.delegate respondsToSelector:@selector(WaterfallFlowLayout:widthForItemAtIndexPath:)]) {
      itemWidth = [self.delegate WaterfallFlowLayout:self widthForItemAtIndexPath:indexPath];
    }
    UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    attr.frame = CGRectMake(originX, originY, itemWidth, itemHeight);
    // 保存 item 的屬性 到數(shù)組中
    [_itemsAttributes addObject:attr];
    // 更新布局到的一列(最短列) 的高度
    _widthOfColumns[index] = @(originX + itemWidth + self.minimumLineSpacing);
  }
  // 刷新顯示
  [self.collectionView reloadData];
}


//重寫方法 2: 返回指定區(qū)域的item的屬性(frame)
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
  NSMutableArray * array = [NSMutableArray array];

  for (UICollectionViewLayoutAttributes * attr in _itemsAttributes) {
    // 判斷兩個矩形是否有交集
    if (CGRectIntersectsRect(attr.frame, rect)) {
      [array addObject:attr];
    }
  }
  return array;
}


//重寫方法 3: 返回內容的尺寸
-(CGSize)collectionViewContentSize {
  CGFloat height = self.collectionView.frame.size.height;
  NSInteger index = [self indexOfLongestColumn];
  CGFloat width = [_widthOfColumns[index] floatValue] + self.sectionInset.right - self.minimumLineSpacing;
  return CGSizeMake(width, height);
}


- (NSInteger) indexOfLongestColumn {
  NSInteger index = 0;
  for (NSInteger i = 0; i<_numberOfColumns; i++) {
    if ([_widthOfColumns[i] floatValue] > [_widthOfColumns[index] floatValue]) {
      index = i;
    }
  }

  return index;
}

- (NSInteger) indexOfShortestColumn {
  NSInteger index = 0;
  for (NSInteger i = 0; i<_numberOfColumns; i++) {
    if ([_widthOfColumns[i] floatValue] < [_widthOfColumns[index] floatValue]) {
      index = i;
    }
  }

  return index;
}
@end

3、上邊的這個布局類可以直接復制粘貼下來。然后就是創(chuàng)建你的UICollectionView

在collectionView的cell中可以直接創(chuàng)建imageView或者是label添加到cell上，用來顯示數(shù)據(jù)。
collectionView默認section縮進左右是0
調節(jié)橫向cell間距
layout.minimumLineSpacing = 10;
調節(jié)縱向cell間距
layout.minimumInteritemSpacing = 20;
調節(jié)瀑布流顯示的行數(shù)，當然了你的collectionView的高（寬）足夠顯示幾行（列）就會自動顯示多上行（列）；
layout.numberOfColumns = 3;

#import "RootViewController.h"
#import "WaterfallFlowLayout.h"

@interface RootViewController () <UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,WaterfallFlowLayoutDelegate>
{
  UICollectionView * _collectionView;
}
@end

@implementation RootViewController
- (void)dealloc {
  [_collectionView release];
  [super dealloc];

}

- (void)viewDidLoad {
  [super viewDidLoad];
  // 創(chuàng)建集合視圖
  [self createCollectionView];
}

- (UICollectionViewLayout *)createLayout {
#if 1
  WaterfallFlowLayout * layout = [[WaterfallFlowLayout alloc] init];
  layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
  layout.minimumLineSpacing = 10;
  layout.minimumInteritemSpacing = 20;
  layout.numberOfColumns = 3;
  layout.delegate = self;
  [self performSelector:@selector(changeLayout:) withObject:layout afterDelay:3];

#else
  UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];

  layout.minimumLineSpacing = 10;
  layout.itemSize = CGSizeMake(150, 100);
  layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

#endif


  return [layout autorelease];
}
- (void)changeLayout:(WaterfallFlowLayout *)layout {
  layout.numberOfColumns = 3;
}


- (void)createCollectionView {
  CGRect frame = CGRectMake(0, 20, VIEW_WIDTH, VIEW_HEIGHT-20);
  _collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:[self createLayout]];

  _collectionView.backgroundColor = [UIColor cyanColor];
  // 設置代理
  _collectionView.delegate = self;
  _collectionView.dataSource = self;

  // 注冊cell 類型 及 復用標識
  [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellId"];


  [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
  return 102;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
  UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath];

  UILabel * label = nil;
  NSArray * array = cell.contentView.subviews;
  if (array.count) {
    label = array[0];
  }else {
    label = [[UILabel alloc] init];
//    label.frame = cell.bounds;
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont systemFontOfSize:50];
    [cell.contentView addSubview:label];
    [label release];
  }
  label.frame = cell.bounds;
  label.text = [NSString stringWithFormat:@"%ld",indexPath.item];
  label.textColor = [UIColor whiteColor];
  cell.backgroundColor = RandomColor;

  return cell;
}

- (CGSize) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
  return CGSizeMake( arc4random()%100+200, 110);
}

-(CGFloat) WaterfallFlowLayout:(WaterfallFlowLayout *)layout widthForItemAtIndexPath:(NSIndexPath *)indexPath{
  return arc4random()%150+50;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
  NSLog(@"點擊了第 %ld 組，第 %ld 行",indexPath.section,indexPath.row);
}

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
}


@end

實現(xiàn)的效果如下