作者唯一QQ:228544117;

一.简单介绍

UICollectionView 这个类是iOS6

新引进的API，它的布局更加灵活，简单来说就是多列的UITableView,那么UICollectionView的实现和UITableView的实现基本一样，也是存在datasource和delegate的，其中datasource为view提供数据源，告诉view要显示些什么东西以及如何显示它们，delegate提供一些样式的小细节以及用户交互的相应，除此之外UICollectionView还有一个不得不提的就是UICollectionViewLayout。

二.UICollectionView里面常用的方法(列举其中常用的，具体的请查看相关的API)

/** 使用class或者xib注册UICollectionViewCell*/

- (void)registerClass:(nullableClass)cellClass forCellWithReuseIdentifier:(NSString*)identifier;- (void)registerNib:(nullableUINib*)nib forCellWithReuseIdentifier:(NSString*)identifier;

/** 先会从缓存池中取,如果没有会自动为我们创建cell，而不像之前那样还要我们自己去创建*/

- (__kindofUICollectionViewCell*)dequeueReusableCellWithReuseIdentifier:(NSString*)identifier forIndexPath:(NSIndexPath*)indexPath;

/** 如果需要给每组的collectionview加上一个headerView或者footerView的话，就要用到这个方法，同样也是先从缓存池中取，没有自动创建,elementKind是需要创建的是头部还是底部两种类型*/-

(__kindofUICollectionReusableView*)dequeueReusableSupplementaryViewOfKind:(NSString*)elementKind withReuseIdentifier:(NSString*)identifier forIndexPath:(NSIndexPath*)indexPath;

/** 总共多少组*/- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView;

/** 每组中cell的个数*/

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

/** 每个cell的尺寸*/

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

/** 头部的尺寸*/

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

/** 顶部的尺寸*/

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

/** section的margin*/

- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section ;

/** 选中某一个cell*/

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

三.用代码实现简单的collectionView

#pragma mark -- lazy load

- (UICollectionView*)collectionView {if(_collectionView ==nil) {

UICollectionViewFlowLayout*layout = [[UICollectionViewFlowLayoutalloc] init];

// 设置collectionView的滚动方向，需要注意的是如果使用了collectionview的headerview或者footerview的话， 如果设置了水平滚动方向的话，那么就只有宽度起作用了了[layout setScrollDirection:UICollectionViewScrollDirectionVertical];

// layout.minimumInteritemSpacing = 10;

// 垂直方向的间距// layout.minimumLineSpacing = 10;

// 水平方向的间距_collectionView = [[UICollectionViewalloc] initWithFrame:self.view.bounds collectionViewLayout:layout];        _collectionView.backgroundColor = [UIColorwhiteColor];     

  _collectionView.dataSource =self;       

_collectionView.delegate =self;   

}

return_collectionView;}

#pragma mark -- life cycle

- (void)viewDidLoad {

  [superviewDidLoad];

self.navigationItem.title =@"UICollectionView Demo";

self.navigationController.navigationBar.barTintColor = [UIColorredColor];   

[self.view addSubview:self.collectionView];

// 注册collectionViewcell:WWCollectionViewCell是我自定义的cell的类型[self.collectionView registerClass:[WWCollectionViewCellclass] forCellWithReuseIdentifier:@"cell"];

// 注册collectionView头部的view，需要注意的是这里的view需要继承自UICollectionReusableView[self.collectionView registerNib:[UINibnibWithNibName:@"WWCollectionReusableView"bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"header"];

// 注册collectionview底部的view,需要注意的是这里的view需要继承自

UICollectionReusableView[self.collectionView registerNib:[UINibnibWithNibName:@"WWCollectionFooterReusableView"bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithReuseIdentifier:@"footer"];}#pragma mark -- UICollectionViewDataSource

/** 每组cell的个数*/

- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section {return15;}

/** cell的内容*/

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

WWCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];    cell.backgroundColor = [UIColoryellowColor];    cell.topImageView.image = [UIImageimageNamed:@"1"];  

cell.bottomLabel.text = [NSStringstringWithFormat:@"%zd.png",indexPath.row];}

/** 总共多少组*/

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView {return6;}

/** 头部/底部*/

- (UICollectionReusableView*)collectionView:(UICollectionView*)collectionView viewForSupplementaryElementOfKind:(NSString*)kind atIndexPath:(NSIndexPath*)indexPath{if([kind isEqualToString:UICollectionElementKindSectionHeader]) {

// 头部

WWCollectionReusableView *view =  [collectionView dequeueReusableSupplementaryViewOfKind :kind  withReuseIdentifier:@"header"forIndexPath:indexPath];        view.headerLabel.text = [NSStringstringWithFormat:@"头部 - %zd",indexPath.section];returnview;   

}

else

{

// 底部

WWCollectionFooterReusableView *view =  [collectionView dequeueReusableSupplementaryViewOfKind :kind  withReuseIdentifier:@"footer"forIndexPath:indexPath];  

    view.footerLabel.text = [NSStringstringWithFormat:@"底部 - %zd",indexPath.section];

return view;

  }

}

#pragma mark -- UICollectionViewDelegateFlowLayout

/** 每个cell的尺寸*/

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath{returnCGSizeMake(60,60);}

/** 头部的尺寸*/

-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{returnCGSizeMake(self.view.bounds.size.width,40);

}

/** 顶部的尺寸*/

-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{returnCGSizeMake(self.view.bounds.size.width,40);

}

/** section的margin*/

- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

returnUIEdgeInsetsMake(5,5,5,5);

}

#pragma mark -- UICollectionViewDelegate

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

NSLog(@"点击了第 %zd组 第%zd个",indexPath.section, indexPath.row);

}

四.效果图

//好了写到这里 大致的逻辑就这  跟UITableview没什么太大的差距 

//欢迎一起交流探讨。