CODEWITHSUNDEEP
iosswiftuicollectionviewuicollectionviewlayout
Florian Ldt
Florian Ldt

Reputation: 1235

Changing UICollectionView layout depending on section

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

uicollectionview

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.

Upvotes: 10

Views: 7493

Answers (1)

fewlinesofcode
fewlinesofcode

Reputation: 3082

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:

  1. Create UICollectionView
  2. Create UICollectionViewFlowLayout subclass
  3. Set your layout subclass as a collection view layout.
  4. For Sections 0-2 use plain UICollectionViewFlowLayout possibilities.
  5. 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:

Upvotes: 13

Related Questions