How can I add a title/label supplementary view for each cell in a UICollectionViewFlowLayout?

Question

All examples I've seen use the supplementary view as headers or footers. I need to add a label above and/or below each cell in my flow layout.

At first I thought all I had to do was register a class for a supplementary view of kind and then implement collectionViewForSupplementaryElementOfKindAtIndexPath and I'd be good to go, but it seems FlowLayout out of the box only supports headers and footers.

The apple docs seems to suggest anything more will require a subclassing effort of FlowLayout.

Since I don't want to rework the work apple has done for flow layout and since my cells are expected to differ in size, I'd like to extend Flow Layout to support a supp view per cell.

I'm thinking I should be able to accomplish this by subclassing UICollectionViewFlowLayout.

But I'm not sure how to tell the flow layout to ask for a supplementary view for each cell. Simply registering a class for the supp view does not force the layout to invoke layoutAttributesForSupplementaryViewOfKind. As it stands, that is never called in my subclass. I figured if i reg a class for a supp view, it should ask for the sup view for each of the items in my section... this seems to be an incorrect assumption.

I've seen a great custom layout example where the layout was manually managed using NSDictionaries but I'm not sure how to apply that knowledge to the built-in flow layout.

Answer 1

Well, you'll need to add attributes that describe a reusable view for each cell that you need one for. you can add these attributes for each cell based on the attributes that should already be there for laying out your cells. you can do this in 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;
}

Then you can implement collectionViewForSupplementaryElementOfKindAtIndexPath to describe what the view should look like.

And like Derrick Hathaway mentioned, the flow layout will not size row heights considering the heights of the supp views so make sure to adjust your min row height on your collection view appropriately.