How to create a multi-section UICollectionViewCompositionalLayout

Oscar de la Hera Gomez
Two flowers that represent Swift and XCode side by side. Beneath them sits the text "UICollectionViewCompositionalLayout with Multiple Cells & Multiple Sections."

A step by step guide on creating a UICollectionView that uses a compositional layout with multiple sections and multiple UICollectionViewCells in Swift.

The following tutorial uses our Open Source Swift Starter Project to walk you through how to create a UICollectionView which has multiples sections and that uses fixed and dynamically sized UICollectionViewCells.

If you are seeking a tutorial that specifically covers how to make cells that dynamically adapt their size to fit their content, please consult the article below.

A screenshot of the final product in landscape and portrait.

Specifically, this tutorial will walk you through how to create an app that provides the functionality illustrated above. A process that involves creating a two-section UICollectionView which uses a UICompositionalLayout that implements three UICollectionViewCells.

Please note that this tutorial creates the same layout as that which we created as part of our "How to create a UICollectionView with multiple sections in Swift" tutorial which is available below

Please note that the UICollectionView and all UICollectionViewCells that are created in this tutorial follow our structured UIView methodology, which splits functionality into logic extensions for enhanced performance.

We recommend that you clone our Open Source Swift Starter Project, checking out the main branch and carrying out the steps below. The changes can be found on the tutorial/uicollectionview/multi-section-compositional-layout branch.

git clone git@github.com:delasign/swift-starter-project.git

Please note that we have removed all the label functionality from the CustomUIView and associated extensions. The details regarding the changes due to the removal of the label and initial sample string is not included in this tutorial.

Step One: Create the content

A screenshot of XCode showing the files that we modify within the create the content step.

The following step is intended to create the sample strings that will be consumed by the app.

This step builds on our Localization tutorial which is available below and follows our methodology that allows apps to be created for multiple languages.

A | Create the UIContent

A screenshot of the updated UIContent.swift file.

Add your content to the UIContent file.

In our case we have added two section titles, a sample cell title and a sample cell body.

B | Add Strings

A screenshot of the updated English and Spanish JSONs, with hold the strings for the application.

Add the relevant strings to en.json and es.json; or the necessary language files for the app to operate.

Step Two: Add the Attributed Styles

A screenshot of the files that were added and modified in Xcode as part of this step. Each new file or change is described in detail below.

As part of this step, we will adapt the fonts that are available to the app and create a series of attributed styles that are required to meet the visual requirements of the app's design.

For more information on how to create these or why we use them, please consult the articles below.

A | Update the Fonts

A screenshot of the updated Fonts.swift file, which has added Helvetica Neue Bold.

Under Models/Constants, update the Fonts.swift file to include Helvetica Neue Bold.

This step is required to be able to create the required attributed styles.

B | Create the Header Style

A screenshot of the Styleguide+Header.swift file.

Under the Coordinators folder, within the Styleguide folder, create a new file called Styleguide+Header.swift and paste in the code found below.

C | Create the Cell Title Style

A screenshot of the Styleguide+CellTitle.swift file.

Under the Coordinators folder, within the Styleguide folder, create a new file called Styleguide+CellTitle.swift and paste in the code found below.

D | Create the Cell Body Style

A screenshot of the Styleguide+CellBody.swift file.

Under the Coordinators folder, within the Styleguide folder, create a new file called Styleguide+CellBody.swift and paste in the code found below.

Step Three: Create the Title Cell

A screenshot of Xcode showing the files that we created for the TitleCell.

The following step creates a UICollectionViewCell for the section titles.

A | Create the TitleCell declaration file

A screenshot of the TitleCell.swift file.

Within the UI/Components folder, create a folder called TitleCell.

Within the TitleCell folder, create a file called TitleCell.swift and paste in the code found below.

Please note that the setupUI function is created in Part B.

B | Create the TitleCell UI extension

A screenshot of the TitleCell+UI.swift file.

Within the TitleCell folder, create a file called TitleCell+UI.swift and paste in the code found below.

C | Create the TitleCell Update extension

A screenshot of the TitleCell+Update.swift file.

Within the TitleCell folder, create a file called TitleCell+Update.swift and paste in the code found below.

Step Four: Create the Section A Cell

A screenshot of Xcode showing the files that we created for the SectionACell.

The following step creates a UICollectionViewCell for section A.

A | Create the SectionACell declaration file

A screenshot of the SectionACell.swift file.

Within the UI/Components folder, create another folder called SectionACell.

Within the SectionACell folder, create a file called SectionACell.swift and paste in the code found below.

Please note that the setupUI function is created in Part B.

B | Create the SectionACell UI extension

A screenshot of the SectionACell+UI.swift file.

Within the SectionACell folder, create a file called SectionACell+UI.swift and paste in the code found below.

C | Create the SectionACell Update extension

A screenshot of the SectionACell+Update.swift file.

Within the SectionACell folder, create a file called SectionACell+Update.swift and paste in the code found below.

Step Five: Create the Section B Cell

A screenshot of the files that we added to create the SectionBCell. These are outlined below.

The following step creates a UICollectionViewCell for section B.

A | Create the SectionBCell declaration file

A screenshot of the SectionBCell.swift file.

Within the UI/Components folder, create a folder called SectionBCell.

Within the SectionBCell folder, create a file called SectionBCell.swift and paste in the code found below.

Please note that the setupUI function is created in Part B.

B | Create the SectionBCell UI extension

A screenshot of the SectionBCell+UI.swift file.

Within the SectionBCell folder, create a file called SectionBCell+UI.swift and paste in the code found below.

C | Create the SectionBCell Update extension

A screenshot of the SectionBCell+Update.swift file.

Within the SectionBCell folder, create a file called SectionBCell+Update.swift and paste in the code found below.

Step Six: Create the UICollectionView

A screenshot of XCode showing the new files and changes that were made to create the UICollectionView and make it function with the CustomUIView. Detailed descriptions of each part of this step can be found below.

The following step walks you through the creation of the UICollectionView.

A | Declare the UICollectionView, Sections and Datasource

A screenshot of the CustomUIView.swift file. Highlighted are the variables that are described below as well as the configureDataSource function in the initializer.

In CustomUIView.swift, declare the following variables:

  • Sections - This is an enum that allows you to name sections for the UICollectionView. As you cannot get the IndexPath Row when formatting cell sizes, we recommend that you make SectionTitles their own section (i.e. TitleA or TitleB).
  • collectionViewSections - This is a static enum that holds the sections of the UICollectionView, in the order that you wish to use them (i.e. TitleA, A, TitleB, B).
  • collectionView - This is the variable for the UICollectionView.
  • dataSource - This is the variable for the datasource of the UICollection View.

Finally, make sure that you call configureDataSource, in the init(frame: CGRect) function. The configureDataSource function will be created in part C of this step.

Our sample code for the part of this step is available below.

B | Setup the UI

A screenshot of the CustomUIView+UI.swift file.

In CustomUIView+UI.swift setup the UICollectionView.

Sample code on how to achieve this is available below.

Please note that the setupCollectionView cannot be wrapped in a DispatchQueue.main.async as it will cause the configureDataSource to crash due to the collectionView being unwrapped as nil.

Additionally, as demonstrated by the sample code provided, you do not need to register cells in a UICollectionViewCompositionalLayout.

C | Create the UICollectionView Extension

A screenshot of the CustomUIView+CollectionView.swift file.

In the CustomUIView folder, create a new file CustomUIView+CollectionView.swift and paste in the code below.

  • The createLayout function is consumed by the UICollectionView when we set it up the UI extension and is responsible for dictating the dimensions and insets for each section and cell within the collectionView. In the event that you use an estimated NSCollectionLayoutDimension, the cell with size to fit the content - whilst absolute will hold to that number and fractional values will maintain proportion.
  • The configureDataSource function is responsible for creating the data source for the UICollectionView, determining how the cells update in the UICollectionView and creating a link between the data source and the UICollectionView.

Step Seven: Invalidate the layout

A screenshot of the CustomUIView+Update.swift file. Highlighted is the invalidate layout code that is offered below, which is called when the content updates in the app.

In order for the algorithm to work, the UICollectionView must reload its data when the content updates.

To do this invalidate the layout in the onContentUpdate function in CustomUIView+Update.swift through code similar to the one provided below.

self.collectionView.collectionViewLayout.invalidateLayout()

Step Eight: Verify

A screenshot of the final product in landscape and portrait.

Run the app and you will see that the layout matches the image above, and updates when you change orientation.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details