相比于UITableView这个老朋友，UICollectionView的确是青出于蓝而胜于蓝。它拥有同UITableView同样优雅的设计方式，使用dataSource和delegate分别获取数据源和回调，这让已经习惯使用UITableView的我们见到它时并不会感到陌生，反而是字里行间都透着熟悉。不过UICollectionView更胜一筹的地方就在于它将需要展示的内容的布局方式独立的抽离了出来，这就使它的布局能够由你自由定制，万千可能。
在你的项目工程中，你是否已经使用了UICollectionView呢？还是仍然是UITableView的主场呢？下面Demo分别展示了UICollectionView的基本使用和自定义layout实现瀑布流效果。其中瀑布流效果的代码源自http://www.jianshu.com/p/126bfc28c400
Demo地址:https://github.com/huibaoer/Demo_CollectionView.git
1. UICollectionView 基本使用
在demo中FirstViewController.m中创建collectionView对象，collectionView对象的创建需要UICollectionViewLayout的对象作为参数，这里使用UICollectionViewLayout的子类UICollectionViewFlowLayout实例化，其他设置类似tableView。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
CGFloat viewWidth = self.view.bounds.size.width;
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
flowLayout.minimumInteritemSpacing = 1;
flowLayout.minimumLineSpacing = 1;
flowLayout.itemSize = CGSizeMake((viewWidth-1)/2.0, (viewWidth-1)/2.0);
//需要设置header和footer的size，否则viewForSupplementaryElementOfKind不执行
flowLayout.headerReferenceSize = CGSizeMake(viewWidth, 20);
flowLayout.footerReferenceSize = CGSizeMake(viewWidth, 20);
_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.dataSource = self;
_collectionView.delegate = self;
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
[self.view addSubview:_collectionView];
}
下一步，需要设置dataSource和delegate。
#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 3;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 33;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
return cell;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
NSString *identifier = @"header";
if (kind == UICollectionElementKindSectionFooter) {
identifier = @"footer";
}
UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:identifier forIndexPath:indexPath];
return view;
}
#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"--GrayLeo-- tap indexPath(%ld, %ld)", (long)indexPath.section, (long)indexPath.row);
}
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0) {
cell.backgroundColor = [UIColor redColor];
}
- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0) {
view.backgroundColor = [UIColor greenColor];
}
至此，collectionView就可以正常呈现内容了。但是会发现我们的每个cell布局都是按照初始化时 UICollectionViewFlowLayout 的设置进行的，那么能不能为每个cell单独进行布局呢？这就要用到UICollectionViewDelegateFlowLayout了。
#pragma mark - UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGFloat width = (self.view.bounds.size.width-1)/2.0;
CGFloat random = arc4random()%40 + 10;
return CGSizeMake(width-random, width-random);
}
Deme中的collectionView的基本使用就这些，但是已经能够满足我们很多的需求了。
2.自定义UICollectionViewLayout实现瀑布流布局
自定义布局一般继承自UICollectionViewLayout，由于UICollectionViewFlowLayout是UICollectionViewLayout的子类，demo中是继承自UICollectionViewFlowLayout，一般自定义的布局类中需要重写UICollectionViewLayout (UISubclassingHooks)分类下的一些方法。详情可参见demo中CollectionViewWaterFlowLayout类，文章开头有瀑布流代码的原文地址。
