The FUITableViewCollectionSection control is designed to be used, when a section in a UITableView should be dedicated to displaying a UICollectionView, and, the height of that section should adjust to fit its contents.

The collection section produces a single FUICollectionViewTableViewCell, which refreshes its height, after its subview FUICollectionView calculates the sizes of its subview UICollectionViewCell items.

A developer uses the FUITableViewCollectionSection, by assigning a data source (/and delegate) to its collectionView: FUICollectionView property; then, he or she should supply its collectionViewTableViewCell property to a UITableViewDataSource.tableView(_:cellForRowAt:) implementation.

## Usage

    let workorders: [WorkOrder] = [WorkOrder]()

    override public func viewDidLoad() {

        let workOrdersLayout = FUICollectionViewLayout.horizontalFlow
        workOrdersLayout.itemSize = CGSize(width: 200, height: 200)
        self.workOrdersSection = FUITableViewCollectionSection(tableView: self.tableView, collectionViewLayout: workOrdersLayout)
        self.workOrdersSection.collectionView.dataSource = self
        self.workOrdersSection.collectionView.register(FUISimpleCollectionViewCell.self, forCellWithReuseIdentifier: FUISimpleCollectionViewCell.reuseIdentifier)
        self.workOrdersSection.collectionView.delegate = self
        self.workOrdersSection.collectionView.isScrollEnabled = false

        self.tableView.estimatedRowHeight = 98
        self.tableView.rowHeight = UITableViewAutomaticDimension

    }

    // MARK:  UITableViewDataSource
    override public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    public override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return self.workOrdersSection.collectionViewTableViewCell
    }

    // MARK:  UICollectionViewDataSource
    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        switch collectionView {
        case workOrdersSection.collectionView:
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUISimpleCollectionViewCell.reuseIdentifier,
                                                                          for: indexPath) as! FUISimpleCollectionViewCell
            cell.contentImageView.image = UIImage(named: "WorkOrderImage")
            cell.titleLabel.text = "Work Order: \(indexPath.item)"
            return cell
        default:
            // ...
        }
    }

UITableViewCell subclass, containing a full-frame collectionView: FUIResizingCollectionView. The FUICollectionViewTableViewCell should be returned by the FUITableViewCollectionSection collectionViewTableViewCell property.

FUISimpleCollectionViewCell is a variant of UICollectionViewCell defined in SAPFiori. It contains a UIImageView and a UILabel.

Code usage:

Implement collectionView(_:cellForItemAt:) dataSource method

 //Implement collectionView(_:cellForItemAt:) dataSource method
 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUISimpleCollectionViewCell.reuseIdentifier, for: indexPath) as! FUISimpleCollectionViewCell

     //configure cell
     cell.contentImage = UIImage()
     cell.titleText = "Title"

     return cell
 }

Create and assign a layout object to collection view

 let layout = UICollectionViewFlowLayout()

 // Set any custom layout here.
 layout.itemSize = CGSize(width: 126, height: 126)
 layout.minimumInteritemSpacing = 10
 layout.minimumLineSpacing = 10

 // Sets the flow layout to CollectionView
 collectionView.collectionViewLayout = layout
 collectionView.dataSource = self
 collectionView.register(FUISimpleCollectionViewCell.self, forCellWithReuseIdentifier: FUISimpleCollectionViewCell.reuseIdentifier)

A variant of UICollectionViewCell which is very similar to SimplePropertyFormCell except that it’s not editable.

• keyName: The key of the cell.
• value: The value of the cell.

Code usage:

Register FUISimplePropertyCollectionViewCell for a collection view object. swift self.collectionView.register(FUISimplePropertyCollectionViewCell.self, forCellWithReuseIdentifier: FUISimplePropertyCollectionViewCell.reuseIdentifier)

Dequeue a FUISimplePropertyCollectionViewCell object from a collection view’s dataSource method collectionView(_:cellForItemAt:) “`swift public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: FUISimplePropertyCollectionViewCell.reuseIdentifier, for: indexPath) as! FUISimplePropertyCollectionViewCell

switch indexPath.item {
    case 0:
    cell.keyName = "Name"
    cell.value = "Broken Plates on Pole"
    case 1:
    cell.keyName = "Sort No."
    cell.value = "0001"
    default:
    break
}

return cell

} ”`

FUIKeyValueCollectionViewCell is a variant of UICollectionViewCell defined in SAPFiori. It contains a UILabel and a UITextField.

Code usage:

Register FUIKeyValueCollectionViewCell for a collection view object.

self.collectionView.register(FUIKeyValueCollectionViewCell.self, forCellWithReuseIdentifier: FUIKeyValueCollectionViewCell.reuseIdentifier)

Implement collection view’s dataSource method collectionView(_:cellForItemAt:)

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: FUIKeyValueCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIKeyValueCollectionViewCell

    switch indexPath.item {
        case 0:
        cell.keyName = "Name"
        cell.value = "Broken Plates on Pole"
        case 1:
        cell.keyName = "Sort No."
        cell.value = "0001"
        default:
        break
    }

    return cell
}

Set of UICollectionViewFlowLayouts occurring in Fiori Design Language.

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.

Code usage

1. Assign an instance of FUIHorizontalScrollCollectionViewLayout to your collection view. swfit self.collectionView.collectionViewLayout = FUICollectionViewLayout.horizontalScroll

2. Implement collectionView(:cellForItemAt:) dataSource. “`swfit 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. “`swift 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) } ”`

This layout should be used when the user should pan horizontally in the collection view, to view items off-screen to the left or right. Items in a section extend in a single row to infinity, so items will not wrap to new lines.

A developer should set the itemSize property of the layout, to specify the standard dimensions of the cell items.

Code usage

1. Assign an instance of FUIHorizontalScrollCollectionViewLayout to your collection view. swfit self.collectionView.collectionViewLayout = FUICollectionViewLayout.horizontalScroll

2. Implement collectionView(:cellForItemAt:) dataSource. “`swfit 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. “`swift 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) } ”`

The FUIStandardAutoSizingColumnFlowLayout resizes collection view cell items, to lay them out according to a specified number of columns. All items per row are top-aligned, though the cell item height may vary, based upon the AutoLayout system’s height calculation for the cell.

Code usage

1. Assign an instance of FUIStandardAutoSizingColumnFlowLayout to your collection view. swfit self.collectionView.collectionViewLayout = FUICollectionViewLayout.autosizingColumnFlow

2. Implement collectionView(:cellForItemAt:) dataSource. “`swfit public func collectionView( collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIObjectCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIObjectCollectionViewCell //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. “`swift 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) } ”`

A subclass of FUIStandardAutoSizingColumnFlowLayout which resizes collection view cell items, to lay them out according to a specified number of columns. All items per row are top-aligned, though the cell item height may vary, based upon the AutoLayout system’s height calculation for the cell.

minimumInteritemSpacing is set to 80 and minimumLineSpacing is set to 24 by default.

sectionInset is set to ‘top: 0, left: 8, bottom: 0, right: 8’.

UICollectionView subclass, which invokes a sizeChangeHandler: (() -> Void)? closure, when the current content size of the collection does not match the intrinsic content size. The sizeChangeHandler property is internal to the SDK.

Developers should generally not initialize FUIResizingCollectionView directly. Instead, instances of the class are typically accessed through the FUITableViewCollectionSection API’s.