UICollectionView

UICollection的實現和UITableView不一樣的地方在于Item的布局，需要用UICollectionViewLayout類來描繪視圖的布局。我們常用uICollectionViewFlowLayout，也可以自定義UICollectionViewLayout。

創建UICollectionViewFlowLayout

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(100, 100);// 設置每個item的大小
flowLayout.minimumInteritemSpacing = 10;// 設置每個item的最小列間距(默認是10)
flowLayout.minimumLineSpacing = 10;// 設置每個item的最小列間距(默認是10)
flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);// 設置分區間隔(上，下，左，右)
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 設置UICollectionView的滾動方向
flowLayout.headerReferenceSize = CGSizeMake(100, 100);// 設置每個分區頭部視圖的大小
flowLayout.footerReferenceSize = CGSizeMake(100, 100);// 設置每個分區尾部視圖的大小

初始化UICollectionView

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor whiteColor];

設置代理

• UICollectionViewDalaSouce
• UICollectionViewDelegate

首先要遵守代理協議
然后指定代理

collectionView.dataSource = self;
collectionView.delegate = self;

注冊Cell、頭部視圖、尾部視圖

[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"reuse"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];

必須實現的代理方法

// 返回每個分區的cell個數
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 30;
}

// 創建item視圖對象
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];

    cell.backgroundColor = [UIColor colorWithRed:random() % 256 / 255.0 green:random() % 256 / 255.0 blue:random() % 256 / 255.0 alpha:random() % 256 / 255.0];

    return cell;
}

可以實現的方法

// 返回分區的個數
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

// 當cell被選中
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"被選中");
}

// 創建頭部視圖和尾部視圖
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    // 需要判斷是頭部視圖還是尾部視圖
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        // 獲取頭部視圖
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
    
        // 設置頭部視圖
        headerView.backgroundColor = [UIColor blackColor];
    
        // 返回頭部視圖
        return headerView;
    } else {
        // 獲取尾部視圖
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
    
        // 設置尾部視圖
        footerView.backgroundColor = [UIColor grayColor];
    
        // 返回尾部視圖
        return footerView;
    }
}

布局協議
首先要遵守UICollectionViewDelegateFlowLayout協議

/**
 *  對UICollectionViewDelegate的擴展
 */

// 返回item大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

}

// 設置分區間隔(上，下，左，右)
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {

}

// 設置最小行間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {

}

// 設置最小列間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {

}

// 設置頭部視圖大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {

}

// 設置尾部視圖大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {

}