How Compositional Layouts for iOS Design Revolutionized Frontend Development

For frontend and iOS Design developers, the ease and simplicity of the development process has a significant impact on the quality of their output.

And, while in a simple UI layout, either vertical or horizontal arrangements of cells are easily created with the UICollectionViewFlowLayout, which is the default layout for UICollectionView, there remains one very pressing challenge for frontend development:

As times passes, the layouts are getting much more difficult to implement as the UICollectionViewFlowLayout lacks some important functionality, thus forcing developers to create custom layouts to achieve those functionalities in an enhanced way.

What can developers do to keep up with the growing heterogeneity of layouts and build custom layouts with ease?

Fortunately, we do have a successor to the old UICollectionViewFlowLayout, as introduced by Apple in WWDC 2019!

Here’s a solution that moves away from the delegate approach and uses a much simpler closure-based approach.

But before that, let’s try to wrap our heads around the UICollectionViewFlowLayout.

What is UICollectionViewFlowLayout?

Look at UICollectionView as the foundation of a lot of apps.

The UICollectionView is used to arrange cells/ UI views in Scrollable Content inside it, and the given layout determines how the elements will be arranged. By default, the UICollectionViewFlowLayout is either in horizontal or vertical scrolling, which is the most widely used layout.

The UICollectionView FlowLayout object organizes items from a simple layout into a grid, and for each section, it accounts for optional header and foot views. You are required to provide an estimated height and width for the cell, otherwise the cells will use auto-layout and the end result is not the best, in most cases.

The biggest plus point of the UICollectionView over the UITableView is the capability of horizontal scrolling, as well how multiple cells can be arranged in a column, unlike UITableView.

But, like we saw earlier, it comes with a catch: The UICollectionFlowLayout works quite well with simple layouts, but with designs becoming more heterogeneous, there needs to be a solution that supports building custom layouts — without the challenges that come with it.

Boilerplate code and problems of self-sizing cells are just a couple of issues that make building complex and advanced designs an uphill task.

UICollectionViewFlowLayout and its Drawbacks

The default layout for UICollectionView is sufficient for designing a simple layout, but it has the following drawbacks:

1. The Layout Scroll can either be Horizontal or Vertical
2. The UI Flow uses Delegates as a datasource, which is an outdated method of implementation
3. It only provides animation for Inserting or Deleting a single item at a time
4. The object has to be fetched using IndexPath, which can cause the application to crash in case of out-of-bound access
5. The selected object has to be casted
6. It is only suitable for simple UI Designs
7. Switching layouts with animation is not possible
8. Cells cannot encapsulate their layout variations programmatically

One of the most pressing challenges of the Default UI Flow is that it is only limited to Continuous Scroll or Paging Scroll behaviour.

In the UICollectionView, if you want to achieve paged central scrolling behaviour or scroll with cell hugging behaviour, a third-party custom layout has to be used. Either this, or you would have to implement your own solution, which, in most cases, might crash if not written properly.

If you want to achieve Horizontal Scroll View within a Vertical Scroll View, there is a way to embed UICollectionView in UI Table Cell and use UITableView. We’ll learn exactly how a little further into the article when we dive into UICollectionViewCompositionalLayout Horizontal Scroll, but before we get into that, let’s quickly refresh our knowledge of the main difference between UICollectionViewFlowLayout and UICollectionViewCompositionalLayout.

What is the Difference Between UICollectionViewFlowLayout and UICollectionViewCompositionalLayout?

The UICollectionViewCompositionalLayout is essentially a more advanced and enhanced version of its predecessor, the UICollectionViewFlowLayout.

In a UICollectionViewCompositionalLayout, data is presented in a static manner in multiple rows arranged in a single group, up and down, and the sections are composed of single and multiple groups.

Depending on the user interface you want to achieve, you can see for yourself and decide which layout of the two suits you more: for simple layouts, for example a list of items that don’t need any designs, a UITableView would work just fine.

However, if you’re looking for more ability to customize within each cell, the UICollectionView is what you should use for layout development.

To put it in the simplest way possible, the UICollectionView organizes the collection of data/ views, presenting it in layouts that come with the customizability that is missing in UITableView.

In the UICollectionViewFlowLayout, embedding the UICollectionView in the UI Table Cell and using the UITableView as the top most view will help achieve the Compositional Layout Horizontal Scroll View within a Vertical Scroll View.

And while this may sound easy to accomplish, there are certain things you must look out for when doing so:

• You have to conform to Delegates for both UITableView and the UICollectionView, which will make the code very messy
• It is memory-intensive and might cause memory leaks
• It’s hard to contain the complete code in a Controller
• The MVVM paradigm may need to be modified

Gladly, during WWDC 2019, Apple introduced compositional layouts with the goal to simplify the development process of complex layouts in our applications.

Here’s where the solution from Apple comes in and saves the day. Meet the Compositional Layout.

What is the UICollectionViewCompositionalLayout?

During WWDC 2019, Apple introduced a new, more modern and advanced way to implement more complex layout in simpler ways.

This was known as the Compositional Layout, which was released with the purpose of simplifying the development process of complex layouts in the UI for iOS design applications.

Compositional layouts are a type of collection view layout that are designed to be flexible, composable, and significantly faster so as to allow you to build whatever visual arrangement you want.

The iOS Compositional Layout lets you combine, or composite, each of the smaller components of the design into a full layout.

The UI Compositional Layout comprises one or more sections that compartmentalize your layout into distinct visual groups. 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.

How Compositional View Solves the Challenges of the Default UI Flow

The Compositional Layout for iOS design comes as a solution owing to the multitude of advantages that it boasts over the older UICollectionView for iOS design layout

1. It is declarative in nature
2. It supports both Delegates (older approach) as well as the new Diffable Datasource
3. New Complex animations come out of the box using Diffable Datasource Snapshots
4. Item can safely be retrieved directly for diffable datasource and doesn’t need to be casted
5. Layout variations can be encapsulated within the cell programmatically
6. Easier on device hardware performance and supported by Apple itself
7. Support layout switch with animations

Takeaway

Some of the biggest enhancements that the Compositional View offers for frontend UI development, particularly to overcome the challenges of UICollectionView for iOS Design, include:

• It supports both Horizontal as well as a Vertical scroll at the same time
• It achieves this by adding new Groups in each section, making code much more readable, easier to understand, and cleaner
• It supports 6 types of scrolling behaviours out of box, including Central Scroll (suitable for Carousel View).

Considering the importance of breaking down the frontend UI development process to make it simpler, more efficient, and most importantly, flexible and adaptive to increasingly advanced iOS designs, like the default iPhone layout, there remains no doubt that the Compositional View offers benefits that can go a long way to improve life for frontend developers. Want to learn more about MicroFrontends and Microservices? Read this article here!