How do I add a section title in UICollectionView?

Question

I need a label above every section in my Collection View. I've tried simply dragging a label into my header space above my prototype cell, but every time I run the app, the label is not visible.

Any help?

Answer 1

To add the custom label above every section in UICollectionView, please follow below steps

1. Enable the section header in UICollectionView

2. Add a new file of type UICollectionReusableView
3. In the storyboard change the class of section header in UICollectionViewCell to the newly added file of type UICollectionReusableView.
4. Add a label in section header of UICollectionViewCell in storyboard

5. Connect the label in the section header to the UICollectionReusableView file

   class SectionHeader: UICollectionReusableView {
       @IBOutlet weak var sectionHeaderlabel: UILabel!
   }
   

6. In the ViewController add the below code

   func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
   
       if let sectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "SectionHeader", for: indexPath) as? SectionHeader{
           sectionHeader.sectionHeaderlabel.text = "Section \(indexPath.section)"
           return sectionHeader
       }
       return UICollectionReusableView()
   }
   

Here "SectionHeader" is name of the file added to type UICollectionReusableView

Answer 2

Implement collectionView:viewForSupplementaryElementOfKind:atIndexPath: and supply a dequeued UICollectionElementKindSectionHeader containing your label. If this is a flow layout, be sure also to set the headerReferenceSize or you still won't see anything.

Answer 3

If you want a programmatic solution in Swift 4.2, you can do the following:

1. Setup the UICollectionViewDelegate and UICollectionViewDelegateFlowLayout

2. Make custom UICollectionReusableView subclasses with whatever views you want defined. Here's one for a header, you can create another for a footer with different characteristics:

   class SectionHeader: UICollectionReusableView {
        var label: UILabel = {
            let label: UILabel = UILabel()
            label.textColor = .white
            label.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
            label.sizeToFit()
            return label
        }()
   
        override init(frame: CGRect) {
            super.init(frame: frame)
   
            addSubview(label)
   
            label.translatesAutoresizingMaskIntoConstraints = false
            label.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
            label.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 20).isActive = true
            label.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
       }
   
       required init?(coder aDecoder: NSCoder) {
           fatalError("init(coder:) has not been implemented")
       }
   }
   

3. Implement the viewForSupplementaryElementOfKind method with the custom views:

   func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 
       if kind == UICollectionView.elementKindSectionHeader {
            let sectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "header", for: indexPath) as! SectionHeader
            sectionHeader.label.text = "TRENDING"
            return sectionHeader
       } else { //No footer in this case but can add option for that 
            return UICollectionReusableView()
       }
   }
   

4. Implement the referenceSizeForHeaderInSection and referenceSizeForFooterInSection methods. Header method shown below for example:

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