FUICollectionViewLayout

public enum FUICollectionViewLayout

Set of UICollectionViewFlowLayouts occurring in Fiori Design Language.

  • Flow layout, in which all items per section are displayed in a single row. User may scroll horizontally, to view hidden items.

    Item size is fixed, based on self.itemSize.

    Important

    Developer should set value for self.itemSize. self.estimatedItemSize will be ignored.

    Declaration

    Swift

    public static var horizontalScroll: FUIHorizontalScrollCollectionViewLayout { get }

  • Flow layout, in which all items per section are displayed left to right, and wrapped to multiple rows, to fit.

    Developer may configure the size of items to be fixed, or scale to fit to the width of the collection view content size.

    Usage

    self.collectionView.collectionViewLayout = FUICollectionViewLayout.horizontalFlow

// MARK:  to scale items to fit width of collection view, set `estimatedItemSize`
self.collectionView.collectionViewLayout.estimatedItemSize = CGSize(width: 320, height: 320)

// MARK:  to set item size statically, set `itemSize`
self.collectionView.collectionViewLayout.itemSize = CGSize(width: 220, height: 220)

    Declaration

    Swift

    public static var horizontalFlow: FUIHorizontalFlowCollectionViewLayout { get }

  • A grid-style flow layout, in which the Developer may specify the count of ‘columns’ which may be displayed per row.

    UICollectionViewCell items will be scaled horizontally, to fit the calculated column width. Cell items will be scaled vertically, according to their AutoLayout-determined intrinsic content size. Items for each row are top-aligned.

    Declaration

    Swift

    public static var autosizingColumnFlow: FUIStandardAutoSizingColumnFlowLayout { get }

  • A variant of FUIStandardAutoSizingColumnFlowLayout.

    • minimumInteritemSpacing is set to 80.
    • minimumLineSpacing is set to 24.
    • sectionInset is set to UIEdgeInsetsMake(0, 8, 0, 8).

    Declaration

    Swift

    public static var keyValueColumnFlow: FUIKeyValueFlowLayout { get }

  • A grid-style flow layout, in which the developer may specify the count of ‘numberOfColumns’ which may be displayed per row.

    UICollectionViewCell items will be scaled horizontally, to fit the calculated column width. Cell items will be scaled vertically, according to their autoLayout-determined intrinsic content size. The placement of cells is top-most then left-most.

    Usage

    let layout = FUICollectionViewLayout.masonry
/// set a desired value for `numberOfColumns`
layout.numberOfColumns = 3
layout.lineSpacing = 8
layout.interitemSpacing = 8
layout.sectionInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)

    Declaration

    Swift

    public static var masonry: FUIStandardAutoSizingColumnFlowLayout { get }

  • Carousel layout, in which all items per section are displayed in a single row. The user may scroll horizontally to view hidden items.

    Important

    The developer should set a value for numberOfColumns, estimatedItemSize, or itemSize for a desired cell width.

    Usage

    let layout = FUICollectionViewLayout.carousel
layout.sectionInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
layout.minimumInteritemSpacing = 8

/// There are three options to set the size of cells:
/// 1. Set `numberOfColumns`
layout.numberOfColumns = 3

/// 2. Set `estimatedItemSize` for auto-sizing
layout.estimatedItemSize = CGSize(width: 320, height: 320)

/// 3. Set `itemSize` for fixed size
layout.itemSize = CGSize(width: 220, height: 220)

    Declaration

    Swift

    public static var carousel: FUIHorizontalScrollCollectionViewLayout { get }