UICollectionView的基本使用

UICollectionView在目前的iOS开发中，使用非常广泛。它继承自UIScrollView，可以根据需要自定义各种各样复杂的布局。

使用

遵循两个协议
数据源协议UICollectionViewDataSource
代理方法协议UICollectionViewDelegate
注册cell

[collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];

布局参数对象UICollectionViewFlowLayout
这也是UICollectionView的精髓所在，正是通过它，我们才实现了UICollectionView各式各样的布局。

系统提供了两个UICollectionView的布局类：
1.UICollectionViewLayout
是一个抽象类，我们在自定义布局的时候可以继承此类，并在此基础上设置布局信息。
2.UICollectionViewFlowLayout
继承于UICollectionViewLayout，是系统写好的布局类，该类为我们提供了一个简单的布局样式。假如我们只需要一个特别简单的网格布局或者流水布局，可以直接使用它。

创建

不能用init的方式，因为必须提供一个不为空的layout布局参数，给它布局。

1、创建流水布局layout

在其中设定相关属性，如Item的大小等

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    // 设置item的行间距和列间距
    layout.minimumInteritemSpacing = kLineSpacing;
    layout.minimumLineSpacing = kLineSpacing;

    // 设置item的大小
    CGFloat itemW = kScreenWidth / 2.5 ;
    layout.itemSize = CGSizeMake(itemW, itemW);

    // 设置每个分区的 上左下右 的内边距
    layout.sectionInset = UIEdgeInsetsMake(5, 5 ,5, 5);
    
    // 设置区头和区尾的大小
    layout.headerReferenceSize = CGSizeMake(kScreenWidth, 65);
    layout.footerReferenceSize = CGSizeMake(kScreenWidth, 65);

    // 设置分区的头视图和尾视图 是否始终固定在屏幕上边和下边
    layout.sectionFootersPinToVisibleBounds = YES;

    // 设置滚动条方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

2、利用layout 创建collecView

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
    collectionView.backgroundColor = [UIColor witheColor];
    collectionView.showsVerticalScrollIndicator = NO;   //是否显示滚动条
    collectionView.scrollEnabled = YES;  //滚动使能

    //3、添加到控制器的view
    [self.view addSubview:collectionView];
    _mainCollectionView = collectionView;

    //4、布局
    [_mainCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.bottom.right.equalTo(self.view);
    }];

5、注册cell

一般是自定义的cell。需要注册不同的cell，可由不同的cell的ID决定。

    [self.mainCollectionView registerClass:[PDcollectionVertivalCell class] 
forCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID"];

6、注册头部视图

    [self.mainCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER"];

7、遵守协议，设置代理

<UICollectionViewDelegate,UICollectionViewDataSource>

    self.mainCollectionView.delegate = self;
    self.mainCollectionView.dataSource = self;

数据源方法

#pragma mark -collectionview 数据源方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 6;   //返回section数
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return self.normalGoodLists.count;  //每个section的Item数
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    创建item / 从缓存池中拿 Item
    PDcollectionVertivalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID" forIndexPath:indexPath];
    // 外界在此给Item添加模型数据
    if(self.normalGoodLists.count > 0){
        PDshopItem *item = self.normalGoodLists[indexPath.item];
        cell.cheapShopItem = item;
    }
    return cell;
    
}

创建头部视图

#pragma mark - 头部视图
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER" forIndexPath:indexPath];
    // ID必须与注册ID一样
   
    if(indexPath.section == 0){
        
        [headView addSubview:self.cycleScrollView];  //任何自定义view
        [self.cycleScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.left.bottom.right.equalTo(headView);
        }];
        return headView;
    }
}

#pragma mark - 头部视图的尺寸
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    
    if(section ==0 ){
        
        return CGSizeMake(screenW, 0.4*screenW);
    }
    else if(section ==1 ){
        
        return CGSizeMake(screenW, 0.25253*screenW);
    }
}

代理方法--点击事件

#pragma mark - 点击 某个Item时 调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    [collectionView deselectItemAtIndexPath:indexPath animated:YES];//取消选中
    //do something ...
}

UICollectionViewCell

UICollectionView的item，就是一个cell。

cell的内容——自定义
默认的cell是UICollectionViewCell对象，它没有任何子控件，所以必须自定义cell（继承自UICollectionViewCell），添加所需的子控件。
cell的属性——由flowlayout决定，在创建流水布局参数时设定好。

自定义cell

继承自UICollectionViewCell，在.h文件中，添加数据模型属性，用于后续设置cell的内容

#import <UIKit/UIKit.h>
#import "PDshopItem.h"


@interface PDcollectionViewCell : UICollectionViewCell

@property(nonatomic,strong)PDshopItem *shopItem;    //数据模型

@end

在.m文件中

@interface PDcollectionViewCell()

@property(nonatomic,weak)UIImageView *shopImgView;
@property(nonatomic,weak)UILabel *shopNameLabel;

@end

// 在init方法中添加子控件
-(id)initWithFrame:(CGRect)frame{

    if([super initWithFrame:frame]){
    //创建子控件、布局
    ... ... 
    }
    return self;
}

// 重写属性的set方法，给子控件设置数据
-(void)setShopItem:(PDshopItem *)shopItem{
    _shopItem = shopItem;
    
    self.shopNameLabel.text = shopItem.goodName;
    ... ...
 }