UICollectionView与UICollectionReusableView实现复杂列表布局

一、UICollectionView简介

UICollectionView是UIKit中的一个高度可定制化的视图控件，它可以显示一组数据元素，并将其视为一个可滚动的列表或网格，在iOS的各个UI场景中被广泛使用。使用UICollectionView可以实现各种复杂的布局，包括瀑布流、横向滚动、卡片展示等。

一般而言，UICollectionView由一个布局对象和一个或多个单元格组成，单元格用于显示数据元素的内容和风格，布局对象则定义了单元格排列和布局方式。

二、UICollectionReusableView简介

UICollectionReusableView是UICollectionView的子类之一，也是用于布局的重要组成部分。和单元格不同，UICollectionReusableView并不直接显示数据元素，而是提供一些装饰性的视图元素，例如页眉、页脚、分区标题等。

UICollectionReusableView有两个高度自定义的类别：头视图和脚视图。此外，UICollectionReusableView还有一个分区装饰视图（Supplementary View），可用于实现一些页面的装饰效果。

三、UICollectionReusableView的使用

在使用UICollectionReusableView之前，我们需要先设置好collectionView布局，包括指定单元格大小、排列方式、分区数目等。这里使用UICollectionViewFlowLayout作为布局对象示例。

1.设置collectionView布局

    //创建流式布局对象并设置sectionInset等参数
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    [flowLayout setMinimumLineSpacing:10];
    [flowLayout setMinimumInteritemSpacing:10];
    [flowLayout setSectionInset:UIEdgeInsetsMake(10, 10, 10, 10)];
    [flowLayout setHeaderReferenceSize:CGSizeMake(0, 50)];
    [flowLayout setFooterReferenceSize:CGSizeMake(0, 50)];
    [flowLayout setItemSize:CGSizeMake((ScreenWidth-40)/2, (ScreenWidth-40)/2*1.5f)];
    
    //创建collectionView并设置delegate、dataSource、布局
    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];
    [_collectionView setBackgroundColor:[UIColor whiteColor]];
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collectionViewCell"];
    [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"collectionViewHeader"];
    [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"collectionViewFooter"];
    [self.view addSubview:_collectionView];

以上代码设置了collectionView的基本布局，包括每个单元格的大小、内间距、每个分区的页眉和页脚的大小等。此外，还注册了collectionView的单元格和装饰视图的类型，后面我们将重点介绍UICollectionReusableView的使用。

2.UICollectionReusableView的使用

在collectionView中，UICollectionReusableView通常需要在同一个分区内显示，因此，我们需要先定义分区（section），每个分区可以包含一个页眉、一个页脚和多个单元格。

（1）注册UICollectionReusableView类型

在使用UICollectionReusableView前，我们需要将其类型注册到collectionView中。分为页眉和页脚两种情况，注册方式类似于注册单元格类型。

    [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"collectionViewHeader"];
    [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"collectionViewFooter"];

（2）创建UICollectionReusableView视图

在collectionView的代理方法中创建视图。需要注意的是，如果需要使用页眉或页脚，需要实现UICollectionViewDelegateFlowLayout协议的相关方法。

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"collectionViewHeader" forIndexPath:indexPath];
        [headerView setBackgroundColor:[UIColor lightGrayColor]];
        return headerView;
    }
    else{
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"collectionViewFooter" forIndexPath:indexPath];
        [footerView setBackgroundColor:[UIColor lightGrayColor]];
        return footerView;
    }
}

（3）实现页眉、页脚FlowLayout的代理方法

在使用页眉、页脚时，需要使用FlowLayout的代理方法进行设置：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(0, 50);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    return CGSizeMake(0, 50);
}

（4）UICollectionReusableView的自定义

我们还可以自己定义UICollectionReusableView的样式，例如分区标题的样式。下面我们举一个分区标题的实例：

//创建UICollectionViewLayoutAttributes对象并设置样式
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader withIndexPath:indexPath];
attributes.frame = CGRectMake(0, 0, _collectionView.frame.size.width, 50);
attributes.alpha = 0.5;
attributes.transform3D = CATransform3DMakeRotation(M_PI, 1, 0, 0);

//添加UICollectionViewLayoutAttributes对象到布局中
[self.layoutAttributes addObject:attributes];

//创建分区标题视图，并设置相关属性
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"collectionViewHeader" forIndexPath:indexPath];
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 200, 30)];
titleLabel.font = [UIFont systemFontOfSize:18];
titleLabel.text = [NSString stringWithFormat:@"Section %ld",indexPath.section];
[headerView addSubview:titleLabel];

return headerView;

以上代码实现了一个自定义的分区标题，其中用到了UICollectionViewLayoutAttributes对象，该对象用于设置分区标题的相关属性，例如frame、alpha、transform3D等。需要注意的是，除非需要自定义风格，一般情况下并不需要使用UICollectionViewLayoutAttributes对象。

四、总结

本文主要介绍了UICollectionReusableView在UICollectionView布局中的使用方法。我们可以通过注册UICollectionReusableView类型、实现代理方法、创建自定义视图等多种方式，实现高度个性化的布局效果。希望本文能对大家有所帮助。