Xamarin iOS. Can I use collection view inside of stackView control (as item of stackview)?

Question

I have simple application which contains UICollectionViewController with custom UICollectionViewCell. The controller is placed in Mainstoryboard (I use native xamarin). My application works, but I want to add a common 'header' control above of my collection view (with buttons and labels which will work with/describe collection). I had expected, it can be done by UIStackView when my already created collection view would be in the bottom of StackView and my newly creted 'header' control in the top. But as I may see, I cannot add my UICollectionViewController as item of Stack view. I think it can be done by TabBarController, but it looks like it's not a good idea, especially If i have more then one a potencial control buttons for my collection view. Maybe there is a better solution? Could someone advise me?

score 0 · Answer 1 · answered Mar 05 '18 at 02:58

You can Create a new UIViewController, put a UIStackView in it. Then initialize your UICollectionViewController in Storyboard, add its view in the StackView:

UIView headerView = new UIView();
...//Add some items in this view

//Add a height constraint
headerView.AddConstraint(NSLayoutConstraint.Create(headerView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 200));
MyStack.AddArrangedSubview(headerView);

MyCollectionView collection = Storyboard.InstantiateViewController("MyCollectionView") as MyCollectionView;
MyStack.AddArrangedSubview(collection.View);

But if you only want to add a header view, I recommend you to use UICollectionView's Header.

Firstly, Use the event below to create the header in the CollectionView's
Source:

public override UICollectionReusableView GetViewForSupplementaryElement(UICollectionView collectionView, NSString elementKind, NSIndexPath indexPath)
{

    if (elementKind == "UICollectionElementKindSectionHeader" && indexPath.Section == 0)
    {
        UICollectionReusableView header = collectionView.DequeueReusableSupplementaryView(new NSString("UICollectionElementKindSectionHeader"), "MyHeader", indexPath);

        //Add some items
        //header.AddSubview();

        return header;
    }

    return null;
}

Do not forget register the Header Class: CollectionView.RegisterClassForSupplementaryView(typeof(UICollectionReusableView), new NSString("UICollectionElementKindSectionHeader"), "MyHeader");

At last set the Header's height to show it:

// This event exists in the UICollectionViewDelegateFlowLayout
public override CGSize GetReferenceSizeForHeader(UICollectionView collectionView, UICollectionViewLayout layout, nint section)
{
    if (section == 0)
    {
        return new CGSize(UIScreen.MainScreen.Bounds.Size.Width, 300);
    }
    return CGSize.Empty;
}

score 0 · Answer 2 · answered Mar 05 '18 at 08:54

You can add your UICollectionView as a subview to UIStackView by creating a UIViewController in storyboard and just drag and drop UIStackView and UICollectionView as a subview inside it. and assign the View Controller as the Collection View’s data source property For Common header control, you might wanna a create a custom UIView using either XIB or by programmatic approach by creating a sub class of UIView.

so your controller hierarchy would be

->UIViewController
    ->UIStackView
        ->UIView
        ->UICollectionView

However, UIStackView is ideal for situation where you have a complex view hierarchy where you don't have to deal with multiple auto layout constraints by yourself, but it has some common issues you might want to look at this post.

If that's not the case then you should use a simpler approach and just add constraints manually to layout your views.

Xamarin iOS. Can I use collection view inside of stackView control (as item of stackview)?

2 Answers2