UICollectionView类似我们常用的UITableView,但是还是有一些区别,就简单记录一下。
新建一个项目工程,打开StoryBoard,删除原有的控制器,选择CollectionVIewControl并拖到中间,从右边选择CollectionVIewControl
![](http://upload-images.jianshu.io/upload_images/1334324-2e618ed6587b7595.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
打开ViewController.h文件,把父类改为UICollectionViewController
![](http://upload-images.jianshu.io/upload_images/1334324-247dcff3e5929966.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
打开VIewController.m文件,添加下面代码
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 80; } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath]; cell.backgroundColor = [UIColor grayColor]; return cell; }
再打开StoryBoard,找到CollectionViewCell,添加Identifier标识
![](http://upload-images.jianshu.io/upload_images/1334324-efec2212bb5d5569.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
运行模拟器,结果如下图。
![](http://upload-images.jianshu.io/upload_images/1334324-e65d8e9e7e16143b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、UICollectionView添加Header和Footer
打开StoryBoard,找到UICollectionView,把右边的Section Header和Section Footer勾上。
![](http://upload-images.jianshu.io/upload_images/1334324-e13138d87ee78677.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
你就会看到在Cell的上面的下面多了View,这两个View就是Section Header和Section Footer
![](http://upload-images.jianshu.io/upload_images/1334324-f7f52d5dd26bf53a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
设计Section Header 和Section Footer的样式,Header添加ImageView和Label,Footer添加ImageView,并给Footer的ImageView设置图片
![](http://upload-images.jianshu.io/upload_images/1334324-eb359344c27037f0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在Atteributes inspector中设置header view的identifier为“HeaderView”,同样的把footer view的identifier设置为“FooterView”。
![](http://upload-images.jianshu.io/upload_images/1334324-a8cc405507d8e6be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/1334324-9c5b0c9b78910481.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
添加Header View新类
因为在默认情况下,header和footer view和UICollectionResuable类相关联。为了在header view中显示我们需要的背景和标题,我们必须创建一个新的继承自UICollectionResuableView的类,我们可以命名为CollectionResuableHeaderView。
![](http://upload-images.jianshu.io/upload_images/1334324-c1fda5e65745fa46.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/1334324-45a465ab9ef08ac9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
拖线
![](http://upload-images.jianshu.io/upload_images/1334324-fe44b035e7246b47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
@interface CollectionResuableHeaderView :UICollectionReusableView @property(weak,nonatomic)IBOutlet UILabel *titleName; @property(weak,nonatomic)IBOutlet UIImageView *imageView; @end
实现viewForSupplementaryElementOfKind方法
打开VIewController.m文件,添加下面代码
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { static NSString *headerID = @"HeaderView"; static NSString *footerID = @"FooterView"; UICollectionReusableView *reusableView = nil; if (kind == UICollectionElementKindSectionHeader) { CollectionResuableHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerID forIndexPath:indexPath]; NSString *title = [[NSString alloc] initWithFormat:@"Group #%li",indexPath.section+ 1]; headerView.titleName.text = title; UIImage *headerImage = [UIImage imageNamed:@"head"]; headerView.imageView.image = headerImage; reusableView = headerView; }else if(kind == UICollectionElementKindSectionFooter){ UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerID forIndexPath:indexPath]; reusableView = footerview; } return reusableView; }
运行截图如下
![](http://upload-images.jianshu.io/upload_images/1334324-fb82f7e23f37e858.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)