Collection View Layouts
-
The CollectionViewLayout class is an abstract base class that you subclass and use to generate layout information for a collection view. The job of a layout object is to determine the placement of cells, supplementary views inside the collection view’s bounds and to report that information to the collection view when asked. The collection view then applies the provided layout information to the corresponding views so that they can be presented onscreen.
See moreDeclaration
Swift
open class CollectionViewLayout : NSObject
-
An UICollectionViewLayoutAttributes object manages the layout-related attributes for a given item in a collection view. Layout objects create instances of this class when asked to do so by the collection view. In turn, the collection view uses the layout information to position cells and supplementary views inside its bounds.
See moreDeclaration
Swift
public class CollectionViewLayoutAttributes : CustomStringConvertible
-
A list layout that makes CollectionView a perfect alternative to NSTableView
See moreDeclaration
Swift
public final class CollectionViewListLayout : CollectionViewLayout
-
A vertical list based layout similiar to a native table view
See moreDeclaration
Swift
@objc public protocol CollectionViewDelegateListLayout : CollectionViewDelegate
-
This layout is column based which means you provide the number of columns and cells are placed in the appropriate one. It can be display items all the same size or as a
Pinterest
style layout.The number of columns can be set dynamically by the delegate or you can provide a default value using
layout.columnCount
.You can also set the
sectionInsets
andminimumColumnSpacing
which will affect the width of each column.With the itemWidth set by the column, you have 3 options to set the height of each item. They are used in the order here. So if aspectRatioForItemAtIndexPath is implemented it is used, otherwise, it checks the next one.
- aspectRatioForItemAtIndexPath (delegate)
- heightForItemAtIndexPath (delegate)
- layout.defaultItemHeight
The delegate method aspectRatioForItemAtIndexPath scales the size of the cell to maintain that ratio while fitting within the caclulated column width.
Mixed use of ratios and heights is also supported. Returning CGSize.zero for a ratio will fall back to the hight. If a valid ratio and height are provided, the height will be appended to the height to respect the ratio. For example, if the column width comes out to 100, a ratio of 2 will determine a height of 200. If a height is also provided by the delegate for the same item, say 20 it will be added, totalling 220.
See moreDeclaration
Swift
open class CollectionViewColumnLayout : CollectionViewLayout
-
The delegate for CollectionViewColumnLayout to dynamically customize the layout
See moreDeclaration
Swift
@objc public protocol CollectionViewDelegateColumnLayout : CollectionViewDelegate
-
A variation of UICollectionViewFlowLayout
This layout is primarily row based, but uses ItemStyles to group similar items together.
The layout’s delegate, CollectionViewDelegateFlowLayout, is responsible for providing a style for each item in the collection view.
Flow items are grouped together, always placing as many same height items in each row as possible. If the row becomes full or an flow item of a different height is provided, the layout will just to the next row and continue.
Span items are always placed an their own row and fill the width of the Collection View.
Example
+---------------------------------+ | +-----+ +------------+ +--+ | | | 1 | | 2 | | 3| | | | | | | | | | | +-----+ +------------+ +--+ | | +--------+ +---------+ | | | 4 | | 5 | | | | | | | | | | | | | | | | | | | | | +--------+ +---------+ | | +-------------------------+ | | | 6. Span | | | +-------------------------+ | +---------------------------------+
Transformations
Transformations allow you to adjust the content of each row before moving on to the next row.
The
center
transformation will shift the of the row to be center aligned rather than left aligned.The fill tranformation will enlarge the items in a row proportionally to fill the row if their is empty space on the right. Note that this will affect the height of the entire row.
Spacing
Spacing options such as interspanSpacing and spanGroupSpacingBefore allow you to customize the space around different types of style groups.
The spanGroupSpacingBefore/After options will apply a set amount of space before or after a group of span items (one or more spans).
See moreDeclaration
Swift
open class CollectionViewFlowLayout : CollectionViewLayout
-
CollectionViewDelegateFlowLayout
See moreDeclaration
Swift
public protocol CollectionViewDelegateFlowLayout
-
A full height horizontal scrolling layout
See moreDeclaration
Swift
open class CollectionViewHorizontalListLayout : CollectionViewLayout
-
The delegate for CollectionViewHorizontalListLayout
See moreDeclaration
Swift
@objc public protocol CollectionViewDelegateHorizontalListLayout : CollectionViewDelegate