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;
}