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

Question

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

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

苹果文档似乎暗示更多需要FlowLayout的子类化工作.

因为我不想重做苹果为流程布局所做的工作,并且因为我的单元格大小不同,所以我想扩展Flow Layout以支持每个单元格的supp视图.

我想我应该能够通过继承UICollectionViewFlowLayout来实现这一目标.

但我不知道如何告诉流程布局要求每个单元格的补充视图.只需为supp视图注册一个类,就不会强制布局调用layoutAttributesForSupplementaryViewOfKind.就目前而言,我的子类中永远不会调用它.我想如果我为一个支持视图注册一个类,它应该要求我的部分中的每个项目的视图...这似乎是一个不正确的假设.

我已经看到了一个很棒的自定义布局示例,其中使用NSDictionaries手动管理布局,但我不确定如何将该知识应用于内置流布局.

Answer 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视图的高度,流布局不会调整行高,因此请确保在集合视图上适当调整最小行高.