UICollectionView-优快云博客

UICollectionView是一种新的数据展示方式，简单来说可以把它理解成多列的UITableView，支持IOS6以上。

集合视图UICollectionView和表视图UITableView很相似，可根据layout属性设置，显示单元格集合内容。 UICollectionViewDataSource类作为集合视图的数据源，向集合视图提供数据。集合视图依赖于委托（Delegate）中定义的方法对用户交互进行响应。
构成集合视图的三个要素，分别为：单元格（UICollectionViewCell）、补充视图（Supplementary Views-显示额外的元数据信息）和装饰视图（Decoration Views）。

初始化:

//初始化布局类(UICollectionViewLayout的子类)
UICollectionViewFlowLayout *fl = [[UICollectionViewFlowLayout alloc]init];

//初始化collectionView
self.collectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:fl];

//设置代理
self.collectionView.delegate = self;
self.collectionView.dataSource = self;

--------------------

需要实现的协议:
UICollectionViewDataSource, UICollectionViewDelegateFlowLayout
PS:UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子协议

--------------------

注册相应的UICollectionViewCell子类到collectionView用来从队列提取和显示
- (void)registerClass:(Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
PS:如果是用nib创建的话，使用下面这个函数来注册。
- (void)registerNib:(UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier;

如果需要显示每个section的headerView或footerView，则还需注册相应的UICollectionReusableView的子类到collectionView
elementKind是header或footer的标识符，只有两种可以设置UICollectionElementKindSectionHeader和UICollectionElementKindSectionFooter
- (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier;
PS:如果是用nib创建的话，使用下面这个函数来注册。
- (void)registerNib:(UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier;

--------------------

实现协议的函数:
跟UITableView的DataSource和Delegate很像，大可自行代入理解。

DataSource:

//每一组有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

//定义并返回每个cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

//collectionView里有多少个组
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

//定义并返回每个headerView或footerView
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

上面这个方法使用时必须要注意的一点是，如果布局没有为headerView或footerView设置size的话(默认size为CGSizeZero)，则该方法不会被调用。所以如果需要显示header或footer，需要手动设置size。
可以通过设置UICollectionViewFlowLayout的headerReferenceSize和footerReferenceSize属性来全局控制size。或者通过重载以下代理方法来分别设置
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

Delegate:

//每一个cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

//设置每组的cell的边界
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

//cell的最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

//cell的最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

//cell被选择时被调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;

//cell反选时被调用(多选时才生效)
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;

具体事例：

一、自定义Cell

1、新建类CollectionCell继承自UICollectionViewCell

2、新建Xib，命名为CollectionCell.xib：

2.1选中CollectionCell.xib删掉默认的View，从控件中拖一个Collection View Cell到画布中，并设置大小

2.2选中刚刚添加的Cell，更改类名为CollectionCell。

2.3创建映射，

2.4在CollectionCell.m , 重写init方法

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

NSArray * nibs=[[NSBundlemainBundle]loadNibNamed:@"CollectionCell"owner:selfoptions:nil];

for (id objin nibs) {

if ([obj isKindOfClass:[CollectionCellclass]]) {

self =(CollectionCell *)obj;

}

// // 初始化时加载collectionCell.xib文件

// NSArray *arrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"CollectionCell" owner:self options: nil];

// // 如果路径不存在，return nil

// if(arrayOfViews.count < 1){return nil;}

// // 如果xib中view不属于UICollectionViewCell类，return nil

// if(![[arrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]]){

// return nil;

// }

// // 加载nib

// self = [arrayOfViews objectAtIndex:0];

}

return self;

}

二、定义UICollectionView

1、拖动一个Collection View到指定ViewController的View上

2、连线dataSource和delegate，并创建映射，命名为CollectionView

3、选中CollectionView的标尺，将Cell Size的Width和Height改成与自定义的Cell一样大小

4、选中CollectionView的属性,可以修改其属性，比如是垂直滑动，还是水平滑动，选择Vertical或Horizontal

5、在ViewDidLoad方法中声明Cell的类，在ViewDidLoad方法中添加，此句不声明，将无法加载

- (void)viewDidLoad

{

[super viewDidLoad];

[self.CollectionViewregisterClass:[CollectionCellclass]forCellWithReuseIdentifier:kCellID];

},此外的kCellID的是自定义的cell ID;

6、在ViewController.h中声明代理

@interface ViewController :UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>

7、在.m文件中实现代理方法，运行就OK了。

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
// 每个Section的item个数
> // 图片的名称
NSString *imageToLoad = [NSString> // 设置imageView的图片
> return cell;
}

代码：http://download.youkuaiyun.com/detail/quanqinayng/6758719