Collection View Programming Guide for iOS-Using the Flow Layout

Using the Flow Layout

You can arrange items in your collection views using a concrete layout object, the UICollectionViewFlowLayout class. The flow layout implements a line-based breaking layout, which means that the layout object places cells on a linear path and fits as many cells along that line as it can. When the layout object runs out of room on the current line, it creates a new line and continues the layout process there. Figure 3-1 shows what this looks like for a flow layout that scrolls vertically. In this case, lines are laid out horizontally with each new line positioned below the previous line. The cells in a single section can be optionally surrounded with section header and section footer views.

你能够使用具体的布局对象管理collectionView的items，那就是 UICollectionViewFlowLayout类。流动布局是基于线性布局的实现，这意味着布局对象将以线性路径的方式放置cell，并使多个cell满足线性，当布局对象使用完了当前行的空间，将会创建新的一行继续布局的过程。图形3-1显示了流动布局在垂直滚动下的样式，在这种情况下，行以水平排列，新的一行位于前面一行的下面，当个的分区可以选择拥有头分区和尾分区视图。

Figure 3-1  Laying out sections and cells using the flow layout

You can use the flow layout to implement grids, but you can also use it for much more. The idea of a linear layout can be applied to many different designs. For example, rather than having a grid of items, you can adjust the spacing to create a single line of items along the scrolling dimension. Items can also be different sizes, which yields something more asymmetrical than a traditional grid but that still has a linear flow to it. There are many possibilities.

你能够使用流动布局来实现网格效果，也能够使用它到其它方面。线性布局的想法能够被用于不同方面的设计。例如：不是拥有一个网格items，你能够调节间距和滚动尺寸来创建单行的items。items也能够拥有不同的大小，这将产生更多的非对称网格，而不是传统的网格，但是仍然有线性流动。

You can configure the flow layout either programmatically or using Interface Builder in Xcode. The steps for configuring the flow layout are as follows:

使用代码编程或者使用IB界面你能够配置流动布局，下面是相关配置流动布局步骤：

1：Create a flow layout object and assign it to your collection view.  创建一个流动布局对象并赋值给collection view.

2：Configure the width and height of cells. 配置cell的宽和高

3：Set the spacing options (as needed) for the lines and items. 设置行items之间的间距，可选项

4：If you want section headers or section footers, specify their size. 如果有头分区或尾分区，指定其大小

5：Set the scroll direction for the layout. 为布局对象指定其滚动方向

Important: At a minimum, you must specify the width and height of cells. If you don’t, your items are assigned a width and height of 0 and will never be visible.

Customizing the Flow Layout Attributes

The flow layout object exposes several properties for configuring the appearance of your content. When set, these properties are applied to all items equally in the layout. For example, setting the cell size using the itemSize property of the flow layout object causes all cells to have the same size.

流动布局对象暴露了一些相关的属性用于配置显示内容的外表。当设置之后，这些属性在布局中同等的被用于所有的items。例如：使用流动布局对象的itemSize 属性设置cell的大小，将导致所有的cell有着相同的大小。

If you want to vary the spacing or size of items dynamically, you can do so using the methods of the UICollectionViewDelegateFlowLayout protocol. You implement these methods on the same delegate object you assigned to the collection view itself. If a given method exists, the flow layout object calls that method instead of using the fixed value it has. Your implementation must then return appropriate values for all of the items in the collection view.

如果你想动态改变item的间距大小，你能够使用UICollectionViewDelegateFlowLayout 协议中的方法，只要为collection view设置代理对象，那么就可以使用这些方法。如果协议中的方法存在，那么流动布局对象将调用方法获取对应的布局信息而不是使用实际设置的值。你实现的方法必须为collection view返回一个合理的值用于所有的items。

Specifying the Size of Items in the Flow Layout

If all of the items in the collection view are the same size, assign the appropriate width and height values to the itemSize property of the flow layout object. (Always specify the size of items in points.) This is the fastest way to configure the layout object for content whose size does not vary.

如果在collection view中所有的items都有着相同的大小，那么为流动布局对象的itemSize属性赋值一个合理的宽高值即可。这是最快速的方式为内容配置布局对象的大小而且不需要改变。

If you want to specify different sizes for your cells, you must implement the collectionView:layout:sizeForItemAtIndexPath: method on the collection view delegate. You can use the provided index path information to return the size of the corresponding item. During layout, the flow layout object centers items vertically on the same line, as shown in Figure 3-2. The overall height or width of the line is then determined by the largest item in that dimension.

如果你想为cells指定不同的大小，你必须实现 collection view代理的collectionView:layout:sizeForItemAtIndexPath: 方法。你能够使用该方法提供指定位置所对应item的大小。在布局期间，流动布局对象中心将垂直在同一行的所有items。如图形3-2所示，对应行的整体高或宽由最大的item来确定。

Figure 3-2  Items of different sizes in the flow layout

Note: When you specify different sizes for cells, the number of items on a single line can vary from line to line.

Specifying the Space Between Items and Lines 

Using the flow layout, you can specify the minimum spacing between items on the same line and the minimum spacing between successive lines. Keep in mind that the spacing you provide is only the minimum spacing. Because of how it lays out content, the flow layout object may increase the spacing between items to a value greater than the one you specified. The layout object may similarly increase the actual line-spacing when the items being laid out are different sizes.

使用流动布局，你能够指定在同一行items之间的最小间距和连续行之间的最小间距。记住，是提供最小间距。因为布局内容的时候，流动布局对象可能增加items之间的间距到某值，该值大于你所指定的值。布局对象也可能增加实际行之间的间距，当items被布局不同的大小。

During layout, the flow layout object adds items to the current line until there is not enough space left to fit an entire item. If the line is just big enough to fit an integral number of items with no extra space, then the space between the items would be equal to the minimum spacing. If there is extra space at the end of the line, the layout object increases the interitem spacing until the items fit evenly within the line boundaries, as shown in Figure 3-3. Increasing the spacing improves the overall look of the items and prevents large gaps at the end of each line.

在布局期间，流动布局对象会添加items到当前行，一直到当前行没有足够的空间来满足(容纳)整个item。如果当前行是足够大的显示整数个items而没有额外的空间剩余，那么items之间的间距能够等于最小间距。如果当前行在最后有额外的剩余空间，布局对象将增加间距一直到items在当前行边界内均匀排列，如图形3-3所示。增加了间距提高整体items之间的浏览效果，防止每一行的最后间距过大。

Figure 3-3  Actual spacing between items may be greater than the minimum

For interline spacing, the flow layout object uses the same technique that it does for inter-item spacing. If all items are the same size, the flow layout is able to respect the minimum line spacing value absolutely and all items in one line appear to be spaced evenly from the items in the next line. If the items are of different sizes, the actual spacing between individual items can vary.

对于interline间距，流动布局对象使用了相同的技术。如果所有的items是有着相同大小，那么流动布局是使用最小行间距，而且每行的items将均匀的被放置。如果items是不同的大小，那么在items之间的实际间距是变化的。

Figure 3-4 demonstrates what happens with the minimum line spacing when items are of different sizes. With differently sized items, the flow layout object picks the item from each line whose dimension in the scrolling direction is the largest. For example, in a vertically scrolling layout, it looks for the item in each line with the greatest height. It then sets the spacing between those items to the minimum value. If the items are on different parts of the line, as shown in the figure, the actual line spacing appears to be greater than the minimum.

图形3-4证明了当items有着不同的大小，最小间距发生了什么事情。对于大小不同的items，流动布局对象将选择在滚动方向上每行最大的item。例如，在垂直滚动布局，布局对象将会寻找每行item中最大的高度，这时将设置最大item之间的间距为最小值。如果连续行之间的items是有着不同的大小，如图所示，那么实际的间距将大于最小值。

Figure 3-4  Line spacing varies if items are of different sizes

As with other flow layout attributes, you can use fixed spacing values or vary the values dynamically. Line and item spacing is handled on a section-by-section basis. Thus, the line and interitem spacing is the same for all of the items in a given section but may vary between sections. You set the spacing statically using the minimumLineSpacing and minimumInteritemSpacing properties of the flow layout object or using the collectionView:layout:minimumLineSpacingForSectionAtIndex: and collectionView:layout:minimumInteritemSpacingForSectionAtIndex: methods of your collection view delegate.

正如其它流动布局属性，你能够使用固定间距值或者动态变化值。行间距在一段一段的基础上处理。因此，对于给定的分区，item的上下和左右间距是相同的但是分区之间可能变化。你能够静态的设置间距，使用流动布局对象的 minimumLineSpacing 和 minimumInteritemSpacing 属性，或者使用collection view代理的collectionView:layout:minimumLineSpacingForSectionAtIndex: 和 collectionView:layout:minimumInteritemSpacingForSectionAtIndex:方法动态设置。

Using Section Insets to Tweak the Margins of Your Content 

Section insets are a way to adjust the space available for laying out cells. You can use insets to insert space after a section’s header view and before its footer view. You can also use insets to insert space around the sides of the content. Figure 3-5 demonstrates how insets affect some content in a vertically scrolling flow layout.

分区的insets是一种方式来调整空间有利于布局cell。你能够在头分区和尾分区使用insets来插入间距。你也能够使用insets来为内容的周围插入间距。如图3-5示例证明了insets怎样影响垂直滚动。

Figure 3-5  Section insets change the available space for laying out cells

Because insets reduce the amount of space available for laying out cells, you can use them to limit the number of cells in a given line. Specifying insets in the nonscrolling direction is one way to constrict the space for each line. If you combine that information with an appropriate cell size, you can control the number of cells on each line.

因为插入部分减少了一定可用于布局cells的空间，你能够使用它们来限制给定行cell的数量。在无滚动方向指定insets是一种方向来限制每一行的空间。如果你组合insets和cell大小的合理信息，你能够控制每一行cell的数量。

Knowing When to Subclass the Flow Layout

Although you can use the flow layout very effectively without subclassing, there are still times when you might need to subclass to get the behavior you need. Table 3-1 lists some of the scenarios for which subclassing UICollectionViewFlowLayout is necessary to achieve the desired effect.

虽然你能够不需要子类化就非常有效的使用流动布局，但是这里仍然有一些情况，你可能需要子类化获取需要的行为，表格3-1列举了一些使用UICollectionViewFlowLayout 子类化的场景。

Table 3-1  Scenarios for subclassing UICollectionViewFlowLayout

Scenario(情节)	Subclassing tips(子类化建议)
You want to add new supplementary or decoration views to your layout 你想添加新的supplementary或decoration视图到你的布局对象	The standard flow layout class supports only section header and section footer views and no decoration views. To support additional supplementary and decoration views, you need to override the following methods at a minimum: 标准的流动布局类仅仅只提供了头分区和尾分区视图而并没有装饰视图。为了添加额外的supplementary和decoration视图，你至少需要重写下列方法： layoutAttributesForElementsInRect: (required) layoutAttributesForItemAtIndexPath: (required) layoutAttributesForSupplementaryViewOfKind:atIndexPath: (to support new supplementary views) layoutAttributesForDecorationViewOfKind:atIndexPath: (to support new decoration views) In your layoutAttributesForElementsInRect: method, you can call super to get the layout attributes for the cells and then add the attributes for any new supplementary or decoration views that are in the specified rectangle. Use the other methods to provide attributes on demand. 在layoutAttributesForElementsInRect:方法中，你能够调用super来获取cells的布局属性并且为在指定矩形框内新的supplementary或decoration视图添加属性。使用其他的方法在需要的时候提供属性。 For information about providing attributes for views during layout, see Creating Layout Attributes and Providing Layout Attributes for Items in a Given Rectangle. 对于在views布局期间提供属性，可以看 Creating Layout Attributes 和 Providing Layout Attributes for Items in a Given Rectangle.
You want to tweak the layout attributes being returned by the flow layout 你想调整通过流动布局返回的布局属性	Override the layoutAttributesForElementsInRect: method and any of the methods that return layout attributes. The implementation of your methods should call super, modify the attributes provided by the parent class, and then return them. 重写 layoutAttributesForElementsInRect:方法和任一返回布局属性的方法。在方法的实现中调用super，修改由父类提供的属性，这时候返回它们。 For in-depth dicussions of what these methods entail, see Creating Layout Attributes and Providing Layout Attributes for Items in a Given Rectangle. 对于方法详情的更深讨论，可以看 Creating Layout Attributes 和 Providing Layout Attributes for Items in a Given Rectangle.
You want to add new layout attributes for your cells and views 你想为cells和views添加新的布局属性	Create a custom subclass of UICollectionViewLayoutAttributes and add whatever properties you need to represent your custom layout information. 创建UICollectionViewLayoutAttributes子类并添加任意我们需要显示在自定义布局信息中的属性。 Subclass UICollectionViewFlowLayout and override the layoutAttributesClass method. In your implementation of that method, return your custom subclass. 子类化UICollectionViewFlowLayout并且重写layoutAttributesClass 方法。在方法实现中，返回自定义类。 You should also override the layoutAttributesForElementsInRect: method, the layoutAttributesForItemAtIndexPath: method, and any other methods that return layout attributes. In your custom implementations, you should set the values for any custom attributes you defined. 你也能够重写layoutAttributesForElementsInRect:方法、layoutAttributesForItemAtIndexPath: 方法、或者任意其它方法能够返回布局属性。
You want to specify initial or final locations for items being inserted or deleted 你想为被插入或者删除的item知道初始或者最终位置	By default, a simple fade animation is created for items being inserted or deleted. To create custom animations, you must override some or all of the following methods: 默认情况下，当items被插入或删除有一个简单的暗淡动画，为了自定义动画，你必须重写一些或者下列所有方法： initialLayoutAttributesForAppearingItemAtIndexPath: initialLayoutAttributesForAppearingSupplementaryElementOfKind:atIndexPath: initialLayoutAttributesForAppearingDecorationElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingItemAtIndexPath: finalLayoutAttributesForDisappearingSupplementaryElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingDecorationElementOfKind:atIndexPath: In your implementations of these methods, specify the attributes you want each view to have prior to being inserted or after they are removed. The flow layout object uses the attributes you provide to animate the insertions and deletions. 在你实现的这里方法中，在被插入或者去除之前为视图指定需要的属性。流动布局对象会使用这些属性来动画插入和删除操作。 If you override these methods, it is also recommended that you override the prepareForCollectionViewUpdates:and finalizeCollectionViewUpdates methods. You can use these methods to track which items are being inserted or deleted during the current cycle. 如果你重写了这些方法，建议你重写 prepareForCollectionViewUpdates:和finalizeCollectionViewUpdates方法。你能够使用这些方法在当前循环内跟踪哪个是被插入或被删除的items。 For more information about how insertions and deletions work, see Making Insertion and Deletion Animations More Interesting. 对于更多插入和删除工作，可以看 Making Insertion and Deletion Animations More Interesting.

There are also instances in which the right thing to do is to create a custom layout from scratch. Before you decide to do this, take the time to consider whether or not it is really necessary. The flow layout provides a lot of customizable behavior that is appropriate for many different kinds of layouts, and because it is provided to you, it is easy to use and contains numerous optimizations to make it efficient. However, all this is not to say that you should never create a custom layout, because there are circumstances in which doing so make absolute sense. The flow layout limits the scroll direction to one direction, so if your layout contains content that stretches farther than the bounds of the screen in both directions, a custom layout makes more sense to implement. Creating a custom layout is the right decision if your layout is not a grid or a line-based breaking layout, as described above, or if the items within your layout move so frequently that subclassing the flow layout is more compicated than creating your own.

For more on creating a custom layout, see Creating Custom Layouts.

这里也有一个正确的例子对于创建自定义布局，在你决定自定义之前，花一点时间考虑是否真的是必须的。流动布局提供了许多可自定义行为，并且适用于许多类型的布局，因为它提供了相关的内容，是非常容易使用而且包含了许多最优化的方式。然后，所有的这些并不意味着你应该从未创建自定义布局，因为这些有一些情况，对于自定义操作是有意义的。流动布局显示了滚动方向到一个方向，所以，如果你布局包含的内容进一步延伸并在两个方向超越屏幕的区域，一个自定义对象的实现将更有意义。如果你布局不是网格或者基于线性布局，创建自定义布局是正确的决定，或者如果items在你的布局之内移动频繁，，而且子类化流动布局是更加复杂。这些情况都需要使用自定义布局。

对于更多创建自定义布局，看 Creating Custom Layouts。

参考：

官方文档