IOS 集合视图指南4：使用流布局

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.

你可以使用一个具体的布局对象安排你的集合视图中的元素们——UICollectionViewFlowLayout 类。流布局实现了一种突破线性布局的布局，这意味着布局对象可以把单元格们布置成线性的同时把所有的单元格都放在这条线上。当布局对象跑出这条线的范围的时候，布局对象创建一条新的线接着布局。图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.

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

1. Create a flow layout object and assign it to your collection view.

2. Configure the width and height of cells.

3. Set the spacing options (as needed) for the lines and items.

4. If you want section headers or section footers, specify their size.

5. Set the scroll direction for the layout.

你可以使用流布局实现网格，但是你也可以使用他做到更多。线性布局的点子可以应用到很多不同的设计上。比如，不同于网格布局，你可以调节间距在滚面积上来实现一个单列滚动。元素呢当然也可以由不同的尺寸，从而产生一种相对于网状布局不对称的线性布局。这里有很多可能。 你可以通过编程或者Xcode的的界面生成器来设置流动布局。设置流布局的步骤如下：

1. 创建一个流布局对象分配给你的集合视图
2. 设置单元格的宽高
3. 设置行和单元格之间的间距（如果需要的话）
4. 如果你想要节头和节尾，指定他们的尺寸
5. 给布局设置滚动方向

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.

重点：至少，你必须设定单元格的宽和高。如果你没有，你的元素的宽和高将会被分配为0以至于不可见。

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.

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 samedelegate 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.

流布局对象有一些公开的属性来配置你的内容的现实。当被设置的时候，这些属性会无差别的应用到你的元素布局中。比如，设置单元格大小使用流布局对象的 itemSize  属性导致所有的单元格有同样的大小。

如果你想动态的改变元素的大小和距离，你可以使用 UICollectionViewDelegateFlowLayout 协议的方法来实现。你实现这些方法就和你指定到集合视图本书的代理对象一样。如果一个给出的方法实现了，流动布局对象就会使用这个个方法而不是使用对象的自带值。你的实现必须返回对所有集合视图中元素合适的值。

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.

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.

如果集合视图中的所有元素都有同样的尺寸。给流动布局对象itemSize 的属性指定合适的宽和高的值。（通常用点的形式指定元素的大小——(⊙o⊙)…是这么翻译吗？）这是最快的方法在无差的方式下来设置布局对象的内容。

如果你想给你的单元格指定不同的大小，你必须实现集合视图代理中的collectionView:layout:sizeForItemAtIndexPath:方法。你可以使用索引路径的信息来返回响应的尺寸给相应的元素。在布局过程中，流动布局对象的中心点在同一条线上的，就像图3-2中展示的。然后聚聚宽和高最大的元素来决定元素的面积。

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.

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.

使用流布局，你可以指定同一行元素之间的最小距离和连续行之间的最小距离。记得你可以设置的距离只有最小距离哦。因为在内容视图中布局，流动布局对象可能会增加元素之间的距离超过你指定的值。相似的布局对象也可能会在元素布局改变的时候增加行距，

在布局过程中，流动布局对象给现在行增加元素直到没有足够的空间容纳一个完整的元素。如果一行的空间足够容纳所有的元素而没有额外的空间，这个时候元素之间的距离就会刚好等于最小距离。如果在行尾有邹谷的空间，布局对象就会增加元素之间的距离直到元素在这一行中平均分配，就像图3-3展示的那样。增加距离首先是为了增加整体效果，然后也是为了防止每一行出现缺口。

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.

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 展示了当元素大小不同的时候最小行距会发生什么。元素的不同大小，流动布局对象会选择每一行中面最大的的元素（滚动方向上面积最大的元素）。比如，在一个水平滚动的布局中，就看每一行中元素高度最大的，然后设置元素之间的距离为最小距离。如果元素在一行的不同位置，如图所示，那么实际的距离将会比最小距离要大。

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: andcollectionView:layout:minimumInteritemSpacingForSectionAtIndex: methods of your collection view delegate

就像其他的动态布局属性，你可以确定距离的值，或者动态更改这个值。行和元素之间的距离基于节-节的基本部分处理。这样，在一节的元素中，行和内部元素的距离相同的，但是不同的节之间会有不同。你可以通过minimumLineSpacing and minimumInteritemSpacing属性设置流动布局对象的静态距离，或者使用你的集合视图的代理方法： collectionView:layout:minimumLineSpacingForSectionAtIndex: andcollectionView: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.

Section insets 是一种为布局单元格调整合适距离的方式。你可以使用 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.

因为insets减少了可用于布局的空间，所以你可以使用他们来显示一行中单元格的数目。在不滚动的方向指定insets可以限制行的空间。如果你把它和单元格大小联合使用，你就可以控制每一行的单元格数目。

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 （子类化UICollectionViewFlowLayout的情况） Scenarios for subclassing  UICollectionViewFlowLayout

Scenario	Subclassing tips
You want to add new supplementary or decoration views to your layout 当你想要在你的布局里添加一个新的增补视图或者装饰视图的时候。	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: 标准的流动布局仅仅支持节头和节尾没有装饰视图。为了添加组不是图和装饰视图，你你至少要重写以下方法。 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来获取单元格的布局属性，然后在制定的矩形的任意增补视图和装饰视图添加任何的属性。使用其他方法按照需求添加属性。 For information about providing attributes for views during layout, see Creating Layout Attributes and Providing Layout Attributes for Items in a Given Rectangle. 更多关于在布局中给视图添加属性的信息,请观看文章 Creating Layout Attributes and 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 discussions of what these methods entail, see Creating Layout Attributes and Providing Layout Attributes for Items in a Given Rectangle. 关于这些方法的更深入讨论，请看Creating Layout Attributes and Providing Layout Attributes for Items in a Given Rectangle.
You want to add new layout attributes for your cells and 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 你想要指定插入或者删除的元素的初始和最终位置。	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: 在默认情况下，插入和删除元素的动画是简单的淡入淡出。创建自定义动画，你需要重写一些甚至全部下面的方法： 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. 如果你重写这些方法，也推荐你重写方法，你使用这些方法可以在当前循环下跟踪插入和删除的元素。 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.

也有需要你重头开始创建自定义布局的情况。在你决定这样做之前，抽时间思考是否真的需要这样做。流动布局提供了很多可以自定义的行为实现了很多不同的布局，因为这是提供给你的，所以它可以很方便的使用并且做了很有效的优化。尽管如此，这也不是说你不能创建自定义布局，因为有些情况下这样做有据对的意义。流动布局对象限制滑动方向只有一个，所以如果你的布局包含的内容在两个方向上都比屏幕要打，那么自定义布局就将更有意义。在如果你的布局不是一个网状布局或者线性布局，自定义布局就将是一个好的决定，就像上面描述的，或者你的布局中有很多移动导致流动布局比自定义布局更加麻烦。

更多关于自定义布局的信息，请看Creating Custom Layouts.

未完待续……

本文原创，转载请注明出处：http://blog.csdn.net/zhenggaoxing/article/details/43953407