UICOllectionView-集合视图

一、集合视图的概念

1、如何创建UIColletionView

2、集合视图的布局UICollectionViewFlowLayyout

3、自定义cell

4、布局协议UICollectionViewDelegateFlowLayout

5、UICollectonView与UITableView的实现类似，都需要设置delegate和dataSource

6、在collectionView中,cell的布局比tableView要复杂，需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UICollectionViewFlowLayout

二、创建步骤

1.使用系统布局UICollectionViewFlowLayout

2.创建UICollectionView

3.设置代理，设置数据源

4.设置自定义Cell

数据源

我们需要给collectionView指定一个数据源，它负责给对collectionView提供数据与显示

#import"JYFViewController.h"

#import"Model.h"

#import"MyCell.h"

#import"MyHeader.h"

#import"MyFooter.h"

#import"UIImageView+WebCache.h"

@interfaceJYFViewController()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

@property(nonatomic,retain)NSMutableArray*allDataArray;

@end

@implementationJYFViewController

- (void)viewDidLoad

{

[superviewDidLoad];

// 1.获取文件路径

NSString*filePath = [[NSBundlemainBundle]pathForResource:@"Data"ofType:@"json"];

// 2.读取文件数据

NSData*data = [NSDatadataWithContentsOfFile:filePath];

// 3.解析数据

NSArray*array = [NSJSONSerializationJSONObjectWithData:dataoptions:NSJSONReadingAllowFragments error:nil];

// 4.遍历放入大数组中

self.allDataArray= [NSMutableArrayarray];

for(NSDictionary*dictinarray) {

Model*model = [Modelnew];

[modelsetValuesForKeysWithDictionary:dict];

[_allDataArrayaddObject:model];

[modelrelease];

NSLog(@"%@",_allDataArray);

}

// 1.创建UICollectionViewFlowLayout

UICollectionViewFlowLayout*flowLayout = [[UICollectionViewFlowLayoutalloc]init];

// 1.1设置每个Item的大小

flowLayout.itemSize=CGSizeMake(90,210);

// 1.2 设置每列最小间距

flowLayout.minimumInteritemSpacing=10;

// 1.3设置每行最小间距

flowLayout.minimumLineSpacing=10;

// 1.4设置滚动方向

flowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;

// 1.5设置header区域大小

flowLayout.headerReferenceSize=CGSizeMake(self.view.bounds.size.width,50);

// 1.6设置footer区域大小

flowLayout.footerReferenceSize=CGSizeMake(self.view.bounds.size.width,50);

// 1.7 设置item内边距大小

flowLayout.sectionInset=UIEdgeInsetsMake(10,10,10,10);

// 2.创建UICollectionView

UICollectionView*collectionView = [[UICollectionViewalloc]initWithFrame:self.view.boundscollectionViewLayout:flowLayout];

// 3.设置数据源代理、collection代理

collectionView.dataSource=self;

collectionView.delegate=self;

[self.viewaddSubview:collectionView];

[collectionViewrelease];

[flowLayoutrelease];

collectionView.backgroundColor= [UIColorcolorWithRed:0.895green:1.000blue:0.656alpha:1.000];

// 4.注册cell的类型和重用标示符

[collectionViewregisterClass:[MyCellclass]forCellWithReuseIdentifier:@"cell"];

// 5.注册footer和header类型的重用标识符

[collectionViewregisterClass:[MyHeaderclass]forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"headerView"];

[collectionViewregisterClass:[MyFooterclass]forSupplementaryViewOfKind:UICollectionElementKindSectionFooter

withReuseIdentifier:@"footerView"];

}

#pragma mark - UICollectionViewDataSource Methods

#pragma mark 设置有多少个section

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView

{

return5;

}

#pragma mark 设置某个分组有多少行

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

{

return13;

}

#pragma mark 设置某个Item显示什么内容

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

{

// 1.去重用队列中查找

MyCell*cell = [collectionViewdequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];

// 2.使用

//CGFloat red = arc4random()% 256 / 255.0;

//CGFloat green = arc4random() % 256 / 255.0;

//CGFloat blue = arc4random() % 256 / 255.0;

//cell.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];

cell.label.text= [NSStringstringWithFormat:@"s = %ld r =%ld", indexPath.section, indexPath.row];

// 3.获取将要显示的模型

Model*model =_allDataArray[indexPath.row];

// 4.使用第三方获取图片并自动缓存

NSURL*imageUrl = [NSURLURLWithString:model.thumbURL];

[cell.imageViewsd_setImageWithURL:imageUrlplaceholderImage:[UIImageimageNamed:@"default_head_image@2x.png"]];

returncell;

}

#pragma mark 处理点击事件

- (void)collectionView:(UICollectionView*)collectionView didSelectItemAtIndexPath:(NSIndexPath*)indexPath

{

NSLog(@"我被点击了");

}

#pragma mark - UICollectionViewDelegateFlowLayout Method

#pragma mark 设置item的大小

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath

{

returnCGSizeMake(90,120);

}

#pragma mark 设置footer和header

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

{

if(kind ==UICollectionElementKindSectionHeader) {

// 去重用队列取可用的header

MyHeader*reusableView = [collectionViewdequeueReusableSupplementaryViewOfKind:kindwithReuseIdentifier:@"headerView"forIndexPath:indexPath];

// 使用

reusableView.headerImage.image= [UIImageimageNamed:@"屏幕快照 2014-0 9.30.50 9-11 上午.png"];

// 返回

returnreusableView;

}else{

// 去重用队列取可用的footer

MyFooter*reusableView = [collectionViewdequeueReusableSupplementaryViewOfKind:kindwithReuseIdentifier:@"footerView"forIndexPath:indexPath];

// 使用

reusableView.backgroundColor= [UIColorredColor];

// 返回

returnreusableView;

}

}

#pragma mark 设置header和footer高度

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

returnCGSizeMake(self.view.bounds.size.width,70);

}

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

{

returnCGSizeMake(self.view.bounds.size.width,70);

}

- (void)didReceiveMemoryWarning

{

[superdidReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

- (void)dealloc

{

[_allDataArrayrelease];

[superdealloc];

}

@end

总结：

集合视图UICollectionView和表示图UITableView很相似，可根据layout属性设置，显示单元格集合内容

UICollectionViewDataSource类作为集合视图的数据源，向集合视图提供数据。集合视图依赖于委托（Delegate）中定义的方法对用户进行响应