Is it possible to create a supplementary side view for a UICollectionView on the side instead of as a header or footer?

Question

I'm trying to create a setup where I have a UICollectionView with a header on top, and then another supplementary view on the side. I can't just place the supplementary view outside of the collectionView because it shares space with the collectionView cells inside of the collectionView and I also want it to scroll with it. Here's how it should look:

I've been thinking, and one solution I can think of is making a big collectionView, with the supplementary side view and the view to the right as cells of it, with the header as its header. However, I've heard it's not great to put a collectionView inside of a collectionView, especially if the scrolling directions are the same, and I also want to dynamically load more cells as I scroll, so in that case I would have to dynamically keep resizing the cell.

Is this configuration possible, in an elegant manner? Thanks!

Answer 1

It is possible to achieve that . There is a easy way that set Frame of Supplementary View and add UIEdgeInsets in the left of SectionInset .

Code as follow :

flowLayout = new UICollectionViewFlowLayout (){
    HeaderReferenceSize = new CGSize(50, 50),
    SectionInset = new UIEdgeInsets (20,65,20,20),
    ScrollDirection = UICollectionViewScrollDirection.Vertical,
    MinimumInteritemSpacing = 10, // minimum spacing between cells
    MinimumLineSpacing = 10 // minimum spacing between rows if ScrollDirection is Vertical or between columns if Horizontal
};

The custom UICollectionReusableView class :

public class Header : UICollectionReusableView
{
    UILabel label;

    public string Text {
        get {
            return label.Text;
        }
        set {
            label.Text = value;
            SetNeedsDisplay ();
        }
    }

    [Export ("initWithFrame:")]
    public Header (CGRect frame) : base (frame)
    {
        BackgroundColor = UIColor.Red;
        label = new UILabel (){Frame = new CGRect (0,80,50,500), BackgroundColor = UIColor.Yellow};
        label.Lines = 5;
        AddSubview(label);
    }
}

The effect :

Above code based on this official sample to modify .