1：将SDWebImage文件夹的类库导入工程，创建一个模型对象Model类，并声明好它的属性，再创建一个继承自UICollectionViewCell的自定义类

2：在自定义cell类中重写

- (instancetype)initWithFrame:(CGRect)frame {

self = [super initWithFrame:frame];

if (self) {

self.imageView = [[UIImageView alloc] init];

self.imageView.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);

[self.contentView addSubview:_imageView];

_imageView.backgroundColor = [UIColor blueColor];

}

return self;

}

3：创建一个增广视图的类继承自 UICollectionReusableView，然后将需要显示的控件声明成属性，重写初始化方法

- (instancetype)initWithFrame:(CGRect)frame {

self = [super initWithFrame:frame];

if (self) {

self.headerLabel = [[UILabel alloc] initWithFrame:frame];

self.headerLabel.textAlignment = NSTextAlignmentCenter;

self.headerLabel.font = [UIFont systemFontOfSize:40];

[self addSubview:_headerLabel];

}

return self;

}

4：在viewController的.m文件中开始编写代码

1）：创建collectionView的注意事项：

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

　　然后通过layout设置相关属性

UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:layout];

　collectionView.dataSource = self;

//cell要显示内容的话必须注册显示的控件类

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

[collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

2）：解析数据

- （void）handleData {

　　NSString *filePath = [ [NSBundle mainBundle] pathForSource:@"Data" ofType:@"json"];

　　NSData *data = [NSData dataWithContentOfFilePath:filePath];

　　NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil ] ;

　　_dataArray = [[NSMutableArray alloc] initWithCapacity:0];

　　for (NSDictionary *dic in array) {

　　   Model *model = [[Model alloc] init];

[model setValuesForKeysWithDictionary:dic];

[_dataArray addObject:model];

}

}

3）：实现datasource的代理方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

return 1;

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

return [_dataArray count];

}

4）：实现两个非常重要的方法

a:cell的使用的方法

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];

Model *model = _dataArray[indexPath.row];

　　NSURL *url = [NSURL URLWithString:model.thumbURL];

　　[cell.imageView sd_setImageWithURL:url placeholderImaeg:[UIImage imageNamed:@"3.png"]];

　　return cell;

}

b：增广视图使用的方法

- (UICollectionReusableView *)

collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];//此处的类是MyCollectionReusableView

view.headerLabel.text = @"网络图片";

return view;

}

return nil;