UICollectionView的简单使用

自定义UICollectionViewCell
设置UICollectionViewCell大小
设置滚动方向（垂直滚动、水平滚动）
设置间距（垂直间距、水平间距）
自定义头部和底部

---

自定义UICollectionViewCell

---

@interface CollectionViewCell ()
@property (nonatomic, strong) UIImageView *goodsImageView;
@property (nonatomic, strong) UILabel *goodsNameLabel;
@end

@implementation CollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self createSubviews];
    }
    return self;
}

- (void)createSubviews
{
    self.backgroundColor = [UIColor clearColor];

    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;

    self.goodsImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
    self.goodsImageView.backgroundColor = [UIColor whiteColor];
    self.goodsImageView.layer.cornerRadius = 8.0;
    self.goodsImageView.clipsToBounds = YES;
    self.goodsImageView.image = [UIImage imageNamed:@"bg-mine"];

    self.goodsNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, height)];
    self.goodsNameLabel.textColor = [UIColor blackColor];
    self.goodsNameLabel.numberOfLines = 2;
    self.goodsNameLabel.font = [UIFont systemFontOfSize:14];
    self.goodsNameLabel.textAlignment = NSTextAlignmentCenter;
    self.goodsNameLabel.text = @"1234";

    [self.contentView addSubview:self.goodsImageView];
    [self.contentView addSubview:self.goodsNameLabel];
}

---

设置UICollectionViewCell大小
设置滚动方向（垂直滚动、水平滚动）
设置间距（垂直间距、水平间距）

// 控制器中UICollectionView的设置，包含

- (UICollectionView *)collectionView
{
    if (!_collectionView) {
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        // 设置UICollectionViewCell大小
        layout.itemSize = CGSizeMake(([UIScreen mainScreen].bounds.size.width - 50)/4, ([UIScreen mainScreen].bounds.size.width - 50)/4);
        // 设置头部尺寸
        layout.headerReferenceSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 40);
        // 设置底部尺寸
        layout.footerReferenceSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 20);
        layout.minimumLineSpacing = 10;
        layout.minimumInteritemSpacing = 10;
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;

        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) collectionViewLayout:layout];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.backgroundColor = [UIColor darkGrayColor];

        [_collectionView registerClass:[WDYCollectionViewCell class] forCellWithReuseIdentifier:identifier];
        [_collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerIdentifier"];
         [_collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerIdentifier"];
    }

    return _collectionView;
}

---

自定义头部、底部

注：自定义头部、底部时，必须继承UICollectionReusableView类

// HeaderView.h 中代码
@interface HeaderView : UICollectionReusableView

- (void)setTitle:(NSString *)title;

@end


// HeaderView.m 中代码实现
@interface HeaderView ()
@property (nonatomic, strong) UILabel *label;
@end

@implementation HeaderView

- (UILabel *)label
{
    if (!_label) {
        _label = [[UILabel alloc] init];
        _label.textAlignment = NSTextAlignmentLeft;
        _label.font = [UIFont systemFontOfSize:15];
        _label.textColor = [UIColor blackColor];
    }
    return _label;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self addSubview:self.label];
    }
    return self;
}

-(void)layoutSubviews
{
    self.backgroundColor = [UIColor whiteColor];
    self.label.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
}

- (void)setTitle:(NSString *)title
{
    self.label.text = title;
}

@end

---

控制器中代理方法的实现

注：需注意没有返回Cell大小的代理方法，也没有返回头部与底部大小的方法；
这两种方法都放在UICollectionViewFlowLayout对象里实现了。

#pragma mark - UICollectionView的代理方法
// 分组数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 3;
}
// 每个分组中item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 5;
}
//
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    WDYCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

    return cell;
}
// 选择事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"选择了");

    // 选中、改变相应属性后，进行局部刷新
    [self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
}
// 头部和底部视图(头部、底部视图必须继承至UICollectionReusableView)
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        // 该视图必须继承至UICollectionReusableView
        HeaderView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerIdentifier" forIndexPath:indexPath];
        [view setTitle:@"头部"];
        // 返回头部视图
        return view;
    }
    if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
        // 返回底部视图
        FooterView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerIdentifier" forIndexPath:indexPath];
        [view setTitle:@"尾部"];
        return view;
    }
    return nil;
}

---

效果图如下：