UICollectionView —— 6. 自定义布局--成功

创建一个自定义 collection view layout 是简单和直接的需求, 但是这个过程的实现细节可能会有所不同。你的布局对象必须为你 collection view 视图包含的视图产生 layout attributes 对象。 创建这些属性的顺序取决于应用程序的性质。collection view 可能有成千上万个 item，预先计算和缓存 layout attributes 是一个耗时的过程。只有在请求 获取指定 item 的时候去创建 attributes 才是更有意义的。一个 少量 item 的 app ，计算 布局信息一次 并对布局信息进行缓存，无论什么时候需要使用 布局属性，在你的 app 中可以减少很多的重复计算。 worked example 在本章的第二节。

记住，提供的示例代码并不意味着这是创建自定义布局的绝对的方式（创建自定义布局难道还有很多方式吗？）。 在你开始创建自定义布局之前，花时间设计出一个实现结构，用一种最合理方式让程序获得最佳性能。自定义布局过程的概览，参考 Creating Custom Layouts.

由于这个章节是呈现指定循序的自定义布局的实现，根据这个例子，从上到下来实现这个具体的目标。这个章节的重点是创建一个自定义布局，不是实现一个完整的应用程序。 因此，视图和控制器的实现不能用来创建最终的产品。为 collection view 创建自定义 cell 和 视图, 在使用 collection view 是必须的，内容在上一章节提供。回顾这些信息，参考，Collection View Basics 和 Designing Your Data Source and Delegate.

概念

这个工作示例的目标就是去实现一个自定义的布局，去显示一个下面图标展示的层级树信息。这个示例提供了示例代码段进行解释说明，沿着这个关键点，你的自定义的过程就已经达到了。collection view 的每个 section 构成一个树的层级（Section 0 只包含 Cell 对象）。Section 1 包含全部的 children cell 对象，Section 2 包含 children cell 包含的另外一些 children cell ， 等等。每个 cell，都是一个自定义 cell ，用一个 lable 来展示相关的类名， 和 cell 之间的连接视图是 supplementary view。 由于连接视图类必须决定有多少连接需要去绘制，他需要去访问我们数据源中的数据。因此使用 supplementary view 去实现这些连接，而不是使用 decoration views.

example_final_screen_2x.png

初始化

第一步， 子类话 UICollectionViewLayout 类创建一个自定义布局，这样做提供了必要的基础来构建一个定制的布局。

这是一个例子，自定义一个协议是必须的，去告诉布局 item 之间的间隙是多少。如果，特定的 item 的 attributes 需要从数据源中获取额外信息，最好去为自定义布局实现一个协议，而不是直接从数据源中获取。你这样会导致布局更加的健壮和可重用，它不会被连接到一个特定的数据源，相反，它能够响应实现这个协议的任何对象。

下面展示了自定义布局头文件文件的必要代码。 现在，任何类实现 MyCustomProtocol 协议，就能够使用这个自定义布局。布局能够询问这个类一些必要的信息。

连接自定义的协议

@interface MyCustomLayout : UICollectionViewLayout
@property (nonatomic, weak) id<MyCustomProtocol> customDataSource;
@end

下一步，由于 collection view 对 item 个数的管理相对较低， 自定义的布局能够作为一个缓存系统去存储布局对象产生的布局属性，无论 collection view 什么时候需要，都可以利用 自定布局对象去 准备布局和获取存储的值布局属性值。下面的示例代码展示了布局对象的三个私有属性，和 init 方法。layoutInformation 字典将用来存储 collection view 内部所有类型的 view 对应的布局属性。maxNumRows 属性追踪 我们树需要填充的每列多少行。insets 对象控制 cell 之间的间隙，和利用来设置 view frame 和 content 的 size 的。前两个存储属性在准备布局的时候进行设置。insets 对象将要在 init 方法中进行设置。在这种情况下，INSET_TOP， INSET_LEFT， INSET_BOTTOM， INSET_RIGHT 引用的常量为每个参数进行定义。

@interface MyCustomLayout()
 
@property (nonatomic) NSDictionary *layoutInformation;
@property (nonatomic) NSInteger maxNumRows;
@property (nonatomic) UIEdgeInsets insets;
 
@end
 
-(id)init {
    if(self = [super init]) {
        self.insets = UIEdgeInsetsMake(INSET_TOP, INSET_LEFT, INSET_BOTTOM, INSET_RIGHT);
    }
    return self;
}

最后一步 使用自定义的布局对象去创建自定义的布局属性。虽然这一步并不总是必要的。 在这种情况下，当 cell 设置位置的时候， 代码需要去访问 当前 cell 的 children 的索引，以至于 能够调整 children cell 的 frame 去匹配 他们的 parent 。所以，子类化 UICollectionViewLayoutAttributes 去存储一个 给 cell 的 chilren 提供信息的数组。 你子类话 UICollectionViewLayoutAttributes 在他的头文件中写如下代码：

@property (nonatomic) NSArray *children;

作为解释UICollectionViewLayoutAttributes类的参考, 子类化的布局属性需要你去重载 继承来的 isEqual: 在 iOS7 之后，更多的信息，请参考 UICollectionViewLayoutAttributes Class Reference.

实现 isEqual: 方法，在这种情况下是简单的，应为仅仅是一个 array 内容的比较。如果两个布局属性的数组是匹配的。那么他们必须是相等的。因为 children 们只能属于一个类。
下面的代码是 isEqual: 方法的实现：

-(BOOL)isEqual:(id)object {
    MyCustomAttributes *otherAttributes = (MyCustomAttributes *)object;
    if ([self.children isEqualToArray:otherAttributes.children]) {
        return [super isEqual:object];
    }
    return NO;
}

记得在定义的布局文件中包含自定义的布局属性头文件。
此时在这个过程中,您已经准备好开始实施的主要部分自定义布局奠定了基础。

准备布局

既然所有必要的组件已经被初始化, 你能够准备布局。 集合视图布局过程中首先调用prepareLayout 方法。 在这个示例中，prepareLayout 方法被用来给 collection view 内部的 每一个视图 去实例化所有的布局属性对象， 为了后续的使用在 layoutInformation 字典中存储 view 对应的布局属性。 更多关于 prepareLayout 方法的信息，查看 Preparing the Layout.（自定义布局的章节）

创建布局属性

这个例子的 prepareLayout 方法实现被分为两个部分。下面的图，展示了上半部分，代码遍历每一个 cell。 如果 cell 有 children ,并和 parent cell 的 另一些 children 相关。图中可以看到, 这个过程是对每一个细胞,包括其他parent cell 的 cell 的 children。

layout_process_2x.png

下面示例代码的实现 是 prepareLayout 方法实现的另一部分