如何在 UICollectionView 中添加章节标题？

Question

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

有什么帮助吗？

Answer 1

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

1. 在 UICollectionView 中启用节标题

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 方法。 Header 方法如下所示：

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

Answer 4

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

有什么帮助吗？