wwdc2018 CollectionView

CollectionView之旅

1.CollectionView 概述

CollectionView 的核心概念有三点：布局（Layout）、数据源（Data Source）、代理（Delegate）。

1.1UICollectionViewLayout

UICollectionViewLayout负责管理UICollectionViewLayoutAttributes，一个UICollectionViewLayoutAttributes 对象管理着一个CollectionView 中一个Item 的布局相关属性。包括Bounds、center、frame 等。同时要注意在当Bounds 在改变时是否需要刷新Layout, 以及布局时的动画。1.2UICollectionViewFlowLayout

UICollectionViewFlowLayout 是UICollectionViewLayout 的子类,是系统提供给我们一个封装好的流式布局的类。

横向流式布局（白色线代表布局方向）

纵向流式布局（白色线代表布局方向）

这种流式布局需要区分方向，方向不同，具体的Line Spacing 和Item Spacing 所代表的含义不同，具体差异，可以通过上面的两张图进行区分。

因为流式布局其强大的适用性，所以在设计中这种布局方式被广泛使用。1.3UICollectionViewDataSource

数据源：顾名思义，提供数据的分组信息、每组中Item 数量以及每个 Item 的实际内容。

1.4UICollectionViewDelegate

delegate 提供了一些细颗粒度的方法：

·         Highlighting

·         Selection

还有一些视图的显示事件：

·         willDisplayItem

·         didEndDisplayingItem

2.布局-自定义Layout

系统提供的 UICollectionViewFlowLayout 虽然使用起来方便快捷，能够满足基本的布局需要。但是遇到如下图的布局样式，显然就无法达到我们所需的效果，这时就需要自定义 FlowLayout了。

 

 

自定义 FlowLayout 并不复杂 ，有以下四步：

1. 提供滚动范围

overridevarcollectionViewContentSize: CGSize

2. 提供布局属性对象

layoutAttributesForElements

layoutAttributesForItem

 

3.布局的相关准备工作

prepare()

4.处理自定义布局中的边界更改

shouldInvalidateLayout

3.性能优化部分

通过以上的方法，我们可以轻松实现自定义 layout 的布局。但是在实际开发中，有一个对性能提升很实用的小技巧很值得我们借鉴。

通常，我们获取当前屏幕上所有显示的 UICollectionViewLayoutAttributes 会这么写

overridefunclayoutAttributesForElements(inrect: CGRect)-> [UICollectionViewLayoutAttributes]? {returncachedAttributes.filter{ (attributes:UICollectionViewLayoutAttributes) -> Boolinreturnrect.intersects(attributes.frame) } }

采用以上的写法，我们会遍历缓存了所有UICollectionViewLayoutAttributes 的cachedAttributes 数组。而随着用户的拖动屏幕，这个方法会被频繁的调用，也就是会做大量的计算。当cachedAttributes 数组的量级达到一定的规模，对性能的负面影响就会非常明显，用户在使用过程中会出现卡顿的负面体验。