UICollectionView Header title change

Question

I have a UICollectionView with 4 custom UICollectionViewCells. In the header of the UICollectionView there's a UISegmentedControl. My goal is to change the header UILabel that plays the role of a title. Right now if the segmented control value had been changed, the cells are reloaded and the title should be switched, but it overlaps with the first title. I can't figure out why.

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    if kind == UICollectionElementKindSectionHeader {
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderDiscoverVC", for: indexPath) as! HeaderDiscoverVC
        headerView.frame = CGRect(x: 0, y: 0, width: collectionView.frame.width, height: 30)
        headerView.backgroundColor = UIColor.hex("d9e2e7")
        let label = UILabel(frame: CGRect(x: 16, y: 0, width: headerView.frame.width, height: 30))

        switch segReusableIdentifier {
        case "Reply":
            label.text = "Reply"
        case "Media":
            label.text = "Media"
        case "Likes":
            label.text = "Likes"
        case "Comments":
            label.text = "Comments"
        default:
            label.text = ""
        }
        label.font = UIFont(name: Fonts.OpenSans_Bold, size: 16)
        label.textColor = UIColor.hex("8a9da6")
        headerView.addSubview(label)
        return headerView
    }

   fatalError("Unexpected element kind")
}

score 1 · Accepted Answer · answered Jul 25 '18 at 12:00

The problem is with the way you are adding the label to your header view.

You should put the headerView.addSubview(label) to your HeaderDiscoverVC Class. Also set the colour and font to the same class.

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if kind == UICollectionElementKindSectionHeader {
    let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderDiscoverVC", for: indexPath) as! HeaderDiscoverVC
    headerView.frame = CGRect(x: 0, y: 0, width: collectionView.frame.width, height: 30)

    // MOVE THE COMMENTED LINE TO YOUR HeaderDiscoverVC
    //headerView.backgroundColor = UIColor.hex("d9e2e7")
    headerView.label.frame = CGRect(x: 16, y: 0, width: headerView.frame.width, height: 30)

    switch segReusableIdentifier {
    case "Reply":
        headerView.label.text = "Reply"
    case "Media":
        headerView.label.text = "Media"
    case "Likes":
        headerView.label.text = "Likes"
    case "Comments":
        headerView.label.text = "Comments"
    default:
        headerView.label.text = ""
    }

    // MOVE THE COMMENTED LINES TO YOUR HeaderDiscoverVC
    //label.font = UIFont(name: Fonts.OpenSans_Bold, size: 16)
    //label.textColor = UIColor.hex("8a9da6")
    //headerView.addSubview(label)
    return headerView
}

fatalError("Unexpected element kind")
}

Try and share your results

Excellent! This is what I wanted – Dani Jul 25 '18 at 13:25 — Dani, Jul 25 '18 at 13:25

Amit · Answer 2 · 2018-07-27T06:14:50.810

You are adding label programmatically to the headerView which should be removed before adding again. dequeueReusableSupplementaryView do not remove programmatically added subviews.

In your code:

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    if kind == UICollectionElementKindSectionHeader {
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderDiscoverVC", for: indexPath) as! HeaderDiscoverVC
        headerView.frame = CGRect(x: 0, y: 0, width: collectionView.frame.width, height: 30)
        headerView.backgroundColor = UIColor.hex("d9e2e7")

        ///// Add below code to remove all subviews first before adding any new subview programmatically 
        for label in headerView.subviews {
            if let mylabel = label as? UILabel {
                mylabel.removeFromSuperview()
            }
        }

        ////////////////
        let label = UILabel(frame: CGRect(x: 16, y: 0, width: headerView.frame.width, height: 30))

        switch segReusableIdentifier {
        case "Reply":
            label.text = "Reply"
        case "Media":
            label.text = "Media"
        case "Likes":
            label.text = "Likes"
        case "Comments":
            label.text = "Comments"
        default:
            label.text = ""
        }
        label.font = UIFont(name: Fonts.OpenSans_Bold, size: 16)
        label.textColor = UIColor.hex("8a9da6")
        headerView.addSubview(label)
        return headerView
    }

   fatalError("Unexpected element kind")
}

Better approach will be to keep the label in HeaderDiscoverVC and use it in the code as:

 headerView.label.text = "Your data"

In this way you don't have to remove subViews programmatically.

UICollectionView Header title change

2 Answers2