FUIHorizontalFlowCollectionViewLayout

open class FUIHorizontalFlowCollectionViewLayout : UICollectionViewFlowLayout

This layout extends UICollectionViewFlowLayout, by adding a new optional property: minimumScaledItemSize, which enables the collection view cell items’ dimensions to be scaled upwards, to fill the width of the collection view’s contentSize.

The developer may allow the layout to scale any number of cell items to fit the contentSize width, or, may set a pre-determined number of items which ought to fit the contentSize width, by setting the numberOfColumns property. This is useful, when the number of items rendered in the collection view vary on different screens, but a common size is desired.

This layout also controls the inter-item spacing, and line spacing, so that the minimumInteritemSpacing and minimumLineSpacing values provided by the developer are used precisely, rather than being adjusted by the AutoLayout engine.

Item will be scaled if you set following three properties(Set a number greater than zero to enable corresponding feature):

  • estimatedItemSize: Scale item to the size provided by systemLayoutSizeFitting(_:).
  • numberOfColumns: Scale item based on the aspect ratio of itemSize.
  • minimumScaledItemSize: Scale item upwards to fill the row based on the aspect ratio of minimumScaledItemSize.

Other configurations:

  • isLayoutJustified: A boolean value indicating if adjusting inter-item spacing to make cells fit the full width.
  • numberOfRows: Max number of rows allowed. Default value is 0, which means there is no limit on number of rows.
  • isTopAligned: A boolean value indicating if items on the same row are top aligned.

Code usage

  1. Assign an instance of FUIHorizontalScrollCollectionViewLayout to your collection view.

    self.collectionView.collectionViewLayout = FUICollectionViewLayout.horizontalScroll
    
  2. Implement collectionView(_:cellForItemAt:) dataSource.

    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIObjectCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIObjectCollectionViewCell  //You may use any type of collection view cell here.
    //configue cell here
    //...
    return cell
    }
    
  3. Implement following methods if you need section header/footer. You can also set headerReferenceHeight/footerReferenceHeight to apply same height for all headers/footers.

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let view = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "Header", for: indexPath) as! FUICollectionSectionHeaderFooterView
    //configue header/footer view here
    //...
    return view
    }
    

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { switch section { case 0: return CGSize(width: 40, height: 40) default: return CGSize(width: 60, height: 60) }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize { switch section { case 0: return CGSize(width: 40, height: 40) default: return CGSize(width: 60, height: 60) }

  • Enables the collection view cell items’ dimensions to be scaled upwards, to fill the width of the collection view’s contentSize.

    Declaration

    Swift

    open var minimumScaledItemSize: CGSize
  • Number of columns of the layout. Default is 0. Setting a value greater than 0 to enable this feature.

    Declaration

    Swift

    open var numberOfColumns: Int
  • A boolean value indicating if adjusting inter-item spacing to make cells fit the full width.

    Declaration

    Swift

    open var isLayoutJustified: Bool
  • Max number of rows allowed. Default value is 0, which means there is no limit on number of rows.

    Declaration

    Swift

    open var numberOfRows: Int
  • A boolean value indicating if items on the same row are top aligned.

    Declaration

    Swift

    open var isTopAligned: Bool
  • Scroll direction of the layout. Only vertical scroll is supported in FUIHorizontalFlowCollectionViewLayout.

    Declaration

    Swift

    open override var scrollDirection: UICollectionViewScrollDirection { get set }