UICollectionView简介

UICollectionView在iOS6.0以后引进,与UITableView比较相似。但是UICollectionView将布局完全交给UICollectionViewLayout，而且允许用户自定义layout来进行布局。使其功能比UITableView更加强大、布局更加灵活，迅速在各大APP广泛使用。

本篇将对UICollectionView的使用进行简单介绍，主要包括UICollectionView的视图组成、数据源、常用代理方法以及UICollectionViewFlowLayout的使用。下一遍将会详细讲解UICollectionViewLayout的自定义布局。

UICollectionView的视图组成：

UICollectionView由cell视图、Supplementary View和Decoration View三部分组成。

cell视图

这个大家应该都很清楚，UICollectionView主要内容展示的视图

Supplementary View

对于每组section的信息视图，类似于UITableView的header或者footer

Decoration View

装饰视图，好像很少使用

cell视图跟Supplementary View使用是需要先进行注册以便实现复用： 注册cell的方法，第一个是代码创建，第二个是xib创建 - (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier; - (void)registerNib:(nullable UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier; 注册Supplementary View的方法，第一个是代码创建，第二个是xib创建 - (void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier; - (void)registerNib:(nullable UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier; 在数据源回调中复用的方法： - (__kindof UICollectionViewCell *)dequeueReusableCellWithReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath; - (__kindof UICollectionReusableView *)dequeueReusableSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath; ***上面方法的的kind和elementKind参数用来区分是头部视图还是尾部视图

UICollectionView的数据源代理方法：

//必须实现的数据源代理 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section; - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; //可选数据源代理 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView; - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath; 处理移动相关（详细使用看demo） - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0); - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath NS_AVAILABLE_IOS(9_0);

UICollectionView的常用代理方法：

//点击cell高亮相关 - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath; //cell选中相关 - (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath; // called when the user taps on an already-selected item in multi-select mode - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath; //cell以及Supplementary View绘制相关 - (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0); - (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0); - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath; ***这几个方法可以添加简易的动画,例如添加如下几句代码，cell加载的时候将会有放缩等效果。 - (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0) { cell.contentView.alpha = 0; cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0, 0), 0); [UIView animateKeyframesWithDuration:.5 delay:0.0 options:0 animations:^{ /** * 分步动画 第一个参数是该动画开始的百分比时间 第二个参数是该动画持续的百分比时间 */ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.8 animations:^{ cell.contentView.alpha = .5; cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(1.2, 1.2), 0); }]; [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{ cell.contentView.alpha = 1; cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(1, 1), 0); }]; } completion:^(BOOL finished) { }]; } //长按显示菜单相关：(demo中有详细使用) - (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender; - (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender; //转场相关（下一篇会讲解） - (nonnull UICollectionViewTransitionLayout *)collectionView:(UICollectionView *)collectionView transitionLayoutForOldLayout:(UICollectionViewLayout *)fromLayout newLayout:(UICollectionViewLayout *)toLayout;

UICollectionViewFlowLayout && UICollectionViewLayout：

UICollectionView之所以比UITableView强大，主要在于其精髓UICollectionViewLayout的布局。它通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的 位置 、 transform 、 alpha 、 hidden 等等。先看看系统为我们提供的UICollectionViewFlowLayout布局的使用吧。

UICollectionViewFlowLayout 的常用属性

//决定了每行的间隔 @property (nonatomic) CGFloat minimumLineSpacing; //决定了Item之间的间隔 @property (nonatomic) CGFloat minimumInteritemSpacing; //cell的大小（如果实现的代理该设置无效） @property (nonatomic) CGSize itemSize; //cell大小的预计算 @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes: //布局的方向 @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical //头视图跟尾视图的大小（横向的时候，headerReferenceSize.width有效，headerReferenceSize.height无效。纵向时相反） @property (nonatomic) CGSize headerReferenceSize; @property (nonatomic) CGSize footerReferenceSize; //间距 @property (nonatomic) UIEdgeInsets sectionInset; // Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView). @property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0); @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

UICollectionViewFlowLayout 的代理方法

//基本就是上面的属性通过代理的方法返回 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath; - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section; - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section; - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section; - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section; - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section; 文／阿聪o（简书作者） 原文链接：http://www.jianshu.com/p/b0d03c40fd65 著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。