Changing UICollectionView layout depending on section

Question

I am currently implementing a UICollectionView with several sections (let's say 4) like in the image below:

From section 0 to section 2 it is just a UICollectionViewFlowLayout with different cell sizes for each section but for section 3, it is a custom layout (Waterfall layout).

I already have implemented the 2 different layouts and they work well in separate UICollectionView, but I have some trouble to switch between the 2 layouts in the same UICollectionView.

First of all is it possible to change the layout from a section to another and if it is by which way this can be accomplished.

yes I did try it but maybe not in a good way. But `collectionView.setCollectionViewLayout` will change the layout of the entire UICollectionView right? no only of my specific section (the last one in my exemple) — Florian Ldt, Dec 04 '18 at 04:40
Good Idea to use separate collection view. with custom layout it might be complex — Prashant Tukadiya, Dec 04 '18 at 04:53
Yes I had this idea too that can reduce the complexity of it. I will try to handle one `UICollectionView` below the other to see how it behave. — Florian Ldt, Dec 04 '18 at 05:21
@Florian_L You can use pod `WaterfallLayout` to switch back and forth between flow/waterfall layout for each section. — Govind Kumawat, Dec 04 '18 at 11:53
@GovindKumawat looks nice. I'll try to catch the logic first but it seems to be a really good start thank you very much — Florian Ldt, Dec 04 '18 at 12:01
@GovindKumawat I finally created my own custom layout based on the Waterfall one, was a great way to learn how `UICollectionViewLayout` works. Thank you for your help. — Florian Ldt, Dec 16 '18 at 10:41

score 13 · Accepted Answer · answered Dec 04 '18 at 14:48

I think your question header is a bit misleading. You don't need to change the layout for each section. You need to show different layouts depending on section.

To achieve what you want you must subclass UICollectionViewLayout and then determine the layout depending on section. In your case I suggest you to subclass UICollectionViewFlowLayout as it takes a lot of heavy lifting.

Section 0 - Section 2 of your sample are easily achievable by using just UICollectionViewDelegateFlowLayout.

As you have "full width" cells there, than you can determine each cell size and insets using the following methods:

func collectionView(_ collectionView: UICollectionView, 
                      layout collectionViewLayout: UICollectionViewLayout, 
           insetForSectionAt section: Int) -> UIEdgeInsets

func collectionView(UICollectionView, layout: UICollectionViewLayout, sizeForItemAt: IndexPath) -> CGSize

func collectionView(UICollectionView, layout: UICollectionViewLayout, minimumLineSpacingForSectionAt: Int) -> CGFloat

First problem will appear when you will try to build Section 3. For that case I suggest you to search for "Waterfall layout", there are implementations on GitHub. When you will figure out how it works, you should do the following:

Create UICollectionView
Create UICollectionViewFlowLayout subclass
Set your layout subclass as a collection view layout.
For Sections 0-2 use plain UICollectionViewFlowLayout possibilities.
For Sections like section 4 you should override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? and calculate attributes manually.

Sorry, if my answer is too broad.

Here are some useful links:

thanks for the detailed answer, I'll take a look at this and give it a try. — Florian Ldt, Dec 04 '18 at 14:59
it took some time but I finally was able to create my own `UICollectionViewLayout` based on what you gave thank you. — Florian Ldt, Dec 16 '18 at 10:40

Changing UICollectionView layout depending on section

1 Answers1