标头未显示在UICollectionView中

如何解决标头未显示在UICollectionView中

我以编程方式构建了一个集合视图，该视图工作正常，但是我尝试添加标题，但标题的顶部没有显示任何内容。 以下是我所包含的我认为很重要的代码行：

 collectionView.register(HeaderCollectionReusableView.self,forSupplementaryViewOfKind: UICollectionElementKindSectionHeader,withReuseIdentifier: HeaderCollectionReusableView.identifier)

func collectionView(_ collectionView: UICollectionView,viewForSupplementaryElementOfKind kind: String,at indexPath: IndexPath) -> UICollectionReusableView {
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader,withReuseIdentifier: HeaderCollectionReusableView.identifier,for: indexPath) as! HeaderCollectionReusableView
        
        header.backgroundColor = .red
        
        return header
    }

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

我不确定我是否丢失了一些重要的代码或是否在错误的位置？ 任何帮助将不胜感激。

谢谢！

解决方法

声明集合视图，UICollectionViewFlowLayout，cellId和headerId：

class YourController: UIViewController {

private var collectionView: UICollectionView?
let layout = UICollectionViewFlowLayout()
let cellId = "cellId"
let headerId = "headerId"

现在在viewDidLoad中设置布局，收集并添加约束：

layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: view.bounds.size.width / 2.2,height: view.bounds.size.width / 2.2) // set item size
    
collectionView = UICollectionView(frame: .zero,collectionViewLayout: layout)
collectionView?.delegate = self
collectionView?.dataSource = self
collectionView?.backgroundColor = .clear
collectionView?.register(MyCell.self,forCellWithReuseIdentifier: cellId)
collectionView?.register(MyHeader.self,forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,withReuseIdentifier: headerId)
collectionView?.contentInset = UIEdgeInsets(top: 0,left: 10,bottom: 0,right: 10)
collectionView?.translatesAutoresizingMaskIntoConstraints = false
    
guard let collection = collectionView else { return }
    
view.addSubview(collection)
collection.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
collection.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
collection.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
collection.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true

现在在单独的扩展程序中（代码很简洁），符合集合委托和数据源：

extension YourController: UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView,numberOfItemsInSection section: Int) -> Int {
    return 10
}

func collectionView(_ collectionView: UICollectionView,cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId,for: indexPath) as! MyCell
    
    return cell
}

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

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

之后，设置您的自定义单元格：

class MyCell: UICollectionViewCell {
override init(frame: CGRect) {
    super.init(frame: frame)
    contentView.backgroundColor = .link
}

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

现在设置标题的可重用视图：

class MyHeader: UICollectionReusableView {

private let label: UILabel = {
    let label = UILabel()
    label.text = "This is the header"
    label.textAlignment = .center
    label.textColor = .white
    label.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}()

public func configure() {
    backgroundColor = .systemGreen
    addSubview(label)
    label.topAnchor.constraint(equalTo: topAnchor).isActive = true
    label.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    label.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
    label.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
 }
}

这是结果：