collectionview布局滚动方向为Horizo​​ntal时如何设置referenceSizeForHeaderInSection？

Question

如果我不指定滚动方向，header 会正确添加。但是如果我指定它，单元格将被 header 视图替换。只会显示 header 视图。如何解决这个问题？请帮忙！

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

}

如果我指定 referenceSizeForHeaderInSection's 宽度小于 collectionview.frame.width，则 header 视图将首先显示，然后是单元格。

此外，如果您注意到 OneyuanZone CollectionView 是垂直滚动的，并且它的 header 添加正确。

Answer 1

在下面的代码中，

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

您提供的页眉宽度是完整的 collectionView's 宽度。这就是细胞不可见的原因。尝试减少它，以便您也可以看到细胞。

请尝试使用以下代码。

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

编辑：

查看层次结构屏幕截图：

如果您仍然遇到任何问题，请告诉我。