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

来源：互联网发布：c语言上机心得体会编辑：程序博客网时间：2024/05/22 07:55

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) {
        return1;
    }
    NSString*category=[_allCategory objectAtIndex:section];
    if([_allVideoDic objectForKey:category]) {
        return[[_allVideoDic objectForKey:category] count];
    }elsereturn 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"]];
        returnscrollCell;
    }
else{//其他分区
    CustomCollectionViewCell*cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];
        VideoModel*video=[[_allVideoDic objectForKey:[_allCategory objectAtIndex:indexPath.section]]objectAtIndex:indexPath.row];
        [cell initDataWith:video];
    returncell;
    }
    returnnil;
}
//返回item的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if(indexPath.row==0&&indexPath.section==0) {
        returnCGSizeMake(Width, 200);
    }
    returnCGSizeMake(80,130);
}
//返回分区数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return[_allCategory count];
}
//返回HeaderView的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    if(section==0) {
        returnCGSizeMake(Width, 0);
    }elsereturn 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) {
            case1:
                title=@"今日推荐";
                break;
            case2:
                title=@"国内微影";
                break;
            case3:
                title=@"国际微影";
                break;
            default:
                break;
        }
        view.title=title;
        returnview;
    }
    returnnil;
     
}

效果图：

0 0