Cell view provides the visual representation for each item of section in the Collection View. At Item View zone, there is an Cell View anchor which can be used to add a new cell view, header/ footer view or supplementary view. In this article, all operation mentioned for cell view are also applicable for both header/footer View and supplementary View. All cell views added are shown as multiple artboards. The cell view artboards are visually connected to the Cell View anchor, which also visually connected to the collection view preview to provide context on the artboards connection.
You can add many cell views in the editor, datasource inspector then can be used to select which view to be used for a section.
Adding Cell View
By default when you start editing a collection view, a cell view is added automatically. Using cell view anchor, you can add cell view, header/footer view, or supplementary view. These views can be selected by datasource to be displayed respectively to an item, header, footer or as item supplementary view.
To add a new Item view:
- Click add button at Cell View anchor
- Select cell view type to be added
- A new Cell View artboard will be added to the workspace.
- Start adding subviews to the cell view
Adding Subviews to Cell View
A cell view works similar with a custom view. Any view type except Collection View can be added as subview to a cell view. This is true also for header/footer and supplementary View.
It is also important that layout constraints are set up correctly in the cell view. A collection view layout used to display the view may have various size, layout constraints are used to properly display them. Learn more about layout constraints here.
User Variable Attribute
Derived attribute in cell view works similar as in custom view. At first it may seems a bit complicated because in Collection View editor there can be multiple cell view artboards. For below example, we want to add image attribute in detailImage as derived attribute as in the figure below.
- Select detailImage in cell view artboard named shop
- Hover to the image attribute, click add user variable icon
- Type name the attribute name
- Click add
- The user variable is now added in shop view.
Adding a derived attribute for collection view Cell View
Usage of User Variable
User variable attributes is very useful for collection view. It can be used to customize each individual item in a collection view section. The figure below shows a simple collection view while showing the Datasource Inspector. You can select each item in a section and change the derived attribute data easily. Code Generator also use these data to generate code correctly down to each item.
Update derived attribute data in datasource