UICollectionView - Curious flow layout

Question

I'm experiencing with the UICollectionView(Controller) for the first time. Actually it should be as simple as working with TableViews, it's not though.

Rather than showing all images in a flow (several rows) just the top row is displayed. All the other images are somewhere... scrolling is enabled but nothing happens, no bouncing, no scrolling, ... And after an orientation change (and back) some more images are visible but they appear randomly. After every orientation change they appear at an other location.

My example should have 7 images.

My properties in IB:

First time:

After rotating (and back):

And my source code to implement the photo gallery.

using System;

using MonoTouch.Foundation;
using MonoTouch.UIKit;
using System.Collections.Generic;
using Xamarin.Media;
using MonoTouch.AssetsLibrary;
using MonoTouch.CoreGraphics;
using System.Diagnostics;
using System.Linq;
using System.Drawing;

namespace B2.Device.iOS
{
    public partial class TagesRapportDetailRegieBilderCollectionViewController : UICollectionViewController
    {
        private const string Album = "Rapport";

        public TagesRapportDetailRegieBilderSource Source { get; private set; }
        private TagesRapportDetailRegieBilderDelegate _delegate;

        public TagesRapportDetailRegieBilderCollectionViewController (IntPtr handle) : base (handle)
        {
            Source = new TagesRapportDetailRegieBilderSource(this);
            _delegate = new TagesRapportDetailRegieBilderDelegate(this);

            // Delegate - Muss im konstruktor sein. ViewDidLoad geht nicht!
            CollectionView.Delegate = _delegate;
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            // Cell Klasse registrieren
            CollectionView.RegisterClassForCell (typeof(ImageCell), new NSString("imageCell"));

            // DataSource
            CollectionView.Source = Source;

            // Bilder laden
            LoadImages();
        }

        private void LoadImages()
        {
            Source.Images.Clear();

            var assetsLibrary = new ALAssetsLibrary();
            assetsLibrary.Enumerate(ALAssetsGroupType.Album, GroupsEnumeration, GroupsEnumerationFailure);
        }

        private void GroupsEnumeration(ALAssetsGroup group, ref bool stop)
        {
            if (group != null && group.Name == Album)
            {
                //notifies the library to keep retrieving groups
                stop = false;

                //set here what types of assets we want,
                //photos, videos or both
                group.SetAssetsFilter(ALAssetsFilter.AllPhotos);

                //start the asset enumeration
                //with ALAssetsGroup's Enumerate method
                group.Enumerate(AssetsEnumeration);

                CollectionView.ReloadData();
            }
        }

        private void AssetsEnumeration(ALAsset asset, int index, ref bool stop)
        {
            if (asset != null)
            {
                //notifies the group to keep retrieving assets
                stop = false;

                //use the asset here
                var image = new UIImage(asset.AspectRatioThumbnail());

                Source.Images.Add(image);
            }
        }

        private void  GroupsEnumerationFailure(NSError error)
        {
            if (error != null)
            {
                new UIAlertView("Zugriff verweigert", error.LocalizedDescription, null, "Schliessen", null).Show();
            }
        }
    }

    public class TagesRapportDetailRegieBilderDelegate : UICollectionViewDelegateFlowLayout
    {
        private TagesRapportDetailRegieBilderCollectionViewController _controller;

        public TagesRapportDetailRegieBilderDelegate(TagesRapportDetailRegieBilderCollectionViewController controller)
        {
            _controller = controller;
        }

        public override System.Drawing.SizeF GetSizeForItem(UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
        {
            var size = _controller.Source.Images[indexPath.Row].Size.Width > 0
                ? _controller.Source.Images[indexPath.Row].Size : new SizeF(100, 100);

            size.Width /= 3;
            size.Height /= 3;

            return size;
        }

        public override UIEdgeInsets GetInsetForSection(UICollectionView collectionView, UICollectionViewLayout layout, int section)
        {
            return new UIEdgeInsets(50, 20, 50, 20);
        }
    }

    public class TagesRapportDetailRegieBilderSource : UICollectionViewSource
    {
        private TagesRapportDetailRegieBilderCollectionViewController _controller;

        public List<UIImage> Images { get; set; }

        public TagesRapportDetailRegieBilderSource(TagesRapportDetailRegieBilderCollectionViewController controller)
        {
            _controller = controller;
            Images = new List<UIImage>();
        }

        public override int NumberOfSections(UICollectionView collectionView)
        {
            return 1;
        }

        public override int GetItemsCount(UICollectionView collectionView, int section)
        {
            return Images.Count;
        }

        public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = collectionView.DequeueReusableCell(new NSString("imageCell"), indexPath) as ImageCell;

            cell.Image = Images[indexPath.Row];

            return cell;
        }
    }

    public class ImageCell : UICollectionViewCell
    {
        UIImageView imageView;

        [Export ("initWithFrame:")]
        public ImageCell (System.Drawing.RectangleF frame) : base (frame)
        {
            imageView = new UIImageView(frame);
            imageView.AutoresizingMask = ~UIViewAutoresizing.None;
            ContentView.AddSubview (imageView);
        }

        public UIImage Image 
        {
            set 
            {
                imageView.Image = value;
            }
        }
    }
}

Answer 1

If all you want to do is displaying the cells in an uniform grid, overriding GetSizeForItem shouldn't be necessary in the first place. Just configure the cellsize property of your flow layout either in IB or programatically during ViewDidLoad and be done with it.

There's another problem with your code:

group.Enumerate(AssetsEnumeration)

This will run asynchronously. That means:

CollectionView.ReloadData();

Will only cover a small subset of your images. It would be better to issue a ReloadData() when group == null, which indicates that the enumeration is complete.

You could also avoid ReloadData alltogether and call CollectionView.InsertItem() everytime you've added an image. This has the benefit of your items become immediately visible instead of all of them at once after everything has been enumerated - which may take some time (on the device). The downside is that you've got to be careful to not run into this.