UICollectionView的使用

使用瀑布样式列表，即UICollectionView。使用时自定义collectionCell，自定义header，自定义footer。

UICollectionView是继承scrollview的子类，功能与UITableView相似

区别在于如下（使用注意事项）：

1、实例化时，多一个设置滚动方向的属性

2、多一个设置UI视图布局的代理协议，以及相关的代理方法

3、每个section中的每个row可以显示多个item

4、一般使用时，使用自定义的UICollectionViewCell视图、UICollectionReusableView页眉、UICollectionReusableView页脚视图（因为系统自带的没有相关字符及图标等的设置方法）

#import "ViewController.h"
#import "CollectionViewHeader.h"
#import "CollectionViewFooter.h"
#import "CollectionViewCell.h"
#import "CollectionVC.h"

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.title = @"瀑布视图";
    
    [self setUI];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)loadView
{
    [super loadView];
    self.view.backgroundColor = [UIColor whiteColor];
}

#pragma mark -视图

- (void)setUI
{
   //确定是水平滚动，还是垂直滚动
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:identifierCollectionViewCell];
    collectionView.allowsSelection = YES;
    collectionView.allowsMultipleSelection = NO;
    collectionView.alwaysBounceVertical = YES;
    collectionView.backgroundColor = [UIColor whiteColor];
    
    [collectionView registerClass:[CollectionViewHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:identifierCollectionViewHeader];
    [collectionView registerClass:[CollectionViewFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:identifierCollectionViewFooter];
    
    [self.view addSubview:collectionView];
}

#pragma mark - UICollectionViewDataSource

//定义展示的Section的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 5;
}

//添加一个补充视图(页眉或页脚)
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if ([kind isEqual:UICollectionElementKindSectionHeader])
    {
        CollectionViewHeader *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:identifierCollectionViewHeader forIndexPath:indexPath];
        
        headerView.titleLabel.text = [[NSString alloc] initWithFormat:@"%ld Section", indexPath.section];
        
        return headerView;
    }
    else if ([kind isEqual:UICollectionElementKindSectionFooter])
    {
        CollectionViewFooter *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:identifierCollectionViewFooter forIndexPath:indexPath];
        
        footerView.titleLabel.text = [[NSString alloc] initWithFormat:@"%ld Section", indexPath.section];
        
        return footerView;
    }
    
    return nil;
}

//定义展示的UICollectionViewCell的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (0 == section)
    {
        return 2;
    }
    else if (1 == section)
    {
        return 5;
    }
    else if (2 == section)
    {
        return 1;
    }
    return 10;
}

//每个UICollectionView展示的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifierCollectionViewCell forIndexPath:indexPath];
    
    NSString *title = [[NSString alloc] initWithFormat:@"%ld个", indexPath.row];
    cell.titlelabel.text = title;
    
    return cell;
}

#pragma mark - UICollectionViewDelegateFlowLayout

//定义每个UICollectionView的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(widthCollectionViewCell, heightCollectionViewCell);
}

//定义每个UICollectionView的 margin
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0.0, 10.0, 10.0, 10.0);
}

//最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10.0;
}

//最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 0.0;
}

//设定页眉的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    return CGSizeMake(widthCollectionViewHeader, heightCollectionViewHeader);
}

//设定页脚的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    return CGSizeMake(widthCollectionViewFooter, heightCollectionViewFooter);
}

#pragma mark - UICollectionViewDelegate

// UICollectionView被选中时调用的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    [collectionView deselectItemAtIndexPath:indexPath animated:YES];
}

//返回这个UICollectionView是否可以被选择
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

自定义UICollectionViewCell

.h文件
#import <UIKit/UIKit.h>

#define widthScreen ([[UIScreen mainScreen] bounds].size.width)

#define widthCollectionViewCell ((widthScreen - 10.0 * 3) / 2)
static CGFloat const heightCollectionViewCell = 100.0;

static NSString *const identifierCollectionViewCell = @"CollectionViewCell";

@interface CollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *imageview;
@property (nonatomic, strong) UILabel *titlelabel;
@property (nonatomic, strong) UILabel *detaillabel;

@end

.m文件
#import "CollectionViewCell.h"

static CGFloat const originXY = 10.0;
static CGFloat const heightImage = 60.0;
static CGFloat const heightLabel = 20.0;

@interface CollectionViewCell ()

@end

@implementation CollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.layer.borderWidth = 0.5;
        self.layer.borderColor = [UIColor redColor].CGColor;
        
        [self setUI];
    }
    
    return self;
}

#pragma mark - 视图

- (void)setUI
{
    // 60.0 + 20.0 + 20.0
    self.imageview.frame = CGRectMake(0.0, 0.0, (widthScreen - originXY * 3) / 2, heightImage);
    [self.contentView addSubview:self.imageview];
    
    UIView *currentView = self.imageview;
    
    self.titlelabel.frame = CGRectMake(currentView.frame.origin.x, (currentView.frame.origin.y + currentView.frame.size.height), currentView.frame.size.width, heightLabel);
    [self.contentView addSubview:self.titlelabel];
    
    currentView = self.titlelabel;
    
    self.detaillabel.frame = CGRectMake(currentView.frame.origin.x, (currentView.frame.origin.y + currentView.frame.size.height), currentView.frame.size.width, currentView.frame.size.height);
    [self.contentView addSubview:self.detaillabel];
}

#pragma mark - setter

- (UIImageView *)imageview
{
    if (!_imageview)
    {
        _imageview = [[UIImageView alloc] init];
        _imageview.backgroundColor = [UIColor orangeColor];
    }
    
    return _imageview;
}

- (UILabel *)titlelabel
{
    if (!_titlelabel)
    {
        _titlelabel = [[UILabel alloc] init];
        _titlelabel.backgroundColor = [UIColor greenColor];
        _titlelabel.textAlignment = NSTextAlignmentCenter;
    }
    
    return _titlelabel;
}

- (UILabel *)detaillabel
{
    if (!_detaillabel)
    {
        _detaillabel = [[UILabel alloc] init];
        _detaillabel.backgroundColor = [UIColor brownColor];
    }
    
    return _detaillabel;
}

@end

自定义表头header(UICollectionReusableView)

.h文件
#import <UIKit/UIKit.h>

#define widthScreen ([[UIScreen mainScreen] bounds].size.width)

#define widthCollectionViewHeader (widthScreen)
static CGFloat const heightCollectionViewHeader = 30.0;

static NSString *const identifierCollectionViewHeader = @"CollectionViewHeader";

@interface CollectionViewHeader : UICollectionReusableView

/// 标题标签
@property (nonatomic, strong) UILabel *titleLabel;

@end


.m文件
#import "CollectionViewHeader.h"

@interface CollectionViewHeader ()

@end

@implementation CollectionViewHeader

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.3];
        
        [self setUI];
    }
    return self;
}

#pragma mark - 视图

- (void)setUI
{
    self.titleLabel.frame = CGRectMake(10.0, 0.0, (widthCollectionViewHeader - 10.0 * 2), heightCollectionViewHeader);
    [self addSubview:self.titleLabel];
}

#pragma mark - setter

- (UILabel *)titleLabel
{
    if (!_titleLabel)
    {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.backgroundColor = [UIColor clearColor];
        _titleLabel.textColor = [UIColor blackColor];
        _titleLabel.font = [UIFont systemFontOfSize:16.0];
    }
    
    return _titleLabel;
}

@end

自定义表尾footer（UICollectionReusableView）

.h文件
#import <UIKit/UIKit.h>

#define widthScreen ([[UIScreen mainScreen] bounds].size.width)

#define widthCollectionViewFooter (widthScreen)
static CGFloat const heightCollectionViewFooter = 20.0;

static NSString *const identifierCollectionViewFooter = @"CollectionViewFooter";

@interface CollectionViewFooter : UICollectionReusableView

/// 标题标签
@property (nonatomic, strong) UILabel *titleLabel;

@end


.m文件
#import "CollectionViewFooter.h"

@implementation CollectionViewFooter

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.1];
        
        [self setUI];
    }
    return self;
}

#pragma mark - 视图

- (void)setUI
{
    self.titleLabel.frame = CGRectMake(10.0, 0.0, (widthCollectionViewFooter - 10.0 * 2), heightCollectionViewFooter);
    [self addSubview:self.titleLabel];
}

#pragma mark - setter

- (UILabel *)titleLabel
{
    if (!_titleLabel)
    {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.backgroundColor = [UIColor clearColor];
        _titleLabel.textColor = [UIColor redColor];
        _titleLabel.font = [UIFont systemFontOfSize:10.0];
    }
    
    return _titleLabel;
}

@end