文档翻译-Collection View - 1.3

使用流式布局

你可以使用具体的布局对象( UICollectionViewFlowLayout类)在集合视图中排列items。流式布局实现了基于行的断裂布局,这意味着布局对象将单元格放置在一条线性路径上,并尽可能地沿着该行容纳多个单元格。当布局对象在当前行上的空间不足时,会创建一个新的行,并且继续进行布局过程。图3-1显示垂直滚动流式布局的外观。在这种情况下,线条水平排列,每一条新线位于前一条线之下。每一个分区的单元格可以选择性地用分区头和分区尾视图来围绕。

图3-1

你可以使用流式布局来实现网格,也可以使用它来做更多其他的工作。线性布局的思想可以应用于很多不同的设计。例如,你可以调整间距沿着一个滚动维度来创建items的一行,而不是具有items的网格。items可以是不同的大小,这产生比传动网格更不对称的东西,但仍然具有线性流动性。这里有多种可能。
在xcode中你可以使用编程代码或界面构建器来配置流式布局。配置的步骤如下:

  1. 创建一个流式布局对象并把它赋值给集合视图
  2. 配置cells的宽高
  3. 设置线间距和items之间的间距
  4. 如果想要分区头和分区尾,指定它们的大小
  5. 给布局设置滚动方向

重要:至少必须指定cells的宽高。如果没有,items的宽高默认为0,将永不可见。

自定义流式布局属性

流式布局公开了几个属性来配置内容的外观。当设置的时候,这些属性将在布局中均等地应用于所有items。例如,使用流式布局的itemSize属性来设置cell的大小会造成所有的cells有相同的大小。
如果你想要动态改变items的间距或大小,可以使用UICollectionViewDelegateFlowLayout协议中的方法。在赋值给集合视图的同一委托对象上实现这些方法。如果存在给定的方法,则流式布局对象会调用该方法,代替使用它具有的固定值。然后,你的视线必须为集合视图中的所有items返回适当的值。

在流式布局中指定items的大小

如果集合视图中所有的items都是相同的大小,那就给流式布局对象的itemSize属性赋值合适的宽高值。(始终以点为单位指定items的大小)。这是为大小不变的内容配置布局对象的最快方式。
如果你想要给你的cells指定不同的大小,你必须实现集合视图代理的collectionView:layout:sizeForItemAtIndexPath:方法。你可以使用提供的索引路径信息来给相应的item返回大小。在布局期间,流式布局对象在同一行上垂直居中,如图3-2所示。然后,该线的整体高度和宽度由该维度中的最大item确定。

图3-2

注意:当你为cells指定不同大小,单行上的items数可能会有所不同。

指定items和行之间的间距

使用流式布局,你可以指定同一行上的items之间的最小间距和连续行之间的最小间距。请记住, 提供的间隔只是最小间隔。因为如何布局内容,流式布局对象可能将item之间的间距增大到大于指定的值。当被布局的items是不同大小时,布局对象可以类似地增加实际的行间距。
在布局期间,流式布局对象将items添加到当前行,直到没有足够的空间来适应整个item。如果线足够大,以适应没有额外空间的整数个items,那么这些items之间的间距将等于最小间距。如果在线的末尾有额外的空间,则布局对象会增加间隔间距,直到这些items均匀地贴合在线条边界内,如图3-3所示。增加间距可以提供items的整体外观,并防止每条线末端有大间隙。

图3-3

对于行间距,流式布局对象使用与item之间的间距相同的技术。如果所有的items是相同的大小,则流式布局可以绝对地遵守最小行间距值,并且一行中的所有item与下一行中的items均匀地间隔开。如果items的大小不同,则各items之间的实际间距可能会有所不同。

图3-4显示当items的大小不同时最小行间距会发生什么变化。对于不同大小的items, 流式布局对象从每个行中选择在滚动方向上尺寸最大的item。例如,在垂直滚动的布局中,它在每一行中寻找最大高度的item。然后,将这些item之间的间距设置为最小值。如果items位于行的不同部分,如图所示,实际行间距似乎大于最小值。

图3-4

与其他流式布局属性一样,可以使用固定间距值或动态变化值。行和item间隔是逐个处理的。因此,给定分区的所有items的行和间隔间距相同,但可能在各分区之间变化。可以使用流式布局对象的minimumLineSpacingminimumInteritemSpacing 静态地设置间距属性或者使用集合视图代理的collectionView:layout:minimumLineSpacingForSectionAtIndex:collectionView:layout:minimumInteritemSpacingForSectionAtIndex:设置间距属性。

使用分区插图来调整内容的边距

分区插图是可用于调整布局cells的空间的一种方式。你可以使用插图在分区的头部视图之后和分区的尾部视图之前插入间距。还可以使用插图在内容的两边插入间距。图3-5显示插图如何影响垂直滚动的流式布局中的一些内容。

图3-5

因为插图减少了可用于布局cells的空间量,可以使用它们来限制给定行中cell的数量。在非滚动方向上指定插图是限制每条线的空间的一种方法。如果将该信息与cell大小相结合,则可以控制每行上的cell数。

知道何时将流式布局子类化

虽然可以不需要子类化而很有效地使用流式布局,但仍有时候你可能需要子类来获取你需要的行为。表3-1列出了一些需要UICollectionViewFlowLayout子类实现所需效果的场景。
表3-1 用于子类化UICollectionViewFlowLayout的方案

情节 子类化的技巧
你想要给你的布局添加一个新的补充视图或者装饰视图 标准流式布局类支持只有分区头和分区尾并没有装饰的视图。为了支持附加的补充视图和装饰视图,你需要至少重写下列方法:layoutAttributesForElementsInRect:(必须) layoutAttributesForItemAtIndexPath:(必须) layoutAttributesForSupplementaryViewOfKind:atIndexPath:(来支持新的补充视图) layoutAttributesForDecorationViewOfKind:atIndexPath: (来支持新的装饰视图) 在你的layoutAttributesForElementsInRect:方法中,可以给cell调用super方法来获取布局属性,然后在指定的矩形内给一些新的补充视图或者装饰视图添加这些属性。使用其他方法根据需求提供属性。关于在布局期间为视图提供属性的更多信息,请看Creating Layout AttributesProviding Layout Attributes for Items in a Given Rectangle.
你想要调整流式布局返回的布局属性 重写layoutAttributesForElementsInRect:方法和返回布局属性的任何方法。你的方法实现应该调用super,修改父类提供的属性,然后返回它们。 关于深入讨论这些方法所涉及的内容。请看Creating Layout AttributesProviding Layout Attributes for Items in a Given Rectangle.
你想要给你的cells和视图添加新的布局属性 创建一个UICollectionViewLayoutAttributes的自定义子类,并添加代表自定义布局信息所需的任何属性。子类化UICollectionViewFlowLayout并重写layoutAttributesClass方法,在该方法的实现中,返回你的自定义子类。你应该也重写layoutAttributesForElementsInRect:方法,layoutAttributesForItemAtIndexPath: 方法,和一些可以返回布局属性其他的方法。在你的自定义实现中,应该给你定义的任何自定义属性设置值。
你想要指定要插入或删除的item的初始位置或最终位置 默认情况下,会为要插入或删除的item创建一个简单的淡入淡出动画。为了创建自定义动画,你必须重写下面的一些或所有方法:initialLayoutAttributesForAppearingItemAtIndexPath: initialLayoutAttributesForAppearingSupplementaryElementOfKind:atIndexPath: initialLayoutAttributesForAppearingDecorationElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingItemAtIndexPath: finalLayoutAttributesForDisappearingSupplementaryElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingDecorationElementOfKind:atIndexPath: 在这些方法的实现中,指定要在插入之前或删除之后每个视图具有的属性。流式布局对象会使用你提供的这些属性来执行插入和删除的动画。如果你重写这些方法,那么建议你重写prepareForCollectionViewUpdates:finalizeCollectionViewUpdates方法。你可以使用这些方法来跟踪在当前周期内插入或删除了哪些item。关于如何插入和删除工作的更多信息,请看Making Insertion and Deletion Animations More Interesting

还有一些情况下,正确的做法是从头创建一个自定义布局。在决定做这件事之前,花点时间考虑是否真的有必要。流式布局提供了许多适合于不同类型布局的可定制行为,并且因为它提供了,所以易于使用,并包含许多优化以使其高效。然而,这并不是说不应该创建自定义布局,因为在某些情况下这样做绝对有意义。流式布局将滚动方向限制为一个方向,因此如果你的布局包含的内容比屏幕在两个方向上延伸得更远,则自定义布局更有意义。创建一个自定义布局是正确的决定,如果你的布局不是一个网格或线分割的布局,如上所述,如果item在布局中频繁移动,子类化流式布局会比创建自定义布局更复杂。
关于创建自定义布局更多信息,请看Creating Custom Layouts.


官方文档地址
Using the Flow Layout

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

推荐阅读更多精彩内容