ios 如何在 UICollectionView 中添加部分标题？

How do I add a section title in UICollectionView?

提问by Ankit garg

I need a label above every section in my Collection View. I've tried simply dragging a label into my header space above my prototype cell, but every time I run the app, the label is not visible.

我需要在我的收藏视图中的每个部分上方都有一个标签。我试过简单地将标签拖到原型单元上方的标题空间中，但每次运行应用程序时，标签都不可见。

Any help?

有什么帮助吗？

回答by Ankit garg

To add the custom label above every section in UICollectionView, please follow below steps

要在 UICollectionView 的每个部分上方添加自定义标签，请按照以下步骤操作

1. Enable the section header in UICollectionView

1. 在 UICollectionView 中启用部分标题

1. Add a new file of type UICollectionReusableView
2. In the storyboard change the class of section header in UICollectionViewCell to the newly added file of type UICollectionReusableView.
3. Add a label in section header of UICollectionViewCell in storyboard

4. Connect the label in the section header to the UICollectionReusableView file

   class SectionHeader: UICollectionReusableView {
       @IBOutlet weak var sectionHeaderlabel: UILabel!
   }
   

5. In the ViewController add the below code

   func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
   
       if let sectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "SectionHeader", for: indexPath) as? SectionHeader{
           sectionHeader.sectionHeaderlabel.text = "Section \(indexPath.section)"
           return sectionHeader
       }
       return UICollectionReusableView()
   }
   

2. 添加一个 UICollectionReusableView 类型的新文件
3. 在 storyboard 中，将 UICollectionViewCell 中的 section header 类更改为新添加的 UICollectionReusableView 类型的文件。
4. 在情节提要中 UICollectionViewCell 的部分标题中添加标签

5. 将部分标题中的标签连接到 UICollectionReusableView 文件

   class SectionHeader: UICollectionReusableView {
       @IBOutlet weak var sectionHeaderlabel: UILabel!
   }
   

6. 在 ViewController 中添加以下代码

   func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
   
       if let sectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "SectionHeader", for: indexPath) as? SectionHeader{
           sectionHeader.sectionHeaderlabel.text = "Section \(indexPath.section)"
           return sectionHeader
       }
       return UICollectionReusableView()
   }
   

Here "SectionHeader" is name of the file added to type UICollectionReusableView

这里“SectionHeader”是添加到类型 UICollectionReusableView 的文件的名称

回答by matt

Implement collectionView:viewForSupplementaryElementOfKind:atIndexPath:and supply a dequeued UICollectionElementKindSectionHeader containing your label. If this is a flow layout, be sure also to set the headerReferenceSizeor you still won't see anything.

实现collectionView:viewForSupplementaryElementOfKind:atIndexPath:并提供一个包含您的标签的出列 UICollectionElementKindSectionHeader。如果这是一个流布局，一定要设置headerReferenceSize否则你仍然看不到任何东西。

回答by iYoung

From @david72's answer

来自@david72 的回答

You need to perform following things:

您需要执行以下操作：

1. Enable the section header/footer view in Storyboard.
2. Implement collectionView:viewForSupplementaryElementOfKindmethod.

1. 在 Storyboard 中启用部分页眉/页脚视图。
2. 实施collectionView:viewForSupplementaryElementOfKind方法。

For more details see here

有关更多详细信息，请参阅此处

回答by Ever Uribe

If you want a programmatic solution in Swift 4.2, you can do the following:

如果您想要 Swift 4.2 中的程序化解决方案，您可以执行以下操作：

1. Setup the UICollectionViewDelegate and UICollectionViewDelegateFlowLayout

2. Make custom UICollectionReusableView subclasses with whatever views you want defined. Here's one for a header, you can create another for a footer with different characteristics:

   class SectionHeader: UICollectionReusableView {
        var label: UILabel = {
        let label: UILabel = UILabel()
        label.textColor = .white
        label.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
        label.sizeToFit()
        return label
    }()
   
   override init(frame: CGRect) {
        super.init(frame: frame)
   
        addSubview(label)
   
        label.translatesAutoresizingMaskIntoConstraints = false
        label.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        label.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 20).isActive = true
        label.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
   }
   
       required init?(coder aDecoder: NSCoder) {
           fatalError("init(coder:) has not been implemented")
       }
   }
   

3. Implement the viewForSupplementaryElementOfKind method with the custom views:

   func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 
       if kind == UICollectionView.elementKindSectionHeader {
            let sectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "header", for: indexPath) as! SectionHeader
            sectionHeader.label.text = "TRENDING"
            return sectionHeader
       } else { //No footer in this case but can add option for that 
            return UICollectionReusableView()
       }
   }
   

4. Implement the referenceSizeForHeaderInSection and referenceSizeForFooterInSection methods. Header method shown below for example:

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

1. 设置 UICollectionViewDelegate 和 UICollectionViewDelegateFlowLayout

2. 使用您想要定义的任何视图制作自定义 UICollectionReusableView 子类。这是页眉的一个，您可以为具有不同特征的页脚创建另一个：

   class SectionHeader: UICollectionReusableView {
        var label: UILabel = {
        let label: UILabel = UILabel()
        label.textColor = .white
        label.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
        label.sizeToFit()
        return label
    }()
   
   override init(frame: CGRect) {
        super.init(frame: frame)
   
        addSubview(label)
   
        label.translatesAutoresizingMaskIntoConstraints = false
        label.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        label.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 20).isActive = true
        label.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
   }
   
       required init?(coder aDecoder: NSCoder) {
           fatalError("init(coder:) has not been implemented")
       }
   }
   

3. 使用自定义视图实现 viewForSupplementaryElementOfKind 方法：

   func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 
       if kind == UICollectionView.elementKindSectionHeader {
            let sectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "header", for: indexPath) as! SectionHeader
            sectionHeader.label.text = "TRENDING"
            return sectionHeader
       } else { //No footer in this case but can add option for that 
            return UICollectionReusableView()
       }
   }
   

4. 实现 referenceSizeForHeaderInSection 和 referenceSizeForFooterInSection 方法。标题方法如下所示：

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