iOS: 玩转UICollectionViewLayout

前言：

实现垂直方向的单列表来说，使用UITableView足以；若是需要构建横向滑动列表、gridView等直线型布局，则使用UICollectionView+UICollectionViewFlowLayout搭建最合适；更复杂的布局，则可以使用UICollectionView+自定义Layout来实现。

文章的最后，笔者将会贴出使用自定义的UICollectionViewLayout实现的比较炫酷的动画，代码并非笔者原创，而是来自珲少,实现的思路，读者可参考原文。

demo已上传到github,方便读者下载；

译文：

UICollectionViewLayout是一个应该子类化的抽象基类，用来生成collection view的布局信息。 布局对象决定cell, 追加视图(supplementary views), 和 装饰视图(decoration views) 在collection view内部的位置，并在 collection view 获取的时候提供这些布局信息。collection view将把这些布局信息应用到相应的视图上以便在屏幕上进行展示。

如果想使用UICollectionViewLayout，你必须把它子类化。在子类化UICollectionViewLayout之前，应该先了解UICollectionViewFlowLayout，看看它是否已经能够满足你的布局需求。(注：UICollectionViewFlowLayout是官方提供的子类化的UICollectionViewLayout，能满足绝大部分需求)

子类化注意事项:

布局对象(layout object)主要用来为collection view的元素提供位置信息和状态信息(比如：选中状态，未选中状态等)。布局对象并不负责创建视图，这些视图是collection view的数据源(data source)创建的。布局对象只不过定义了这些视图的位置和大小。

Collection view有三种需要布局的视图元素。

  • Cells：
    cell是布局中的主要元素，在collection中每一个cell代表了一个单独的数据项。一个collection view 既可能只有唯一的一组cell，也可能把这一组cell分到多个 段(section)。布局对象的主要功能就是在 collection view的内容区对这些cell进行布局
  • supplementary views(追加视图)
    追加视图代表和cell完全不同的数据。补充视图不支持选中非选中状态，可以通过追加视图添加某个段的段头和段尾，或者整个collection view的段头和段尾。追加视图不是必选项，即实不实现都可以。追加视图的使用和布局也是由布局对象决定的。
  • Decoration views(装饰视图)
    装饰视图是用来装饰的视图，不支持选中非选中状态，和数据也没有内在的关联(不像cell和section需要返回个数)。装饰视图可以看作另一种类型的追加视图，和追加视图一样，它们的使用和布局也是由布局对象决定的。

Collection view在多个不同的时刻都会从它的布局对象获取这些元素的布局信。每一个呈现在屏幕上的cell和view，布局信息都来自布局对象。同样，在collection view插入或者删除item的时候,就会有相应的布局对象被加入或者删除。需要注意的是，collection view进行的布局限制在屏幕可见的范围之内。(注：即，即便创建了所有元素的布局对象，但是真正的布局只是在可见的范围内，超出屏幕的部分没有布局)

需要重写的方法 :

每一个布局对象需要实现接下来的几个方法

- (CGSize)collectionViewContentSize;

返回collectionView内容区的宽度和高度，子类必须重载该方法，返回值代表了所有内容的宽度和高度，而不仅仅是可见范围的，collectionView通过该信息配置它的滚动范围，默认返回 CGSizeZero。

- (NSArray<__kindofUICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

返回UICollectionViewLayoutAttributes 类型的数组，UICollectionViewLayoutAttributes 对象包含cell或view的布局信息。子类必须重载该方法，并返回该区域内所有元素的布局信息，包括cell,追加视图和装饰视图。
在创建 layout attributes的时候，创建的是相应元素类型(cell, supplementary, decoration)的 attributes对象,比如：

+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath *)indexPath;

collection view 根据不同的类型区分属性，并根据这些信息决定创建怎样的视图及如何进行管理。

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

返回指定indexPath的item的布局信息。子类必须重载该方法,该方法只能为cell提供布局信息，不能为补充视图和装饰视图提供。

- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

如果你的布局支持追加视图的话，必须重载该方法，该方法返回的是追加视图的布局信息，kind这个参数区分段头还是段尾的，在collectionview注册的时候回用到该参数。

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath;

如果你的布局支持装饰视图的话，必须重载该方法，该方法返回的是装饰视图的布局信息，ecorationViewKind这个参数在collectionview注册的时候回用到

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

该方法用来决定是否需要更新布局。如果collection view需要重新布局返回YES,否则返回NO,默认返回值为NO。子类重载该方法的时候，基于是否collection view的bounds的改变会引发cell和view布局的改变，给出正确的返回值。
如果collection view的bounds改变,该方法返回YES，collection view通过调用
invalidateLayoutWithContext方法使原来的layout失效

这些方法为collection view 在屏幕上布局提供了最基础的布局信息，如果你不想为追加视图和装饰视图布局，可以不去重载相应的方法。

当collection view的数据发生改变的时候，比如插入或者删除 item的时候，collection view将会要求布局对象更新相应的布局信息。移动、添加、删除 items时都必须更新相应的布局信息以便反映元素最新的位置。对于移动的元素， collection view提供了标准的方法获取更新后的布局信息。而collection view删除或者添加元素的时候，将会调用一些不同的方法，你应该重载以便提供正确的布局信息：

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath

在一个 item被插入到collection view 的时候，返回开始的布局信息。这个方法在 prepareForCollectionViewUpdates:之后和finalizeCollectionViewUpdates 之前调用。collection view将会使用该布局信息作为动画的起点(结束点是该item在collection view 的最新的位置)。如果返回为nil，布局对象将用item的最终的attributes 作为动画的起点和终点。

//返回值是追加视图插入collection view时的布局信息。该方法使用同initialLayoutAttributesForAppearingItemAtIndexPath:
- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingSupplementaryElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)elementIndexPath
//返回值是装饰视图插入collection view时的布局信息。该方法使用同initialLayoutAttributesForAppearingItemAtIndexPath:
- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)elementIndexPath


- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath

返回值是item即将从collection view移除时候的布局信息，对即将删除的item来讲，该方法在 prepareForCollectionViewUpdates: 之后和finalizeCollectionViewUpdates 之前调用。在该方法中返回的布局信息描包含 item的状态信息和位置信息。 collection view将会把该信息作为动画的终点(起点是item当前的位置)。如果返回为nil的话，布局对象将会把当前的attribute，作为动画的起点和终点。

//....不用解释了吧 .....
- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingSupplementaryElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)elementIndexPath
//....不用解释了吧 .....
- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)elementIndexPath

除了这些方法之外，你也可以重载- (void)prepareForCollectionViewUpdates:(NSArray<UICollectionViewUpdateItem *> *)updateItems;做一些和布局相关的准备工作。也可以重载- (void)finalizeCollectionViewUpdates;通过该方法添加一些动画到block，或者做一些和最终布局相关的工作。

通过使上下文无效( Invalidation Contexts )来优化布局:

在自定义布局的时候，应该通过使那些布局真正发生改变的部分无效来提升布局性能。在你改变item的时候，通过调用invalidateLayout方法强制collection view重新计算全部的布局信息，并应用该布局信息。一个更好的方式是只重新计算发生改变的布局信息，这恰恰是Invalidation Contexts允许你去做的。你可以通过Invalidation Context指明布局发生改变的部分，布局对象就可以根据该信息 减小重新计算的数据量。

通过子类化 UICollectionViewLayoutInvalidationContext,为你的布局定义一个 自定义的 invalidation context。在子类中定义一些属性，这些属性代表布局中可以单独重新计算的数据。当你需要 invalidate 你的布局时，创建一个 invalidation context 子类的实例，配置自定义的属性，并把该实例传给invalidateLayoutWithContext: 方法。你自定义的方法可以根据invalidation context 中的信息重新计算布局改变的部分。

如果你定义了一个自定义的 invalidation context 类，你也应该重载invalidationContextClass方法，返回自定义的类。 collection view 在需要invalidation context时，总是会创建一个指明的类实例。返回你自定义的子类，确保了自定义的对象拥有正确的 invalidation context。

获取 Collection View 的信息:

//当一个新的布局对象分配给collection view时，collection view将设置该属性的值
@property(nonatomic, readonly) UICollectionView *collectionView
//上面已经介绍过，不再介绍
- collectionViewContentSize；

+ (Class)layoutAttributesClass

返回创建布局信息时用到的类，如果你创建了继承自 UICollectionViewLayoutAttributes的子类，你也应该重载该方法，返回该子类。该方法主要是为了子类化，无需在代码中调用。

- (void)prepareLayout

该方法将通知布局对象更新当前的布局。布局更新发生在 collection view 第一次展示它的内容的时候，以及由于view的改变导致布局 invalidated 的时候。在布局更新期间， collection view都会首先调用该方法，允许布局对象对此次的更新做一些准备操作。
默认情况下，该方法不会做任何操作。子类可以重载该方法，在方法内部做一些和布局相关的数据创建或计算操作。

- (UICollectionViewLayoutAttributes *)layoutAttributesForInteractivelyMovingItemAtIndexPath:(NSIndexPath *)indexPath withTargetPosition:(CGPoint)position

当item在手势交互下移动时，通过该方法返回这个item布局的attributes 。默认实现是，复制已存在的attributes，改变attributes两个值，一个是中心点center；另一个是z轴的坐标值，设置成最大值。所以该item在collection view的最上层。子类重载该方法，可以按照自己的需求更改attributes，首先需要调用super类获取attributes,然后自定义返回的数据结构。

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset

在进行动画式布局的时候，该方法返回内容区的偏移量。在布局更新或者布局转场的时候，collection view 调用该方法改变内容区的偏移量，该偏移量作为动画的结束点。如果动画或者转场造成item位置的改变并不是以最优的方式进行，可以重载该方法进行优化。 collection view在调用prepareLayout 和 collectionViewContentSize 之后调用该方法

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

该方法返回值为滑动停止的点。如果你希望内容区快速滑动到指定的区域，可以重载该方法。比如，你可以通过该方法让滑动停止在两个item中间的区域，而不是某个item的中间。

和collection view更新相关的方法:

- (void)prepareForCollectionViewUpdates:(NSArray<UICollectionViewUpdateItem *> *)updateItems

当插入或者删除 item的时候，collection view将会通知布局对象它将调整布局，第一步就是调用该方法告知布局对象发生了什么改变。除此之外，该方法也可以用来获取插入、删除、移动item的布局信息。

//该方法上文已介绍
- (void)finalizeCollectionViewUpdates

- (NSArray<NSIndexPath *> *)indexPathsToInsertForSupplementaryViewOfKind:(NSString *)kind

返回一个NSIndexPath 类型的数组，该数组存放的是将要添加到collection view中的追加视图的 NSIndexPath 。往collection view添加cell或者section的时候，就会调用该方法。collection view将会在prepareForCollectionViewUpdates: 和finalizeCollectionViewUpdates之间调用该方法。

- (NSArray<NSIndexPath *> *)indexPathsToInsertForDecorationViewOfKind:(NSString *)kind

//类比上个方法，不再过多解释；
- (NSArray<NSIndexPath *> *)indexPathsToDeleteForSupplementaryViewOfKind:(NSString *)kind

- (NSArray<NSIndexPath *> *)indexPathsToDeleteForDecorationViewOfKind:(NSString *)kind;

返回一个NSIndexPath 类型的数组，该数组存放的是将要从collection view中删除的追加视图的 NSIndexPath 。从collection view删除cell或者section的时候，就会调用该方法。collection view将会在prepareForCollectionViewUpdates: 和finalizeCollectionViewUpdates之间调用该方法。

类比)indexPathsToDeleteForDecorationViewOfKind:
- (NSIndexPath *)targetIndexPathForInteractivelyMovingItem:(NSIndexPath *)previousIndexPath withPosition:(CGPoint)position

根据item在collection view中的位置获取该item的index path。第一个参数该item原来的index path，第二个参数是item在collection view中的位置。在item移动的过程中，该方法将collection view中的location映射成相应 index paths。该方法的默认是现实，查找指定位置的已经存在的cell，返回该cell的 index path 。如果在相同的位置有多个cell，该方法默认返回最上层的cell。

你可以通过重载该方法来改变 index path的决定方式。比如，你可以返回z坐标轴最底层cell的index path.当你重载该方法的时候，没有必要去调用super类该方法。

使布局失效:

- (void)invalidateLayout

使当前的布局失效，同时触发布局更新，可以在任何时间调用该方法更新布局信息。该方法使collection view的布局立即失效，你可以在不触发多次更新的情况下，在同一个block中多次调用该方法。重载该方法的时候，必须调用super类的该方法。

- (void)invalidateLayoutWithContext:(UICollectionViewLayoutInvalidationContext *)context

该方法使布局的部分区域失效，而不是全局失效。是对invalidateLayout的一种优化，这种优化基于UICollectionViewLayoutInvalidationContext 类型的属性。如果你自定义了UICollectionViewLayoutInvalidationContext ，就应该重载该方法，并使用自定义的类型。重载该方法的时候，必须调用super类。

+ (Class)invalidationContextClass;

当你子类化UICollectionViewLayout，并且使用自定义的 invalidation context对象优化布局更新，重载该方法，返回UICollectionViewLayoutInvalidationContext的子类。当 collection view 需要invalidate你的布局的时候，将会用该方法返回值创建正确的invalidation context 对象。

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

该方法决定了collection view是否能够进行布局更新，默认为NO。子类在重载该方法的时候，根据cell或者追加视图是否发生布局改变，返回正确的值。

- (UICollectionViewLayoutInvalidationContext *)invalidationContextForBoundsChange:(CGRect)newbounds;

collection view 的bounds发生改变的时候返回的无效上下文，该无效上下文描述了bounds变化后需要做出改变的部分。
该方法默认实现是，通过invalidationContextClass方法返回的类创建一个实例，并作为返回值。如果你想获得一个自定义的无效上下文对象，就要重载invalidationContextClass方法。
你可以通过重载该方法去创建和配置自定义的无效上下文。如果你重载该方法，第一步应该调用super类获取无效上下文,在获得该无效上下文后，为它设置自定义的属性，并返回。

- (BOOL)shouldInvalidateLayoutForPreferredLayoutAttributes:(UICollectionViewLayoutAttributes *)preferredAttributes withOriginalAttributes:(UICollectionViewLayoutAttributes *)originalAttributes

当collection view包含self-sizing (自排列)的cell时，这些cell可以在布局attributes 应用到它之前更改这些attributes。一个自排列的cell指明一个不同于布局对象给出的size的时候，就会这么做。当cell设置一系列不同的attributes时，collection view将会调用该方法判断是否需要更新布局，默认返回为NO。

- (UICollectionViewLayoutInvalidationContext *)invalidationContextForPreferredLayoutAttributes:(UICollectionViewLayoutAttributes *)preferredAttributes withOriginalAttributes:(UICollectionViewLayoutAttributes *)originalAttributes

该方法返回值是一个上下文，上下文包含布局中需要改变的信息。默认的实现是，使用invalidationContextClass 方法返回的类创建一个实例，并返回。
你可以通过重载该方法去创建和配置自定义的无效上下文。如果你重载该方法，第一步应该调用super类获取无效上下文,在获得该无效上下文后，为它设置自定义的属性，并返回。

- (UICollectionViewLayoutInvalidationContext *)invalidationContextForInteractivelyMovingItems:(NSArray<NSIndexPath *> *)targetIndexPaths withTargetPosition:(CGPoint)targetPosition previousIndexPaths:(NSArray<NSIndexPath *> *)previousIndexPaths previousPosition:(CGPoint)previousPosition;
- (UICollectionViewLayoutInvalidationContext *)invalidationContextForEndingInteractiveMovementOfItemsToFinalIndexPaths:(NSArray<NSIndexPath *> *)indexPaths previousIndexPaths:(NSArray<NSIndexPath *> *)previousIndexPaths movementCancelled:(BOOL)movementCancelled;

调整动态的变化:

- (void)prepareForAnimatedBoundsChange:(CGRect)oldBounds；

collection view在bounds动态改变或者插入、删除items之前，调用该方法。可以在该方法进行一些相关的计算，比如可以在该方法内部计算插入和删除的item初始和最终的位置。你也可用通过该方法添加动画，这些动画被用于处理item插入、删除和bounds改变。

- (void)finalizeAnimatedBoundsChange;

该方法在item插入、删除和bounds改变动画完成之后，清空相关的操作。

在布局之间转换:

- (void)prepareForTransitionFromLayout:(UICollectionViewLayout *)oldLayout;

告知布局对象将会作为新的布局被导入到 collection view，该方法先于转场之前执行，可以在该方法做一些初始化的操作，生成布局attributes;

- (void)prepareForTransitionToLayout:(UICollectionViewLayout *)newLayout;

告知布局对象作为布局即将从collection view移除，该方法先于转场之前执行，可以在该方法做一些初始化的操作，生成布局attributes;

- (void)finalizeLayoutTransition；

collection view在获取从一个布局向另一个布局转场的时候所有的布局attributes 后，调用该方法。你可以用该方法清空prepareForTransitionFromLayout: 和prepareForTransitionToLayout:生成的数据和缓存。

注册装饰视图:

- (void)registerClass:(Class)viewClass forDecorationViewOfKind:(NSString *)decorationViewKind;
- (void)registerNib:(UINib *)nib forDecorationViewOfKind:(NSString *)decorationViewKind;

demo

效果图：


效果图:

结语：

本文并未对UICollectionView多做介绍，只是对官方UICollectionViewLayout文档进行翻译，笔者没有逐字逐句的进行翻译，在翻译的过程中也加入了自己的理解。如果读者觉得有什么不妥的地方，请予以指正，笔者会加以改正并及时更新。

参考：

http://my.oschina.net/u/2340880
http://yulingtianxia.com/blog/2014/08/17/New-in-Table-and-Collection-Views/?utm_source=tuicool&utm_medium=referral

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342

推荐阅读更多精彩内容