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 {

}