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 which will open a new tab to edit the collection view.

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 section 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, background 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 Inspector: 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 cell 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.