Header 未在 UICollectionView 中显示

Question

我已经以编程方式构建了一个 collection 视图，它运行良好，但是我正在尝试添加一个 header，但是 header 的顶部没有显示任何内容。以下是我认为重要的代码行：

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

我不确定我是否遗漏了一些重要的代码，或者是否有什么东西放错了地方？任何帮助将不胜感激。

谢谢！

Answer 1

声明collection视图、UICollectionViewFlowLayout、cellId和headerId:

class YourController: UIViewController {

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

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

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

现在在一个单独的扩展中（代码很干净）符合 collection 委托和数据源：

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

现在为 header 设置可重用视图：

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

这是结果：

Header 未在 UICollectionView 中显示

Header Not Showing in UICollectionView

ios

uicollectionview

swift