［iOS高级］ UICollectionView实现瀑布流效果

UICollectionView在2012年被提出，已经不是什么新技术了，在此只是做一下简单的实现。

集合视图：UICollectionView
UICollectionView和UITableView类似,它也是datasource和delegate设计模式的:datasource为view提供数据源,告诉view要显?示些什么东?以及如何显示它们,delegate提供一些样式的?细节以及?户交互的响应。
在collectionView中,对于cell的布局比较复杂，专?使?了?个类来对collectionView的布局和行为进?描述,这就是 UICollectionViewLayout。UICollectionViewLayout是抽象基类，使用时用其子类新建对象。最常用的UICollectionViewLayout子类就是UICollectionViewFlowLayout（Apple提供）了。Flow Layout简单说是一个直线对齐的layout，一般的如优酷客户端等瀑布流样式使用它就能搞定。当然UICollectionViewLayout也有其他有趣的子类，如堆叠布局、圆形布局、Cover Flow布局等。

这里使用的是UICollectionViewFlowLayout实现一个视频播放器的布局。其中的数据解析大家可以忽略或添加自己想要的图片等，主要是讲布局的形成。

环境：Xcode6，arc, 纯代码

viewDidLoad方法

?

1 2 3 4 5 6 7

//在viewDidLoad中注册需要使用的类 //header视图 [_collectionView registerClass:[HeadView class ] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@ "header" ]; //具备滚动图片的item(cell) [_collectionView registerClass:[ScrollCollectionViewCell class ] forCellWithReuseIdentifier:@ "scrollCell" ]; //单张图片的item(cell) [_collectionView registerClass:[CustomCollectionViewCell class ] forCellWithReuseIdentifier:@ "cell" ];

viewController中的其他方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

#pragma mark 集合视图 //返回每个分区的item数 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{      if (section== 0 ) {          return 1 ;      }      NSString*category=[_allCategory objectAtIndex:section];      if ([_allVideoDic objectForKey:category]) {          return [[_allVideoDic objectForKey:category] count];      } else return 0 ; } //生成item -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{      //第一个分区只有一个item，且与其他分区不同      if (indexPath.section== 0 ) {          ScrollCollectionViewCell*scrollCell=[collectionView dequeueReusableCellWithReuseIdentifier:@ "scrollCell" forIndexPath:indexPath];          [scrollCell initWithArray:[_allVideoDic objectForKey:@ "ad" ]];          return scrollCell;      } else { //其他分区      CustomCollectionViewCell*cell=[collectionView dequeueReusableCellWithReuseIdentifier:@ "cell" forIndexPath:indexPath];          VideoModel*video=[[_allVideoDic objectForKey:[_allCategory objectAtIndex:indexPath.section]]objectAtIndex:indexPath.row];          [cell initDataWith:video];      return cell;      }      return nil; } //返回item的大小 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{      if (indexPath.row== 0 &&indexPath.section== 0 ) {          return CGSizeMake(Width, 200 );      }      return CGSizeMake( 80 , 130 ); } //返回分区数 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{      return [_allCategory count]; } //返回HeaderView的大小 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{      if (section== 0 ) {          return CGSizeMake(Width, 0 );      } else return CGSizeMake(Width, 20 ); } //返回每个分区的headerView -(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{        if (indexPath.section!= 0 &&[kind isEqualToString:UICollectionElementKindSectionHeader]) {        static  NSString *reuseIdentifier=@ "header" ;          HeadView*view=[collectionView dequeueReusableSupplementaryViewOfKind:kind   withReuseIdentifier:reuseIdentifier forIndexPath:indexPath];          NSString*title;          switch (indexPath.section) {              case 1 :                  title=@ "今日推荐" ;                  break ;              case 2 :                  title=@ "国内微影" ;                  break ;              case 3 :                  title=@ "国际微影" ;                  break ;              default :                  break ;          }          view.title=title;          return view;      }      return nil;       }

效果图：