如何添加 UICollectionView 标头

Question

我希望以编程方式向我的 UICollectionView 添加一个标签，并使用 viewForSupplementaryElementOfKind 和 referenceSizeForHeaderInSection 来设置它，但是由于某种原因，当我设置我的视图时，它仍然将它放在我的 CollectionView 的第一行而不是创建的标题。 As you can see in this screenshot, "Today" is in the first cell, instead of the header I created for it

class TvController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

private let cellId = "cellId"
private let headerId = "headerId"

override func viewDidLoad() {
    super.viewDidLoad()

    navigationItem.title = "TV"
    navigationController?.navigationBar.isTranslucent = false

    collectionView?.backgroundColor = .white

    collectionView?.register(TvCell.self, forCellWithReuseIdentifier: cellId)
    collectionView?.register(Header.self, forCellWithReuseIdentifier: headerId)

}

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

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath)

    return cell
}

//Row for each TV show
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width, height: 120)
}

//Today's date header
override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableCell(withReuseIdentifier: headerId, for: indexPath) as! Header

    return header
}

//Today's date header
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: view.frame.width, height: 60)
}
}

这里是 Header 类

class Header: UICollectionViewCell  {

override init(frame: CGRect)    {
    super.init(frame: frame)
    setupHeaderViews()
}

let dateLabel: UILabel = {
    let title = UILabel()
    title.text = "Today"
    title.textColor = .gray
    title.backgroundColor = .black
    title.font = UIFont(name: "Montserrat", size: 17)
    title.translatesAutoresizingMaskIntoConstraints = false
    return title
}()

func setupHeaderViews()   {
    addSubview(dateLabel)

    dateLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 20).isActive = true
    dateLabel.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
    dateLabel.widthAnchor.constraint(equalToConstant: 120).isActive = true
    dateLabel.heightAnchor.constraint(equalToConstant: 30).isActive = true
}


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

Answer 1

您使用错误的方法来注册您的标头。 您还使用错误的方法出列。由于您将标头注册为 forSupplementaryViewOfKind - 您必须使用 'dequeueReusableSupplementaryView' 方法而不是 'dequeueReusableCell'

来使用 deque 标头

 override func viewDidLoad() {
    collectionView?.register(Header.self, forSupplementaryViewOfKind:
       UICollectionElementKindSectionHeader, withReuseIdentifier: headerId)
  }


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

Answer 2

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderId", for: indexPath) as! HeaderClassname
    switch kind {
    case UICollectionElementKindSectionHeader:
        if indexPath.section == 0 {
            //Your Code Here
        } else {
        }
        return headerView

    default:
        assert(false, "Unexpected element kind")
    }

    return headerView
}