UI控件---CollectionView

1.创建一个UIView --- 创建UICollectionView放在view上 --- 在这之前先初始化UICollectionViewFlowLayout实例对象

#import <UIKit/UIKit.h>

@interface BCView : UIView
@property(nonatomic,strong)UICollectionView *collectionView;
@property(nonatomic,strong)UICollectionViewFlowLayout *layout;
@end

#import "BCView.h"
@implementation BCView
-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self creatCollectionView];
    }
    return self;
}
#pragma mark 创建collectionView
- (void)creatCollectionView
{
//    @property (nonatomic) CGSize headerReferenceSize;
//    @property (nonatomic) CGSize footerReferenceSize;
    // 创建flowLayout
    self.layout = [[UICollectionViewFlowLayout alloc] init];
    // 设置属性布局
    self.layout.footerReferenceSize = CGSizeMake(0, 40);
    self.layout.headerReferenceSize = CGSizeMake(0, 40);
    // 设置cell的大小
    self.layout.itemSize = CGSizeMake(100, 115);
    // 设置cell之间的间隔
    // 上下行之间的距离
    self.layout.minimumLineSpacing = 10;
    // 左右列之间的距离
    self.layout.minimumInteritemSpacing = 10;
    // 设置滑动方向
    // layOut.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置item的两边距离
    self.layout.sectionInset = UIEdgeInsetsMake(30, 18, 30, 18);
    // 创建UICollectionView的时候必须指定布局（UICollectionViewFlowLayout）
    self.collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:self.layout];
    // 默认背景色---黑色
    self.collectionView.backgroundColor = [UIColor groupTableViewBackgroundColor];
    [self addSubview:self.collectionView];
}
@end

 2.UIViewController

   》Json数据转模型数据

   》根据模型数据来设置UICollectionViewCell

    类似于UITableView先给collectionView注册UICollectionViewCell

    // 注册 --- 给CollectionView注册cell
    // [self.rootView.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCel"];
    [self.rootView.collectionView registerClass:[BCMyCollectionViewCell class] forCellWithReuseIdentifier:@"BCMyCollectionViewCell"];

  》这里自定义cell

#import <UIKit/UIKit.h>
@interface BCMyCollectionViewCell : UICollectionViewCell
@property(nonatomic,strong)UIImageView *headerImageView;
@property(nonatomic,strong)UILabel *textLabel;
#pragma mark 创建view
- (void)creatAllViews;
- (void)updateFram;
@end


#import "BCMyCollectionViewCell.h"
@implementation BCMyCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) { 
      //[self creatAllViews];
    }
    return self;
}

#pragma mark 创建view
- (void)creatAllViews
{
    [self.headerImageView removeFromSuperview];
    self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, (self.frame.size.height/5)*4)];
    [self.contentView addSubview:self.headerImageView];
    [self.textLabel removeFromSuperview];
    self.textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, (self.frame.size.height/5)*4, self.frame.size.width, self.frame.size.height/5)];
    // 居中
    self.textLabel.textAlignment = NSTextAlignmentCenter;
    [self.contentView addSubview:self.textLabel];
}

- (void)updateFram
{
    self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, (self.frame.size.height/5)*4)];
    self.textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, (self.frame.size.height/5)*4, self.frame.size.width, self.frame.size.height/5)];
}

 》代理方法设置分组的个数，每个分组的item数量，cell显示的内容--- UICollectionViewDataSource,UICollectionViewDelegate

#pragma mark 代理方法
// 分组的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 5;
}
// 设置item个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{

   return self.dataArray.count;
}
// 设置展示的内容(设置cell)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cell_id = @"BCMyCollectionViewCell";
    // 去重用队列里面寻找cell
    BCMyCollectionViewCell *myCell = [collectionView dequeueReusableCellWithReuseIdentifier:cell_id forIndexPath:indexPath];
    myCell.backgroundColor = [UIColor whiteColor];
    //[myCell updateFram];
    [myCell creatAllViews];
    // NSLog(@"%@",cell.contentView);
    BCModel *model = self.dataArray[indexPath.row];
    //self.rootView.layout
    [myCell.headerImageView sd_setImageWithURL:[NSURL URLWithString:model.thumbURL]];
    myCell.textLabel.text = [NSString stringWithFormat:@"第%ld张",indexPath.row+1];

    return myCell;
    
}

 》设置每个分组的头部和尾部 --- 先注册

// 注册头部和尾部
    // 注册头部 --- UICollectionElementKindSectionHeader
     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    // 注册尾部
     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];

#pragma mark 代理方法 --- 设置 collectionView的头部和尾部
// collectionView的头部和尾部也需要重用 --- 先注册
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    // 头部
    if (kind == UICollectionElementKindSectionHeader) {
        // 重用队列里面去找头部
        UICollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath];
        // 直接添加按钮
        UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 2, 100, 60)];
        [button setTitle:@"哈哈哈" forState:UIControlStateNormal];
        [reusableView addSubview:button];
        
        reusableView.backgroundColor = [UIColor lightGrayColor];
        return reusableView;
    }
        // 重用队列去寻找尾部
        UICollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath];
        reusableView.backgroundColor = [UIColor redColor];
        return reusableView;
}

 》设置cell的尺寸（大小）--- 优先级最高

#pragma mark 设置cell的大小 --- 设置每个cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{

    BCModel *model = self.dataArray[indexPath.row];
    self.rootView.layout.itemSize = CGSizeMake([model.width floatValue]/4, [model.height floatValue]/4);
    return self.rootView.layout.itemSize;
    
}