[Enhancement] [CollectionView] Allow ItemTemplate to set SpanSize in grid layout mode

[PawKanarek]

Summary

CollectionView right now (X.F 4.0.0.425677) doesn't have option to set ColumnSpan/RowSpan for ItemTemplates in Vertical/Horizontal grid layout mode.

API Changes

In Android GridLayoutManager there is option to set SpanSizeLookup, so implementation would be fairly easy.

// Idea: 
public class SpanSizeLookup : GridLayoutManager.SpanSizeLookup
{
    private readonly Adapter adapter;
    private readonly GridLayoutManager layoutManager;

    public SpanSizeLookup(Adapter adapter, GridLayoutManager layoutManager)
    {
        this.adapter = adapter;
        this.layoutManager = layoutManager;
    }

    public override int GetSpanSize(int position)
    {
        var item = this.adapter.Items.Cast<object>().ElementAt(position);

        if (item is ISpanDefintion spanDefinition)
        {
            return spanDefinition.SpanCount;
        }
        else
        {
            return 1;
        }
    }
}

iOS however can more hacky, because as far i know, there is no mechanism for defining span size for items, but UIColectionView can be very handy with different view cell sizes. So maybe manipulating cell size inside layoutAttributesForItemAtIndexPath method inside UICollectionViewFlowLayout would accomplish this feature: (code from stackoverflow answer)

1. Create the following flow layout subclass

class HorizontallyFlushCollectionViewFlowLayout: UICollectionViewFlowLayout {

    // Don't forget to use this class in your storyboard (or code, .xib etc)

    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = super.layoutAttributesForItemAtIndexPath(indexPath)?.copy() as? UICollectionViewLayoutAttributes
        guard let collectionView = collectionView else { return attributes }
        attributes?.bounds.size.width = collectionView.bounds.width - sectionInset.left - sectionInset.right
        return attributes
    }

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let allAttributes = super.layoutAttributesForElementsInRect(rect)
        return allAttributes?.flatMap { attributes in
            switch attributes.representedElementCategory {
            case .Cell: return layoutAttributesForItemAtIndexPath(attributes.indexPath)
            default: return attributes
            }
        }
    }
}

2. Register your collection view for automatic sizing

// The provided size should be a plausible estimate of the actual
// size. You can set your item size in your storyboard
// to a good estimate and use the code below. Otherwise,
// you can provide it manually too, e.g. CGSize(width: 100, height: 100)

flowLayout.estimatedItemSize = flowLayout.itemSize

3. Use the predefined width + custom height in your cell subclass

override func preferredLayoutAttributesFittingAttributes(layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    layoutAttributes.bounds.size.height = systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height
    return layoutAttributes
}

The iOS part is obviously harder, but i think that everyone would love to use this feature in their apps.

Intended Use Case

We could use this enhancement to create layouts that looks like this:

If idea with making customs span sizes is too hard, then for first iteration of this enhancement you could only add the possibility to render items with FullSpanSize (there is property in Android StaggeredGridLayoutManager to achieve this) so we could make layout like this:

[GeorgeVelikov]

I was surprised this wasn't considered yet tbh, it feels like such a common UI paradigm

[jfversluis]

Thanks for this suggestion! As Xamarin.Forms is now in maintenance mode, this will not happen anymore for Xamarin.Forms. We're only adding bugfixes and stability fixes.

If this is still important to you, make sure to check the .NET MAUI repo and see if it's already on the roadmap. If not, feel free to open a discussion to discuss a change first or open an issue with a detailed feature request. Thanks!