How to set referenceSizeForHeaderInSection when the collectionview layout scrolling direction is Horizontal?

Question

The header gets added properly if I don't specify the scroll direction. But if I specify it, The cells are replaced by the header view. Only the header view will be dispalyed. How to resolve this? Please help!

class HongbeiCollectionView: UICollectionView,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UICollectionViewDelegate {

var hongbeiData : [Hongbei]!

override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal

//        layout.headerReferenceSize = CGSize(width: frame.width, height: 10)
    super.init(frame: frame, collectionViewLayout: layout)



}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
    print("Hongbei")
    return hongbeiData.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
    print("cell is  being called")
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HongbeiCell", for: indexPath) as! HongbeiCell
   cell.hongbeiButton.sd_setImage(with: URL.init(string: hongbeiData[indexPath.item].video_img ?? ""), for: .normal, placeholderImage: #imageLiteral(resourceName: "moren-2"))
     cell.hongbeiButton.clipsToBounds = true
    cell.hongbeiButton.layer.cornerRadius = 10.0

    print("title is \(hongbeiData[indexPath.item].title!)")
    cell.hongbeiLabel.text = hongbeiData[indexPath.item].title!
    cell.setID(id: hongbeiData[indexPath.item].video_id!)
    cell.hongbeiButton.setTitle("Button \(indexPath)", for: .normal)

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
    return CGSize(width: 150, height: 150)

}

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView{
    print("viewForSupplementaryElementOfKind is called")
    let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "HeaderForCollectionView", for: indexPath as IndexPath) as! HeaderForCollectionView
    headerView.labelHeader.text = "Hongbei"

    return headerView

}


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

    return UIEdgeInsets(top: 0, left: 20.0, bottom: 0, right: 0.0)
}

}

If I Specify the referenceSizeForHeaderInSection's width less than collectionview.frame.width then header view will be displayed first followed by cells.

Also, If you notice OneyuanZone CollectionView is vertical scrolling and its header is added properly.

Answer 1

Here in the code below,

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

the width of the header you have given is the the complete collectionView's width. This is the reason the cells are not visible. Try reducing it so that you can see the cells as well.

Try using the below code instead.

CGSize(width: collectionView.frame.width - 50, height: 30)

Edit:

View Hierarchy Screenshot:

Let me know if you still face any issues.