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類型、實現代理方法、創建自定義視圖等多種方式，實現高度個性化的布局效果。希望本文能對大家有所幫助。