How to setup a 1 header with multiple sections using UICollectionViewController

Question

I need some help. I'm struggling on how to setup a view like this one using UICollectionViewController. The data per sections is different. Maybe someone can help me. thank you!

    -----------   
    |   HEAD  |
    -----------
    |Section 1|
    -----------
    | A  |  B |
    -----------
    | C  |  D |
    -----------
    | E  |  F |
    -----------
    |   foot  |
    -----------
    |Section 2|
    -----------
    | A  |  B |
    -----------
    | C  |  D |
    -----------
    | E  |  F |
    -----------
    |   foot  |
    -----------

Himanshu Patel · Accepted Answer · 2019-11-13 05:42:50Z

2

Here’s a simple implementation, that only overrides an optional method on the UICollectionViewDataSource protocol:

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 3
}

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    switch kind {
    case UICollectionElementKindSectionHeader:
        let section = indexPath.section

        switch section {
        case 0:
            let TitleHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: homeHeaderReuseIdentifier, for: indexPath) as! TitleHeader
            return TitleHeader
        default:
            let Section1Header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: sectionSpacingHeaderReuseIdentifier, for: indexPath) as! Section1Header
            return Section1Header
        }
    case UICollectionElementKindSectionFooter:
        let FooterView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: homeFooterReuseIdentifier, for: indexPath) as! FooterView
        return FooterView
    default:
        return UICollectionReusableView()
    }
}


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.frame.width, height: 100.0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.frame.width, height: 100.0)
}

edited Nov 13, 2019 at 5:42

answered Nov 13, 2019 at 5:10

Himanshu Patel

1,0338 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Turtle0001 Over a year ago

Thank you for the answers guys! Appreciate it a lot!

Turtle0001 Over a year ago

The thing is I need to have a scrollable header on the top. That's also the reason why I consider doing this on a collectionviewcontroller.

Himanshu Patel Over a year ago

@Turtle0001 you have add number of section 3 thats Top Header and Section.

Turtle0001 Over a year ago

Thank you for the idea @Himanshu! I can work base on your suggestion! It works!

Sumeet.Jain · Accepted Answer · 2019-11-13 05:12:54Z

2

You can have a section check while returning header view through this delegate method

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    var reusableview = UICollectionReusableView()
    if (kind == UICollectionElementKindSectionFooter) {
      if section == 0{
          reusableview = customHeaderCell //Header View You want
      }
    }
    else{
        reuableView = customFooterHeaderCell // Footer View
    }
    return reusableview
}

answered Nov 13, 2019 at 5:12

Sumeet.Jain

1,63911 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to setup a 1 header with multiple sections using UICollectionViewController

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related