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;