Collection View¶
The UICollectionView
is a key view type in UIKit
and Apple's Human Interface Guidelines. The Fiori Design Language utilizes collection views in a number of floorplans, especially Object Details, Overview, as well as in the Gallery View, Object CollectionView
and Attachments section of the Create View.
The SAPFiori utilizes UICollectionView
instances in a number of controls. When the content for those controls should be managed by the developer, it typically exposes the collection view as a public property in the API. A developer should use the regular UIKit
API's to configure and populate the item views of the collection, and handle things like taps and transitions.
The SAPFiori controls exposing a collection view property include:
FUITableViewCollectionSection
with embeddedFUICollectionViewTableViewCell
FUIAttachmentsController
These controls implement some context-specific behavior for the collection view--usually around layout and sizing--but when starting to implement a custom collection case, the starting point for a developer should be to work directly with UICollectionView
**.
Then, the developer can use one or more of the UICollectionViewLayout
types from the SAPFiori framework to govern the item layout, and/or choose from the available UICollectionViewCell
subclasses in the framework to match the design specification.
UICollectionViewLayout
Subclasses¶
FUICollectionViewLayout.horizontalScroll
¶
The .horizontalScroll
layout extends UICollectionViewFlowLayout
. 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. Alternatively, the developer can implement the UICollectionViewDelegateFlowLayout
to specify unique sizes for each cell item.
A developer may optionally return views to the UICollectionViewDataSource
collectionView(_:viewForSupplementaryElementOfKind:at:)
method, to set 'supplementary' views to the collection view's section header or footer. Multiple sections are supported, though cells in all sections will scroll simultaneously, so single section collections are most common.
Important: this layout ignores the
estimatedItemSize
property, even if it is assigned.
FUICollectionViewLayout.horizontalFlow
¶
The .horizontalFlow
layout extends UICollectionViewFlowLayout
by adding a new optional property: minimumScaledItemSize
. minimumScaledItemSize
enables the dimensions of the collection view cell items to be scaled upwards, to fill the width of the collection view's contentSize
.
The developer can allow the layout to scale any number of cell items to fit the contentSize
width, or can set a predetermined number of items that should fit the contentSize
width by setting the numberOfColumns
property. This is useful when the number of items rendered in the collection view varies on different screens, but a common size is desired.
The .horizontalFlow
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.
With the introduction of this new size property, the UICollectionViewFlowLayout
item size is managed by the following priority:
Autolayout
system, ifestimatedItemSize
is set not equal toCGSize.zero
FUICollectionViewHorizontalFlowLayout
, withnumberOfColumns
property, ifminimumScaledItemSize
is set not equal toCGSize.zero
FUICollectionViewHorizontalFlowLayout
, ifminimumScaledItemSize
is set not equal toCGSize.zero
itemSize
property (Note:collectionView(_:layout:sizeForItemAt:)
value is ignored)
Default Flow Layout Behavior¶
Flow Layout Behavior, Using minimumScaledItemSize
¶
FUICollectionViewLayout.autosizingColumnFlow
¶
The autosizingColumnFlow
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. The leading/trailing edges of the first and last columns abut the respective margins of the content view.
The developer may specify the number of columns by setting the numberOfColumns
property.
Collection view cell items supplied to the UICollectionViewDataSource.collectionView(_:cellForItemAt:)
method for collection views utilizing this flow layout should be well-prepared for the AutoLayout
engine to calculate content sizes, especially heights.
FUICollectionViewLayout.keyValueColumnFlow
¶
The keyValueColumnFlow
is a variant of the autosizingColumnFlow
, with preconfigured layout characteristics for rendering collections of FUIKeyValueCollectionViewCell
items.
minimumInteritemSpacing
is set to 80.minimumLineSpacing
is set to 24.sectionInset
is set toUIEdgeInsetsMake(0, 8, 0, 8)
.