Collection View Section Layout

A layout defines the visual arrangement of the content in the collection view. At Layout zone, there is an Layout anchor which can be used to add a new layout. All layouts added are shown as individual artboards. The layout artboards are visually connected to the layout anchor, which also visually connected to the collection view preview to provide context on the artboards connection.

You can add multiple layouts in the editor. You can use the datasource inspector or click title at the layout artboard to change which section to assign the layout to.

Understanding Collection View Layout

Collection View Layout is based on compositional layout in iOS development. Read more about iOS compositional layout here.

A compositional layout is composed of one or more sections that break up the layout into distinct visual groupings. Each section is composed of groups of individual items, the smallest unit of data you want to present. A group might lay out its items in a horizontal row, a vertical column, or a custom arrangement.

You combine the components by building up from items into a group, from groups into a section, and finally into a full layout

A layout object defines the visual arrangement of the content in the collection view. The layout object defines the organization and location of all cells and supplementary views inside the collection view. Although it defines their locations, the layout object doesn’t actually apply that information to the corresponding views. The collection view applies layout information to the corresponding views

There are three main components of layout objects namely layout section, layout group and layout item.

Layout hierarchy at View List

1. Layout Section

Layout section is layout object that can define overall section behaviour such as scroll type or spacing between layout group. Each section can have its own background, header or footer. In layout hierarchy, layout section can only contain a root layout group.

Available Attributes

• Scroll Type: Scrolling behaviour of the layout section
• Group Spacing: Spacing between groups in the section
• Content Inset: Spacing between the section content to the boundary

2. Layout Group

Layout group is layout object that determine arrangement of the items in the group. Each group specifies its own size in terms of a width dimension and a height dimension, which can be expressed as fraction of their container or as an absolute value. A group also can be nested within other group to create a more complex layout.

Available attributes

1. Direction: Arrange items in group in horizontal or vertical
2. Width Dimension: Determine the group width. Can be a fraction value of the group container or absolute value.
3. Height Dimension: Determine the group height. Can be a fraction value of the group container or absolute value.
4. Item Spacing: Spacing between items in the group.
5. Content Inset: Inset of the group from the container.

3. Layout Item

A layout item is a blueprint for how to size, space, and arrange a view. It is the smallest layout object which can be used to further fine tune the overall layout. An item view can be a cell or supplementary view like headers, footers, and other decorations. Like layout group, each item also specifies its own size in terms of a width dimension and a height dimension, which can be expressed as fraction of their container or as an absolute value.

Available attributes

1. Width Dimension: Determine the item width. Can be a fraction value of the group container or absolute value.
2. Height Dimension: Determine the item height. Can be a fraction value of the group container or absolute value.
3. Content Inset: Inset of the item from the container.

Adding Layout Section

By default when you start editing a collection view, a default layout section is added automatically. These layout can be selected by datasource to define how cell views are arranged in the collection view.

To add a new layout artboard:

1. Click add button at layout anchor
2. A default layout artboard will be added to the workspace.
3. You can now start editing the layout

Adding Layout Item

By default after a layout section added, a root group and a layout item are also added automatically. This layout is the simplest layout that can be created. You can add additional layout item easily using layout edge menu. Follow these steps to add a new layout item to the layout section.

1. Hover to any edge of the layout item in the layout section
2. Left click mouse when blue/purple highlight shown
3. A list of valid layout item will be shown from the selected edge. For example if mouse clicked at right edge, only list of valid layout item to the right of the edge will be shown.
4. There are three categories of items shown that you can choose
   • Layout Item: Add layout item or layout group (app automatically choose either item or group added)
   • Supplement Item: Add supplementary item to the layout item. This categories only visible for layout item.
   • Header/Footer: Add header or footer to the section. This categories visible only for root layout group.
5. Choose any item to add.

See example below for more complex, nested layout created using layout edge menu. In the example, you can see the views are positioned and resized nicely based on the layout. This is because the view are responsive using layout constraints.

Adding nested layout items using layout edge menu

Editing Layout Attributes

Layout section, layout group and layout item attributes can be changed using attributes inspector. Layout item can be selected either using View List or at the layout artboard. Layout group is not visible at the layout artboard, and can be selected only using View List.

The most important attribute for layout item and layout group is width dimension and height dimension. The dimension can be either fraction of its container or absolute value. In the figure above, width dimension is fraction width while height dimension is fraction height. The dimension type can be changed between fraction and absolute by clicking the rotate icon.

By default, both width dimension and height dimension are set as fraction type with value 1. Default value for content inset for layout item is 5 for top, bottom, leading and trailing attribute.

Consider figure below. Layout group height fraction is 0.8 from its container (the artboard), and layout item height fraction is 1 from its container (the layout group) although the displayed is same for both. Using this expressive, by combining usage of both fraction and absolute dimension, it is possible to create a more complex layout.