Display Section Header UICollectionReusableView

Question

I was working on iOS application and I have several problem about using UICollectionView cell.

This time, I want to ask about how to display the section header of UICollectionView (UICollectionReusableView)

I already implement the function like below :

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

        switch kind {

        case UICollectionElementKindSectionHeader:

            let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "cellHeader", for: indexPath as IndexPath)
            var labelHeader = headerView.viewWithTag(2) as! UILabel

            if indexPath.section == 0 {
                labelHeader.text = "Specialist Clinic"

            }
            else {
                labelHeader.text = "Medical Support"
            }

            headerView.backgroundColor = UIColor.blue;
            return headerView

        default:
            assert(false, "Unexpected element kind")
        }
    }

but, it always give a blank result. please look at the screen shot below

Have you tried implementing the reusable view height delegate method? — danieltmbr, Jun 22 '17 at 09:10

score 6 · Accepted Answer · edited Feb 07 '21 at 17:34

You need to return size of header.

func collectionView(_ collectionView: UICollectionView,
                     layout collectionViewLayout: UICollectionViewLayout,
                     referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.frame.size.width, height: 123) // you can change sizing here 
}

Delegate method

  func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
            var reusableview: UICollectionReusableView? = nil
            if kind == UICollectionElementKindSectionHeader {
                reusableview = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "cellHeader", for: indexPath) // cellHeader is your identifier
            var labelHeader = reusableview.viewWithTag(2) as! UILabel

         if indexPath.section == 0 {
                labelHeader.text = "Specialist Clinic"

            }
            else {
                labelHeader.text = "Medical Support"
            }

            headerView.backgroundColor = UIColor.blue;
               
            }
            return reusableview!
        }

score 2 · Answer 2 · answered Jun 23 '17 at 10:33

2

I have created demo for you. Download and re-use into your code. Cheers!

Download Link : https://www.dropbox.com/sh/vzf2tpe0ccf41tv/AABjdPAoaP2sE7YRtUgersq4a?dl=0

answered Jun 23 '17 at 10:33

Parimal

277
2
8

score 0 · Answer 3 · answered Jun 22 '17 at 11:24

You need to add UILabel on headerView

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

    switch kind {

    case UICollectionElementKindSectionHeader:

        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "cellHeader", for: indexPath as IndexPath)
        var labelHeader = headerView.viewWithTag(2) as! UILabel

        if indexPath.section == 0 {
            labelHeader.text = "Specialist Clinic"

        }
        else {
            labelHeader.text = "Medical Support"
        }

        headerView.backgroundColor = UIColor.blue;
        headerView.addSubview(labelHeader) //Add UILabel on HeaderView
        return headerView

    default:
        assert(false, "Unexpected element kind")
    }
}

score 0 · Answer 4 · answered Feb 06 '21 at 18:12

Here is my solution. It's done similar to dequeueing a cell/row for indexPathAt.

CollectionView

// size of header
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize{
    CGSize(width: collectionView.frame.size.width, height: 123)
}

// content of header
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    guard let headerCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: CollectionViewHeader.identifier, for: indexPath) as? CollectionViewHeader else {
        return UICollectionReusableView()
    }
    headerCell.titleLabel.text = "Title"
    return headerCell
}

UICollectionReusableView subclass

class CollectionViewHeader: UICollectionReusableView {
    let identifier = "headerView"
    @IBOutlet weak var titleLabel: UILabel!
}

Display Section Header UICollectionReusableView

4 Answers4

Linked