Compositional Layouts in Swift

UITableView used UICollectionView for the more complex view and scroll left to right or top to bottom with different presentations where we have used many other UITableViewCell and UICollectionViews. So, in WWDC 2019 apple introduce a Compositional Layout(UICollectionViewCompositionalLayout) which is used to create custom UICollectionViewLayout.

Compositional layouts create with the combination of small layout groups and convert into large complex layout groups. So it will be helpful to create a complex view because it is divided into small views. It divided into four basic building blocks, and it’s a hierarchy that consists of:

• Layout: NSCollectionLayoutSize class used for the dimension(width and height) in layout. It defined by the proportional fraction of width and height of layout or by estimated and absolutes sizes.

• Section: NSCollectionLayoutSection used to define the section for UICollectionView. Through multiple sections, it creates compositional layouts.

• Group: NSCollectionLayoutGroup used to manage the items that will scroll horizontally, vertically or numbers of items will display in the rows of the group.

• Item: NSCollectionLayoutItem used as the layout cell which extends on the screen based on the size.

Implementation of Compositional Layout:

Let’s explain the compositional layout with the examples as :

Handling Compositional Layout with Multiple Sections:

1.) Let’s create the function which returning UICollectionViewCompositionalLayout and written as :

• Here we used the environment parameter of the section provider to customize the layout. Also NSCollectionLayoutEnvironment provides us container feature that make decisions about how we want to layout our items, groups, and sections.
• LayoutSize is an NSCollectionLayoutSize, which defined by the proportional fraction of width and height of layout or by estimated and absolutes sizes.
• The orthogonalScrollingBehavior means the section lays out its content along the main axis of its layout, defined by the layout configuration’s scrollDirection property.
• NSCollectionLayoutGroup.horizontal creates the layout group and also all items added to the group will be positioned horizontally.
• NSCollectionLayoutGroup.vertical all items added to the group will be positioned vertically.
  

2. ) Then add the compositional layout to our collection view, add it to the initializer, and written as:

3.) At last, it looks like as:

Handling Compositional Layout with Nested Groups:

1.) Firstly, create the function for UICollectionViewCompositionalLayout as :

• Previously, in NSCollectionLayoutGroups we used only one item with subitems parameter and here we used more than one for some groups.
• Here bigger item take up 40% of the width of their containing group, and the full height while tiny items taking up the remiaing part of the witdth with one third height of their containing group.
• Also add the tiny items in nested groups which positioned items vertically.
• Then in main group positioned horizentally with a big item and nested groups.

2. ) Then add the compositional layout to our collection view as:

3.) At last, run it and it displayed as:

Conclusion

If you have any comments, questions, or recommendations, feel free to post them in the comment section below!

For other blogs, please click here.