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

来源：互联网发布：vscode md预览编辑：程序博客网时间：2024/05/17 02:46

本文地址：http://blog.csdn.net/zhaoyabei/article/details/40158015，转载注明出处，谢谢。

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方法

    //在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中的其他方法

#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;    }

效果图：

2 0