如何为 UICollectionViewFlowLayout 中的每个单元格添加标题/标签补充视图？

Posted 2023-03-10

【中文标题】如何为 UICollectionViewFlowLayout 中的每个单元格添加标题/标签补充视图？

【英文标题】：How can I add a title/label supplementary view for each cell in a UICollectionViewFlowLayout?

【发布时间】：2013-06-04 16:55:22

【问题描述】：

我见过的所有示例都将补充视图用作页眉或页脚。我需要在流程布局中的每个单元格上方和/或下方添加一个标签。

起初我以为我所要做的就是为种类的补充视图注册一个类，然后实现 collectionViewForSupplementaryElementOfKindAtIndexPath 我会很高兴，但是似乎 FlowLayout 开箱即用只支持页眉和页脚。

Apple 文档似乎暗示更多需要FlowLayout 的子类化工作。

由于我不想重做 Apple 为流布局所做的工作，而且我的单元格的大小预计会有所不同，因此我想扩展 Flow Layout 以支持每个单元格的支持视图。

我想我应该能够通过继承 UICollectionViewFlowLayout 来实现这一点。

但我不确定如何告诉流程布局为每个单元格请求补充视图。 简单地为 supp 视图注册一个类不会强制布局调用 layoutAttributesForSupplementaryViewOfKind。就目前而言，这从未在我的子类中调用过。我想如果我为 supp 视图注册一个类，它应该为我的部分中的每个项目请求 sup 视图......这似乎是一个不正确的假设。

我见过一个很棒的自定义布局示例，其中使用 NSDictionaries 手动管理布局，但我不确定如何将这些知识应用到内置流布局中。

【问题讨论】：

您能否更新您的 UITableViewCell 以仅包含页眉和页脚标签？这比管理一堆补充视图要简单得多。

@DerrickHathaway 是的，这是最初的想法。我只是想在我的 UICollectionViewCell 中有一个固定在顶部的标签。但是因为单元格大小是动态的，而且文本可能很长，有时标签对于单元格的大小来说太大了，所以我想尝试将标题标签拆分为补充标题标签。

...必须有一个相当直接的方法来做到这一点

我能看到的唯一方法就像你建议的那样：子类 UICollectionViewFlowLayout 并提供你自己的 SupplementaryViews。如果补充标签的尺寸相当大，您甚至可能无法使用流布局来做到这一点，因为我认为流布局不会尊重您自己的自定义补充视图使用的空间。

【参考方案1】：

好吧，您需要为需要的每个单元格添加描述可重用视图的属性。您可以根据应该已经存在的用于布置单元格的属性为每个单元格添加这些属性。您可以在 layoutAttributesForElementInRect 中执行此操作。

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

    //first get a copy of all layout attributes that represent the cells. you will be modifying this collection.
    NSMutableArray *allAttributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy]; 

    //go through each cell attribute
    for (UICollectionViewLayoutAttributes *attributes in [super layoutAttributesForElementsInRect:rect])
    
        //add a title and a detail supp view for each cell attribute to your copy of all attributes
        [allAttributes addObject:[self layoutAttributesForSupplementaryViewOfKind:SomeCellDetailsKind atIndexPath:[attributes indexPath]]];
        [allAttributes addObject:[self layoutAttributesForSupplementaryViewOfKind:SomeCellTitleKind atIndexPath:[attributes indexPath]]];
    

    //return the updated attributes list along with the layout info for the supp views
    return allAttributes;


-(UICollectionViewLayoutAttributes*) layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
    //create a new layout attributes to represent this reusable view
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:kind withIndexPath:indexPath];

    if(attrs)

        //get the attributes for the related cell at this index path
        UICollectionViewLayoutAttributes *cellAttrs = [super layoutAttributesForItemAtIndexPath:indexPath];

        if(kind == SomeCellDetailsKind)
            //position this reusable view relative to the cells frame
            CGRect frame = cellAttrs.frame;
            frame.origin.y += (frame.size.height - _detailHeight);
            frame.size.height = _detailHeight;
            attrs.frame = frame;
        

        if(kind == SomeCellTitleKind)
            //position this reusable view relative to the cells frame
            CGRect frame = cellAttrs.frame;
            frame.origin.y -= _titleHeight; //+= frame.size.height; //( - frame.size.height;
            frame.size.height = _titleHeight;
            attrs.frame = frame;
        
    

    return attrs;

然后你可以实现 collectionViewForSupplementaryElementOfKindAtIndexPath 来描述视图应该是什么样子。

就像 Derrick Hathaway 提到的那样，流布局不会考虑 supp 视图的高度来调整行高，因此请确保适当地调整集合视图上的最小行高。

【讨论】：

非常感谢您的回答。我知道这是一年多之后的事了，但经过 5 小时的尝试，您才帮我解决了我的问题！

@DBoyer 有同样的问题，你是怎么解决这个问题的，上面的代码对我不起作用。

@kokemomuke 有 2 个选项：使用节页眉/页脚，并为所有数据使用一个包含单个单元格的节（如果你能侥幸逃脱的话，这是迄今为止最简单的）。另一个是上面建议的；自定义 UICollectionViewFlowLayout。我强烈建议在尝试自己添加额外的补充视图之前先自定义 UICollectionViewFlowLayout。