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 方法实现的另一部分

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容