How do I add a section title in UICollectionView?

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?

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

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.

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)
   }