UICollectionView header view like table view header (not the section header)

Question

Is it possible to create UICollectionView header view like UITableView headerView? I mean header view for whole collection view, not the repeated one for each section. Like the picture1 is I want, picture which is now i have done.

PictureOne

PictureTwo

Check this out: https://stackoverflow.com/questions/13522075/how-to-add-headerview-in-uicollectionview-like-uitableviews-tableheaderview — boog, Oct 23 '19 at 09:14

score 3 · Accepted Answer · answered Jun 13 '18 at 09:41

3

I have the solution now. Add a subview in the collectionView and make the collectionView contentInset below the topImageView like below.

    topImageView.frame = CGRect(x: 5*SCREEN_SCALE, y: -125*SCREEN_SCALE, width: 285*SCREEN_SCALE, height: 120*SCREEN_SCALE)
    collectionView.addSubview(topImageView)
    collectionView.contentInset = UIEdgeInsets(top: 130*SCREEN_SCALE, left: 0, bottom: 0, right: 0)

answered Jun 13 '18 at 09:41

C.Hugh

101
1
8

But here scrolling is not applicable for topImageView, means when I scroll the collectionview topImageView do not scroll right. – Anjaneyulu Battula Jan 20 '19 at 17:13

score 0 · Answer 2 · answered Jun 13 '18 at 08:27

There's a workaround that I use when wanting to achieve this. When setting the header size, I check section number before setting it. If it's the first section, I set the height accordingly - otherwise I set the height to 0 so it isn't visible

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

        if section == 0 {

            return CGSize(width: view.frame.width, height: 35)
        } else {

            return CGSize(width: view.frame.width, height: 0)
        }
    }

i think your answer is not fit to me. At First, I have both section header and the header to the whole collectionView. If there's no section header, maybe your answer can work. In the other time, there is not section parameter in this function. So... — C.Hugh, Jun 13 '18 at 09:38

Praveen Gowlikar · Answer 3 · 2020-02-04T12:18:59.453

In swift like below

Register Header View

collectionView.registerClass(HeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView")

In UICollectionViewDelegate

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {

     if section == 0 {
    let headerView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", forIndexPath: indexPath)

    headerView.frame.size.height = 100

    return headerView }

    else {
         return nil
   }
}

Important is that you are supply the flow layout with the header size

flowLayout.headerReferenceSize = CGSize(width: self.collectionView.frame.width, height: 100)

Otherwise the delegate method will not get called

i think your answer is not fit to me. At First, I have both section header and the header to the whole collectionView. If there's no section header, maybe your answer can work. In the other time, there is not section parameter in this function. So... — C.Hugh, Jun 13 '18 at 09:34
@C.Hugh everything wont fit to our needs. We have to customize it as per our requirement. Explain what issue your getting will help. — Praveen Gowlikar, Jun 13 '18 at 09:38

UICollectionView header view like table view header (not the section header)

3 Answers3