Using the Flow Layout
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类。流动布局是基于线性布局的实现,这意味着布局对象将以线性路径的方式放置cell,并使多个cell满足线性,当布局对象使用完了当前行的空间,将会创建新的一行继续布局的过程。图形3-1显示了流动布局在垂直滚动下的样式,在这种情况下,行以水平排列,新的一行位于前面一行的下面,当个的分区可以选择拥有头分区和尾分区视图。
Customizing the Flow Layout Attributes
itemSize
property of the flow layout object causes all cells to have the same size.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.
UICollectionViewDelegateFlowLayout 协议中的方法,只要为
collection view设置代理对象,那么就可以使用这些方法。如果协议中的方法存在,那么流动布局对象将调用方法获取对应的布局信息而不是使用实际设置的值。你实现的方法必须为collection view返回一个合理的值用于所有的items。
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.
itemSize属性赋值一个合理的宽高值即可。这是最快速的方式为内容配置布局对象的大小而且不需要改变。
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.
collectionView:layout:sizeForItemAtIndexPath:
方法。你能够使用该方法提供指定位置所对应item的大小。在布局期间,流动布局对象中心将垂直在同一行的所有items。如图形3-2所示,对应行的整体高或宽由最大的item来确定。
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.
minimumLineSpacing
和 minimumInteritemSpacing
属性,或者使用collection view代理的collectionView:layout:minimumLineSpacingForSectionAtIndex:
和 collectionView:layout:minimumInteritemSpacingForSectionAtIndex:方法动态设置。
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.
Knowing When to Subclass the Flow Layout
UICollectionViewFlowLayout
is necessary to achieve the desired effect.
UICollectionViewFlowLayout
子类化的场景。
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.
|
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被插入或删除有一个简单的暗淡动画,为了自定义动画,你必须重写一些或者下列所有方法:
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.