Custom Cells In TableView In Xamarin.iOS Application

Introduction

In this article, we will use TableView using custom cells in Xamarin. We have an application with the table view having the list of employees with required details.

Prerequisites

1. Knowledge of C# programming
2. Basic understanding of Xamarin.

This article will cover the following points.

1. Table View in Xamarin iOS.
2. Custom cells in the Table View.

Implementation.

Open Visual Studio Community.

Select Single View app and click "Next".

Give the app a name and click "Next".

Give the project name and solution name and create the application.

Open Main.storyboard and add TableView from toolbox to your controller.

Drag the view to your controller.



We have to modify the table cell, that is, the free space there on the Table View.

 

Select the cell and you can see in property that the class of this type is UITableViewCell to which the cell is corresponding. Add the class (say Student) and hit Enter to generate the class file.

Pressing Enter after giving class name will create a class file of the following type.

Now, add three labels to your custom cell from the toolbox.

Set the identifier property of the above table cell to “cell_id” so as to access in TableView.

 

Now, modify the name properties for the added labels.

Now, your custom cell will be like the following.

Add the class file - Student.cs

using Foundation;
using System;
using UIKit;

namespace CustomCells
{
    public partial class Student
    {
        public string FullName { get; set; }
        public string Course { get; set; }
        public string Duration { get; set; }
        public Student()
        {
        }
    }
}

Open StudentCell.cs and replace the content with the following.

using Foundation;
using System;
using UIKit;

namespace CustomCells
{
    public partial class StudentCell : UITableViewCell
    {
        public StudentCellView (IntPtr handle) : base (handle)
        {
        }
        internal void UpdateCell(Student student) {
            FullNameLabel.Text = student.FullName;
            CourseLabel.Text = student.Course;
            DurationLabel.Text = student.Duration;
        }
    }
}

Open ViewController.cs and replace the content with the following.

using System;
using System.Collections.Generic;
using UIKit;

namespace CustomCells {
    public partial class ViewController : UIViewController {
        protected ViewController(IntPtr handle) : base(handle) {
            // Note: this .ctor should not contain any initialization logic.
        }
        List<Student> students;
        public override void ViewDidLoad() {
            base.ViewDidLoad();
            students = new List<Student>
            {

                new Student()
                {
                FullName = "Irshad", Course="MCA", Duration="3 Years"
                }
            ,
                new Student()
                {
                FullName = "Kailash", Course="BCA", Duration="3 Years"
                }
            ,
                new Student()
                {
                FullName = "Prteek", Course="B.Tech", Duration="4 Years"
                }
            ,
                new Student()
                {
                FullName = "Dilip", Course="PGDCA", Duration="1 Year"
                }
            ,
                new Student()
                {
                FullName = "Roshan", Course="B.Tech", Duration="4 Years"
                }

            };
            StudentTableView.Source = new StudentTVS(students);
            StudentTableView.RowHeight = UITableView.AutomaticDimension;
            StudentTableView.EstimatedRowHeight = 40f;
            StudentTableView.ReloadData();
        }

        public override void DidReceiveMemoryWarning() {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

Open StudentTVS.cs and replace the content with the following.

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;

namespace CustomCells {
    class StudentTVS : UITableViewSource {
        List<Student> students;
        public StudentTVS(List<Student> students) {
            this.students = students;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {
            var cell = (StudentCell)tableView.DequeueReusableCell("cell_Id", indexPath);
            var student = students[indexPath.Row];
            cell.UpdateCell(student);
            return cell;
        }
        public override nint RowsInSection(UITableView tableview, nint section) {
            return students.Count;
        }
    }
}


using Foundation;
using System;
using UIKit;

namespace TableView
{
    public partial class EmployeeCell : UITableViewCell
    {
        public EmployeeCell (IntPtr handle) : base (handle)
        {
        }

        internal void UpdateCell(Employee employee)
        {
            FullNameLabel.Text = employee.FullName;

            DepartmentLabel.Text = employee.Department;

            DescriptionLabel.Text = employee.Description;
        }
    }
}

Build and run the application.

If you have a long string of content for any kind of description, then you can set the multiline property for that particular label.

Set the lines to 0 for making it multiline.

Note

If your row content, the cell is not clear for all the required data. Then, you have to change the RowHeight of your TableView to  AutomaticDimension and also give EstimatedRowHeight (eg: 40f).