Compositional Layout in UICollectionView

Swift Aug 16, 2020

Introduction to the new API.

I had a lot of fun when explore the new API so I decided to make a post to share with you guys what I’ve learned. Let's get started.

Photo by Yogendra Singh on Unsplash

A boring introduction (but it’s worth to read)

Compositional Layout has been introduced in WWDC 2019 event which contains a lot of power that helps developer build more complex collection layout but much less code.

On the one hand, if you just need a simple layout like a collection of identical items UICollectionViewFlowLayout is the best candidate for the job, it’s simple, it’s easy to implement. On the other hand, if you need more complex layout (I think most of the app nowadays), before Compositional Layouts you’ll need to create your own custom layout by subclass a bunch of classes, calculate rows, cells and stuff which is not easy to implement.

But Compositional Layout come to save. Now it becomes much easier to us to build whatever layout we wanted. Only thing I’m very sorry to say is it only support iOS 13.0 or above.

Advantages:

  • Composable
  • Flexible
  • Fast

Disadvantages:

  • Only support iOS13.0 or above.

Now let take a look under the hood to better understand how it works.

Compositional Layouts: Under the Hood

Image for post
Hierarchy of a compositional layout

Compositional Layout compose small layout groups together as you can see in the photo above. A layout consists of sections. Each section consists of groups, every group consists of items .

Core Concepts

To build any compositional layout, the following four classes need to be implemented:

  • NSCollectionLayoutSize — The width and height dimensions are of the type NSCollectionLayoutDimension which can be defined by setting the fractional width/height of the layout (percentage relative to its container), or by setting the absolute or estimated sizes.
  • NSCollectionLayoutItem — This is your layout’s cell that renders on the screen based on the size.
  • NSCollectionLayoutGroup — It holds the NSCollectionLayoutItem in either horizontal, vertical, or custom forms.
  • NSCollectionLayoutSection — This is used to initialize the section by passing along the NSCollectionLayoutGroup. Sections eventually compose the compositional layouts.

Notice that all the classes above have prefix NS not UI. That’s because the new API is universal API which can be use not just on iOS but MacOS, WatchOS, iPadOS.

Interesting Implementation Code

Horizontal paging layout

Take a look at the snippet of code bellow :

  • 1. Declare item with size.fractionalWidth(1.0) means items will take up full width of its container which is the group. absolute(200) means items are 200 point height.
  • 2. The group will take up full width of the section and 200p height. It holds a list of items and because we want to build a horizontal list of item so we use horizontal class function.
  • 3. Lastly, we initialize section contain the group created above.

Just few lines of code. Everything seem correct but if you run your application, this is what we got:

Image for post

It’s a bit hard to see, so add this line of code bellow the line we declare item

item.contentInsets = .init(top: 10, leading: 10, bottom: 10, trailing: 10)

Run your application again:

Image for post

Uhm… It layouts vertically instead of horizontally, why is that ? Behind the scene the section create 3 group instead of one. Each row you see on your screen is a group, and each group contains an item. That’s because section always try to keep items inside its frame by default. To tell section scroll horizontally we need to add this line of code bellow where you declare section:

section.orthogonalScrollingBehavior = .continuous

Run your application, now we got what we expected. See, we just need a few lines to get what we want, less line of code, more convenience.

Image for post

Conclusion

This article is a bit long so I decided to split it into multiple parts, we’ll build a really interesting layout in the next part. So if you want to get more about don’t forget to follow me 😉.

Compositional Layout is a very powerful API. I’m very glad that it’s been released. Through out this introduction article I hope you guys enjoy it and don’t forget to practice and explode more. See you in the next part.

Also available on Medium:
https://medium.com/@tungvuduc2805/compositional-layout-in-uicollectionview-432f942249b6

Learn more & References

Advances in Collection View Layout - WWDC 2019 - Videos - Apple Developer
Collection View Layouts make it easy to build rich interactive collections. Learn how to make dynamic and responsive layouts that range...
iOS 13 Compositional Layouts in CollectionView
The advancements Apple brought in the CollectionView layout this year proves the fact that, despite the storm SwiftUI created, UIkit isn’t over yet. At least not anytime soon, as SwiftUI does not…

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.