Implement The Dynamic Collection View In Xamarin.iOS

Introduction

In this article, I have explained about dynamic collection view feature in iOS and if you add collection view in your apps, its main job is to manage the data associated with collection. The collection view presents items onscreen using a cell, which is an instance of the UICollectionView class that your data source configures and provides.

Data in the collection view is organized into individual items, which you can group into sections for presentation. An item is the smallest unit of data you want to present

The collection view gets its data from the data source object, stored in the collection view’s property.

Step 1

Create Main.storyboard in your project and map the corresponding UIViewController in custom class panel.

Step 2

Add collection view control in Main.Storyboard from toolbar and set the constraints.

Set your Identifier as Cell and refer below screenshot Collection Resusable view panel.

Step 3

We need to set grid count value programmatically and paste the below code in ViewDidLoad method to initialize the grid row count.

var itemsPerRow = 3;
var paddingSapce = layout.SectionInset.Left * (itemsPerRow + 1);
var availableWidth = View.Frame.Width - paddingSapce;
var WidthPerItem = availableWidth / itemsPerRow;
layout.SectionInset = new UIEdgeInsets(5, 5, 5, 5);
layout.MinimumInteritemSpacing = 0;
layout.MinimumLineSpacing = 15;
layout.ItemSize = new CGSize(width: WidthPerItem + 35, height: WidthPerItem);
GridCollectionView.CollectionViewLayout = layout;

Step 4

Have to define the list collection to bind the data’s in collection view and paste the below for adding list in collection view.

ModuleCollectionItem.Add(new ModuleDetails {
    CustomerName = "Manikandan", CustomerDesignation = "Engineer"
});
ModuleCollectionItem.Add(new ModuleDetails {
    CustomerName = "Jack Sparrow", CustomerDesignation = "Actor"
});
ModuleCollectionItem.Add(new ModuleDetails {
    CustomerName = "Win Diseal", CustomerDesignation = "Actor"
});
ModuleCollectionItem.Add(new ModuleDetails {
    CustomerName = "Angelina Jolie", CustomerDesignation = "Actors"
});
ModuleCollectionItem.Add(new ModuleDetails {
    CustomerName = "Robert", CustomerDesignation = "Scientist"
});
GridCollectionView.RegisterClassForCell(typeof(ModuleViewCell), animalCellId);
GridCollectionView.DataSource = new MyCollectionViewDataDelegate(ModuleCollectionItem);

Step 5

We need to create UICollectionView class to biding the each item in collection view control and paste the below code in ModuleViewCell.cs

public partial class ModuleViewCell: UICollectionViewCell {
    ModuleDetails model;
    public ModuleViewCell(IntPtr handle): base(handle) {}
        [Export("awakeFromNib")]
    public override void AwakeFromNib() {
        try {
            base.AwakeFromNib();
            CALayer layer = ModuleView.Layer;
            layer.ShadowColor = UIColor.Red.CGColor;
            layer.ShadowOffset = new Size(0, 0);
            layer.ShadowRadius = 5;
            layer.ShadowOpacity = (float) 0.1;
            layer.CornerRadius = 10;
            ModuleView.ClipsToBounds = false;
        } catch (Exception ex) {}
    }
    internal void ConfigureCell(ModuleDetails model) {
        try {
            this.model = model;
            this.CustomerName.Text = model.CustomerName.ToString();
            this.CustomerDesignation.Text = model.CustomerDesignation.ToString();
        } catch (Exception ex) {}
    }
}

Step 6

We need to create UICollectionView Data Source class to pass the list item to collection view binding with each item and item count event.

public class MyCollectionViewDataDelegate: UICollectionViewDataSource {
    private List < ModuleDetails > animals;
    public MyCollectionViewDataDelegate(List < ModuleDetails > animals) {
        this.animals = animals;
    }
    public override nint NumberOfSections(UICollectionView collectionView) {
        return 1;
    }
    public override nint GetItemsCount(UICollectionView collectionView, nint section) {
        return animals.Count;
    }
    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath) {
        ModuleViewCell cell = collectionView.DequeueReusableCell("Cell", indexPath) as ModuleViewCell;
        cell.ConfigureCell(model: this.animals[indexPath.Row]);
        return cell;
    }
}

Output Screenshot

Portrait

Landscape

Conclusion

Hopefully this article has given you sufficient information for you to implement the Dynamic Collection View in xamarin iOS. Feel free to leave a comment if you would like me to further elaborate on anything within this article.