iOS开发之UICollectionView（一）

本文主要介绍UICollectionView的简单使用。这里使用纯代码。

首先在HXViewController的view加载完毕后添加UICollectionView，设置UICollectionView的数据源、代码等方法，如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 设置collectionView布局方式
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    
    // 创建collectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    // 设置collectionView背景颜色
    collectionView.backgroundColor = [UIColor redColor];
    
    // 设置数据源和代理
    collectionView.dataSource = self;
    collectionView.delegate = self;
    
    // 注册一个collectionView Cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"COLLECTIONCELL"];
    
    // 注册一个头部视图
    [collectionView registerClass:[CollectionHeaderReusableView class]
       forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
              withReuseIdentifier:@"HEADER"];
    [self.view addSubview:collectionView];
    self.collectionView = collectionView;
}

使用纯代码创建UICollectionView的时候，必须先注册一个带有标示符的cell。

这里CollectionHeaderReusableView是每组cell的头视图，设置头视图的时候，也必须要先注册一个带有标示符的头视图

设置完数据源、代理，注册完cell、头视图，下面实现相应的方法，看注释。

#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 5;// 5个section
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 30;// 每个section中有30个cell
}
/**
 *  每个cell中的显示内容
 */
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"COLLECTIONCELL" forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor greenColor];
    
    return cell;
}

/**
 *  设置section头部、尾部视图
 *
 *  @param collectionView collectionView
 *  @param kind           头部/尾部
 *  @param indexPath      indexPath
 */
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    
    
    if (kind == UICollectionElementKindSectionHeader) {
        
        CollectionHeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HEADER" forIndexPath:indexPath];
        return headerView;
        
    }else {
        return nil;
    }
    
}



#pragma mark - UICollectionViewDelegate
/**
 *  点击cell的响应方法
 */
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"点击了cell-----第%zd组---第%zd个", indexPath.section, indexPath.row);
}


/**
 *  所有cell可以高亮
 */
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath {
    
    return YES;
}


/**
 *  cell高亮时候调用
 */
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"第%zd组---第%zd个cell-----高亮", indexPath.section, indexPath.row);
}


/**
 *  cell取消高亮时候调用
 */
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath {
    
    NSLog(@"第%zd组---第%zd个cell--取消---高亮", indexPath.section, indexPath.row);
}

/**
 *  cell是否可以点击，NO：没有点击cell的功能，但是高亮存在
 */
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    
    return NO;
}

/** 长按显示菜单 */
- (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}
- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender {
    NSLog(@"%@", NSStringFromSelector(action));
    return YES;
}
- (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender {
    NSLog(@"%@", sender);
}

#pragma mark - UICollectionViewDelegateFlowLayout
/**
 *  cell的尺寸
 */
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section ==0) {
        return CGSizeMake(50, 50);
        
    }else {
        return CGSizeMake(80, 80);
    }
}

/**
 *  cell左右间距
 */
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 100;
}

/**
 *  cell上下间距
 */
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 50;
}

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

前面说到的头视图CollectionHeaderReusableView是我自定义的，它的类定义如下：

CollectionHeaderReusableView.h

#import <UIKit/UIKit.h>

@interface CollectionHeaderReusableView : UICollectionReusableView

@property (nonatomic, weak) UIView *blueView;

@end

CollectionHeaderReusableView.m

#import "CollectionHeaderReusableView.h"

@implementation CollectionHeaderReusableView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        UIView *blueView = [[UIView alloc] init];
        blueView.backgroundColor = [UIColor blueColor];
        [self addSubview:blueView];
        self.blueView = blueView;
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    self.blueView.frame = CGRectMake(0, 0, 10, 10);
}

@end

到这里简单的UIcollectionView就介绍完了。