将自定义 header 添加到 collection 视图 swift

Question

我正在尝试使用自定义 xib 文件将 header 添加到 collectionView。我使用 class 实现 UICollectionReusableView 创建了 xib 文件。在 collectionViewController 中，我注册了 xib 文件，如下所示：

self.collectionView.register(UINib(nibName: HCollectionReusableView.nibName, bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: HCollectionReusableView.reuseIdentifier)

之后 viewForSupplementaryElementOfKind 我做了

let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: HCollectionReusableView.reuseIdentifier, for: indexPath) as! HCollectionReusableView

以及尺码

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

我收到错误消息：无法加载捆绑包中的 NIB。任何遗漏的代码？

HCollectionReusableView class:

class HCollectionReusableView: UICollectionReusableView {

static var nibName : String
    {
    get { return "headerNIB"}
}

static var reuseIdentifier: String
    {
    get { return "headerCell"}
}



override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

}

Answer 1

您是否在 xib 文件中设置了文件所有者设置？将文件所有者更改为托管 collectionView 的视图控制器。

Answer 2

您需要这样调用 viewForSupplementaryElementOfKind：

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

    switch kind {
    case UICollectionElementKindSectionHeader:
           let reusableview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "HCollectionReusableView", for: indexPath) as! HCollectionReusableView

            reusableview.frame = CGRect(0 , 0, self.view.frame.width, headerHight)
         //do other header related calls or settups
            return reusableview


    default:  fatalError("Unexpected element kind")
    }
}

这样你就可以初始化并显示 header

另一种设置 UICollectionViewHeader 框架的方法是像这样扩展 UICollectionViewDelegateFlowLayout：

extension UIViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: 100) //add your height here
    }
}

这样就无需调用 :

reusableview.frame = CGRect(0 , 0, self.view.frame.width, headerHight)

在上面提到的

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView

Remember to register the HeaderView after you initialise your UICollectionView by calling:

collectionView.register(UINib(nibName: HCollectionReusableView.nibName, bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "HCollectionReusableView")

Swift 4.1 更新

UICollectionElementKindSectionHeader 已重命名为 UICollectionView.elementKindSectionHeader

Answer 3

final class MyCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

override func viewDidLoad() {
    super.viewDidLoad()

    self.collectionView!.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: MyCollectionReusableView.reuseIdentifierHeader)
}

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

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: MyCollectionReusableView.reuseIdentifierHeader, for: indexPath) as! MyCollectionReusableView
    header.setupView()
    
    return header
}
}

final class MyCollectionReusableView: UICollectionReusableView {

   static let reuseIdentifierHeader = "MyId"

   func setupView() {
      //Code...
   }

}

将自定义 header 添加到 collection 视图 swift

add custom header to collection view swift

uicollectionview

uicollectionreusableview

swift