Collection View flow layout with zoom effect and three items visible

Question

This question might be marked as not well asked, but better thy.

I am trying to find a solution on how to create a collection view in Xamarin.iOS with three items visible one centered and two on both sides partially visible left and right. Something like this https://github.com/lukagabric/LGLinearFlow. I found many swift and objective c implementations but nothing for Xamarin.iOS.

The closest i found was using custom UICollectionViewFlowLayout in the documentation under section Subclassing UICollectionViewFlowLayout https://learn.microsoft.com/en-us/xamarin/ios/user-interface/controls/uicollectionview but is not defined how to use it.

Do you know some implementation or how to implement it in Xamarin.iOS Native?

Answer 1

As you post, this documentation https://learn.microsoft.com/en-us/xamarin/ios/user-interface/controls/uicollectionview has told us how to implement the flowLayout. We just need to initialize a UICollectionView with this flow layout.

Construct a new Collection View:

LineLayout lineLayout = new LineLayout();

UICollectionView collectionView = new UICollectionView(View.Bounds, lineLayout);
View.AddSubview(collectionView);
collectionView.DataSource = new MyCollectionViewSource();
collectionView.BackgroundColor = UIColor.White;

collectionView.RegisterNibForCell(UINib.FromName("MyCollectionViewCell", null), "Cell");

Then its dataSource can be like this:

public class MyCollectionViewSource : UICollectionViewDataSource
{
    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        MyCollectionViewCell cell = collectionView.DequeueReusableCell("Cell", indexPath) as MyCollectionViewCell;

        cell.MyStr = "label" + indexPath.Row;

        return cell;
    }

    public override nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        return 20;
    }       
}

Please notice that the constant in the LineLayout can be adjusted to fit your requirement. And the SectionInset means the distance between each section, we should adjust this to ensure that CollectionView has only one row.

I made a sample here for you referring to.