Collection View

Collection View manages an ordered collection of data items and presents them using customizable layouts.

A collection view selected in Main tab.


iOS Development Notes: Collection View is equivalent to UICollectionView with compositional layout for iOS development.

Editing Collection View

To edit a collection view, simply double click at the collection view. Alternatively, when you select a collection view, Object Editor button will be shown at bottom bar. Click the Object Editor button to edit the collection view in a new tab.


Editor Interface

Initial state when editing collection view in new tab

When start editing Collection View, you’ll be presented with empty views categorized with few different zones.

  1. Collection View Preview Zone: Here collection view is previewed based on datasource, item views and layouts set. The view is instantly updated when any attributes or data changed. You can change the size of the Collection View Preview artboard to see how it is displayed in different screen size
  2. Cell View Zone: All cell views, header/footer views and supplementary views are displayed here. Additional cell views can be added using the + button.
  3. Collection View Layout Zone: All collection view layout sections are displayed here. Additional layout can be added using + button.
  4. Datasource: Datasource is not shown at workspace. Datasource can be edited using Attributes Inspector which can be opened by selecting Datasource at View List


Understanding Collection View

To start working with Collection View, you need to understand some collection view terms such as datasource, collection view section, collection view layout and item views.

  • Datasource: Responsible to provide data to collection view and choose which layout or item views to be used for specified section.
  • Collection View Section: A collection view may have multiple sections. Each section can have different layout and views.
  • Collection View Layout Section: Defines the visual arrangement of the item views.
  • Cell View: View which are used to display each cell in a collection view section.
A collection view with multiple sections, with different layout and different cell views.