UICollectionView：在标题和项目之间添加间距

Posted 2023-03-10

【中文标题】UICollectionView：在标题和项目之间添加间距

【英文标题】：UICollectionView: add spacing between header and items

【发布时间】：2016-01-27 17:02:59

【问题描述】：

我想在我的标题和实际项目之间添加一些间距，目前看起来像这样：

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView 
    // Create header
    switch kind
        case UICollectionElementKindSectionHeader:
            let headerView = iconCollectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "customIconHeaderView", forIndexPath: indexPath) as! CustonIconHeaderView
            headerView.setUp() //add whatever into the view
            return headerView
        default:
            assert(false, "Unexpected element kind")
    

【问题讨论】：

您可以添加一个间隔单元格作为该部分的第一个单元格。我知道这不是一个理想的实现，但万无一失

【参考方案1】：

您基本上是在谈论为集合视图部分添加上边距，因为您将为该部分设置 top inset。要在代码中实现，请实现 insetForSectionAtIndex:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets 
    return UIEdgeInsets(top: 10.0, left: 1.0, bottom: 1.0, right: 1.0)

如果您不想实现insetForSectionAtIndex，您也可以在适当的方法中执行类似的操作，例如viewDidLoad:

let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
layout.sectionInset = UIEdgeInsets(top: 10.0, left: 1.0, bottom: 1.0, right: 1.0)

在 Interface Builder 中，选择集合视图并更改 Section Insets -> Top 的值，如下图所示：

注意：这仅在您使用流式布局时有效。

【讨论】：

我在代码中做所有事情，当我更改insetForSectionAtIndex 时，它也会增加页眉的上边距。所以一切都向下移动。

您是说您不想实现insetForSectionAtIndex 方法吗？如果是这样，是的，你也可以这样做：let layout = collection.collectionViewLayout as! UICollectionViewFlowLayout; layout.sectionInset = UIEdgeInsets(top: 10.0, left: 1.0, bottom: 1.0, right: 1.0);

不，我实现了insetForSectionAtIndex，目前是UIEdgeInsets(top: 0.0, left: 20.0, bottom: 30.0, right: 20.0)，但是当我将top更改为10时，不仅项目向下移动，标题也向下移动。但我想要的只是节标题和项目之间的间距。

奇怪，你是如何返回你的节标题的？您是从您的func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView 退回的，对吗？我刚试过，它对我有用。

没关系，那是因为我也在使用自定义流布局。谢谢。

【参考方案2】：

您可以做的一种方法是使用增加标题容器的高度

collectionView(_:layout:referenceSizeForHeaderInSection:)

例子：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize 
    return CGSize(width: 0, height: yourHeaderContentHeight + yourHeaderMarginToCell)

编辑：

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView 
    let headerView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "YourID", forIndexPath: indexPath)

    let yourCustomView = UIView(frame: CGRect(x: 0, y: 0, width: yourHeaderWidth, height: yourHeaderHeight))

    headerView.addSubview(yourCustomView)

    return headerView


func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize 
    return CGSize(width: yourHeaderWidth, height: yourHeaderHeight + yourHeaderMargin)

【讨论】：

只是增加了页眉的高度，不过我正在为页眉使用自定义视图，我不知道这是否会影响任何事情

例如，您的自定义标题视图是40 pt 高度，referenceSizeForHeaderInSection 是60，如果您设置自定义标题视图的@987654328，这将在底部提供20 pt 间隙@正确:)

如何设置自定义视图的高度，我在代码中做所有事情。我在viewForSupplementaryElementOfKind 做吗？

哦，所以你建议使用headerView 作为容器视图？我这样做的方式是我将UIView 自定义为headerView，所以我只需要将它出列并在viewForSupplementaryElementOfKind 中返回它。

正确 :) 但是如果你不想让你的 customView 在 headerView 中，你可以随时绘制你的视图并在底部制作一个白色（任何颜色）条以模拟相同的视觉效果