如何在UICollectionView中添加节标题？

Question

我的集合视图中的每个部分都需要一个标签.我试过简单地将标签拖到原型单元格上方的标题空间中,但每次运行应用程序时,标签都不可见.

有帮助吗？

Answer 1

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

1. 在UICollectionViewCell中启用节头

2. 添加UICollectionReusableView类型的新文件
3. 在故事板中,将UICollectionViewCell中的节头类更改为新添加的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()
   }
   

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

Answer 2

实现collectionView:viewForSupplementaryElementOfKind:atIndexPath:并提供包含标签的出列UICollectionElementKindSectionHeader.如果这是一个流程布局,请务必设置headerReferenceSize或仍然看不到任何内容.

Answer 3

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

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

Answer 4

来自@ david72的回答

您需要执行以下操作:

1. 在Storyboard中启用节头/页脚视图.
2. 实施collectionView:viewForSupplementaryElementOfKind方法.

有关详细信息,请参阅此处