iOS UICollectionView之基本用法

本篇会实现一个简单的UICollectionView，对UICollectionView做一个简单的介绍。
UICollectionView包含三个部分，它们都是UIView的子类：
Cells 用于展示内容的主体，对于不同的cell 可以指定不同尺寸和不同的内容
Supplementary Views 追加视图，如果你对UITableView比较熟悉的话，可以理解为每个Section的Header 或者 Footer
Decoration Views 装饰视图
一个UICollectionView的实现包括两个必要部分:UICollectionViewDataSource和UICollectionViewDelegateFlowLayout , 和一个交互部分: UICollectionViewDelegate 。
遵守协议以及常量

static NSString *const kMainCollectionViewVerticalCellIdentifier = @"kMainCollectionViewVerticalCellIdentifier";
static NSString *const kMainCollectionViewVerticalHeaderIdentifier = @"kMainCollectionViewVerticalHeaderIdentifier";
static NSString *const kMainCollectionViewVerticalFooterIdentifier = @"kMainCollectionViewVerticalFooterIdentifier";

@interface DMVerticalCollectionViewController ()

/** UI */
@property (nonatomic, strong) UICollectionView *mainCollectionView;

/** DATA */
@property (nonatomic, strong) NSMutableArray *dataArray;

@end

数据的提供

- (NSMutableArray *)dataArray
{
    if (_dataArray == nil) {
        _dataArray = [[NSMutableArray array] init];
        NSMutableArray *oneArray = [[NSMutableArray array] init];
        [oneArray addObject:@"欢迎关注"];
        [oneArray addObject:@"小妖超超"];
        [oneArray addObject:@"By 点滴86"];
        
        [_dataArray addObject:oneArray];
        
        NSMutableArray *twoArray = [[NSMutableArray alloc] init];
        [twoArray addObject:@"深深爱过你"];
        [twoArray addObject:@"一次就好"];
        [twoArray addObject:@"演员"];
        [twoArray addObject:@"绅士"];
        [twoArray addObject:@"丑八怪"];
        [twoArray addObject:@"初学者"];
        [twoArray addObject:@"我好像在哪见过你"];
        [twoArray addObject:@"你还要我怎样"];
        [twoArray addObject:@"刚刚好"];
        
        [_dataArray addObject:twoArray];
    }
    
    return _dataArray;
}

创建UICollectionView 视图

- (UICollectionView*)mainCollectionView
{
    if (_mainCollectionView == nil) {
        UICollectionViewFlowLayout *tempFlowLayout = [[UICollectionViewFlowLayout alloc] init];
        // 设置滚动方向
        tempFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
        _mainCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 50) collectionViewLayout:tempFlowLayout];
        
        // 设置数据源和代理
        _mainCollectionView.delegate = self;
        _mainCollectionView.dataSource = self;
        
        // 注册cell、sectionHeader、sectionFooter
        [_mainCollectionView registerClass:[DMCollectionViewCell class] forCellWithReuseIdentifier:kMainCollectionViewVerticalCellIdentifier];
        [_mainCollectionView registerClass:[DMCollectionHeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kMainCollectionViewVerticalHeaderIdentifier];
        [_mainCollectionView registerClass:[DMCollectionFooterReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kMainCollectionViewVerticalFooterIdentifier];
    }
    
    return _mainCollectionView;
}

ps: 使用的是系统提供的UICollectionViewFlowLayout，并设置了滚动方向为垂直。
实现UICollectionViewDataSource 方法

#pragma mark - UICollectionViewDataSource method
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return [self.dataArray count];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [[self.dataArray objectAtIndex:section] count];
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    DMCollectionViewCell * cell =[collectionView dequeueReusableCellWithReuseIdentifier:kMainCollectionViewVerticalCellIdentifier forIndexPath:indexPath];
    cell.textLabel.text = [[self.dataArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    
    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        DMCollectionHeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:kMainCollectionViewVerticalHeaderIdentifier forIndexPath:indexPath];
        
        if (indexPath.section == 0) {
            headerView.textLabel.text = @"公众号";
        } else if (indexPath.section == 1) {
            headerView.textLabel.text = @"薛之谦";
        }
        
        return headerView;
    } else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
        DMCollectionFooterReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:kMainCollectionViewVerticalFooterIdentifier forIndexPath:indexPath];
        
        return footerView;
    }
    
    return nil;
}

实现UICollectionViewDelegate方法

#pragma mark - UICollectionViewDelegate method
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *logStr = [[self.dataArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    NSLog(@"%@", logStr);
}

ps：只是简单的输出点击内容，点击深深爱过你，console log 如下

深深爱过你.png

实现UICollectionViewDelegateFlowLayout方法

#pragma mark - UICollectionViewDelegateFlowLayout method
// 设置item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(([UIScreen mainScreen].bounds.size.width - 20) / 3.0, ([UIScreen mainScreen].bounds.size.width - 20) / 3.0);
}

// 设置每一行之间的间隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}

// 设置item之间的间隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}

// 设置header 的宽和高
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    return CGSizeMake(0, 100);
}

// 设置footer 的宽和高
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    return CGSizeMake(0, 150);
}

ps: 需要注意根据滚动方向的不同，header 和footer 的宽和高中只有一个会起作用。垂直滚动时高起作用，而水平滚动时宽度起作用。
cell 需要继承DMCollectionViewCell 单纯的显示一个文本
Supplementary Views 需要继承UICollectionReusableView，header 只是显示文本，footer 显示了一张图片
效果图如下:

UICollection简单实用.png

UICollectionView 的简单使用就到此结束啦...