Using the Flow Layout
使用流布局

The?UICollectionViewFlowLayout?class is a concrete layout object that you can use to arrange items in your collection views. 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 it 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?類是一個具體的布局對象，你可以在你的collection視圖里用來組織數據項。 流布局實現一個基于行的分段布局，就是說布局對象位于一個線性路徑的單元格內，并且沿著這條線盡可能多的放置單元格。 當它超出當前線得空間時，它創建一個新線并在那里繼續布局過程。圖3-1 顯示了一個垂直滾動的一個流布局。在該例子中，所有行都從上到下水平排列。每個section(節)里的單元格都可以選擇性的添加節頭(section header)和節尾視圖。

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

圖 3-1 使用流布局布置節和單元格

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 a grid of items, you could 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.

你可以使用流布局來實現網格，但也可以用它實現更多。一個線性布局可以被應用到很多不同的設計。比如，代替把所有數據項排列成網格，你可以調整間距來把數據項都排列在一個沿著滾動維度(scrolling dimension)的單一直線。數據項可以有不同的尺寸，它比傳統網格更加不對稱，但是它任然有一個線性流。 流布局有很多可能性。

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

你既可以通過程序也可以使用Xcode里的界面生成器來配置流布局。配置流布局的步驟如下：

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

創建一個流布局對象并把它分配給你的collection view.

Configure the width and height of cells.

配置單元格的寬和高

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

根據需要設置行和數據項的間距選項

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

如果你需要節頭或節尾，指定它們的尺寸

Set the scroll direction for the layout.

? 設置布局的滾動方向

Important:?You must specify the width and height of cells at a minimum. If you do not, 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?itemSizeproperty of the flow layout object causes all cells to have the same size.

流布局對象有多個屬性用來配置內容的外觀。當你設置完成時，這些屬性被均勻地應用于布局的所有數據項。 比如，用流布局的itemSize?屬性來設置單元格尺寸，導致所有單元格擁有相同的尺寸。

If you want to vary the spacing or size of items dynamically, you can do so using the methods of theUICollectionViewDelegateFlowLayout?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.

如果你想要動態變化數據項的間距和尺寸，你可以使用 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?UICollectionViewDelegateFlowLayout協議中的方法來實現。你可以在分配給collection view自身的同一個委托對象里實現這些方法。如果實現了其中的一個方法，流布局對象調用該方法代替使用它有的固定值。 然后實現方法為collection view中的所有數據項返回適當的值。

Specifying the Size of Items in the Flow Layout

1、 在流布局里指定數據項的尺寸

If all of the items in the collection view are the same size, assign the appropriate width and height values to theitemSize?property of the flow layout object. (You 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里的數據項都有相同尺寸，可以使用流布局對象的itemSize?屬性來分配適當的寬和高。(你總是用點--points---來指定數據項的尺寸) 如果尺寸不發生改變，這是配置布局對象內容的最快捷方式。

If you want to specify different sizes for your cells, you must implement thecollectionView: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.

如果你想要為單元格指定不同的尺寸，你必須在collection view委托里實現 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??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

2、指定數據項之間，行之間的間隔

The flow layout lets you specify the minimum spacing between items on the same line and the minimum spacing between successive lines. It is important to remember 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. However, if there is extra space at the end of the line, the layout object increases the inter-item 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

圖3-3 數據項之間的實際間隔可能大于最小值

For inter-line 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. However, 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. In this case, 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, this results in actual line spacing that appears to be greater than the minimum.

圖3-4 顯示了當數據項們有不同尺寸時最小行間距發生了什么。在例中，流布局對象從每行挑選在滾動方向上尺寸最大的那個數據項，它在每行里查找有最大高度的那個數據項。 然后它把那些數據項之間的間距設置為最小值。 如果這些數據項位于行的不同部分，正如圖中所示，就會導致顯示的實際行間距大于最小值。

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

圖 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 inter-item spacing is the same for all of the items in a given section but may vary between sections. You set the spacing statically using theminimumLineSpacing?and?minimumInteritemSpacing?properties of the flow layout object or using thecollectionView:layout:minimumLineSpacingForSectionAtIndex:?andcollectionView:layout:minimumInteritemSpacingForSectionAtIndex:?methods of your collection view delegate.

正如流布局的其它屬性，你可以使用固定的間距值或動態改變這些值。 行以及數據項間距是一節一節處理的。因此，行間距和數據項間距在一個給定的節里是所有數據項都一樣的，但是在節與節之間可能發生變化。你可以使用流間距對象的minimumLineSpacing?和 ? ? ? ? ? ? ? ? ??minimumInteritemSpacing屬性靜態地設置間距，也可以使用collection view委托的 ? ? ? ? ? ?collectionView:layout:minimumLineSpacingForSectionAtIndex:?和 ? ? ? ? ? ? ?collectionView:layout:minimumInteritemSpacingForSectionAtIndex:方法來設置。

Using Section Insets to Tweak the Margins of Your Content

3、使用Section Insets來調整內容的邊距

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 them 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在一個節頭視圖之后在節腳之前插入間距。你還可以使用它們在繞著內容的邊插入間距。 圖3-5 顯示insets在一個垂直滾動流布局里如何影響一些內容。

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

圖 3-5 節insets為單元格改變有效間距

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 a 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 still need to subclass to get the behavior you need.?Table 3-1?lists some of the scenarios for which subclassingUICollectionViewFlowLayout?is necessary to achieve the desired effect.

盡管你不需要子類化流布局就可以很有效地使用它，但是任然有很多時候想實現需要通過子類化才能獲得的行為。表3-1 列出了需要子類化UICollectionViewFlowLayout來達到期望效果的各種場景。

Table 3-1??Scenarios for subclassing?UICollectionViewFlowLayout表 3-1 需要子類化 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?“Providing Layout Attributes for Displayed Items.” 關于在布局期間給視圖提供各種屬性的信息，請看“Providing Layout Attributes for Displayed Items.”
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, 修改父類提供的屬性，然后返回它們。
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, thelayoutAttributesForItemAtIndexPath:?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 theprepareForCollectionViewUpdates:?and?finalizeCollectionViewUpdates?methods. You can use these methods to track which items are being inserted or deleted during the current cycle. 如果你重載這些方法，你最好也重載prepareForCollectionViewUpdates:?和 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?finalizeCollectionViewUpdates?方法。你可以使用這些方法來追蹤當前周期期間哪個數據項將被插入或刪除。 For more information about how insertions and deletions work, see?“Making Insertion and Deletion Animations More Interesting.” 關于如何實現插入和刪除工作的信息，請看Making Insertion and Deletion Animations More Interesting.”

Previous????Next

?

轉載于:https://www.cnblogs.com/patientAndPersist/p/3184416.html

總結

以上是生活随笔為你收集整理的Collection View Programming Guide for iOS---(四)---Using the Flow Layout的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。