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.

Xamarin

Select Single View app and click "Next".

Xamarin

Give the app a name and click "Next".

Xamarin

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

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

Xamarin

Drag the view to your controller.

Xamarin

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

Xamarin 

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.

Xamarin

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

Xamarin

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

Xamarin

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

Xamarin 

Now, modify the name properties for the added labels.

Xamarin
Xamarin
Xamarin

Now, your custom cell will be like the following.

Xamarin

Add the class file - Student.cs

  1. using Foundation;  
  2. using System;  
  3. using UIKit;  
  4.   
  5. namespace CustomCells  
  6. {  
  7.     public partial class Student  
  8.     {  
  9.         public string FullName { get; set; }  
  10.         public string Course { get; set; }  
  11.         public string Duration { get; set; }  
  12.         public Student()  
  13.         {  
  14.         }  
  15.     }  
  16. }   

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

  1. using Foundation;  
  2. using System;  
  3. using UIKit;  
  4.   
  5. namespace CustomCells  
  6. {  
  7.     public partial class StudentCell : UITableViewCell  
  8.     {  
  9.         public StudentCellView (IntPtr handle) : base (handle)  
  10.         {  
  11.         }  
  12.         internal void UpdateCell(Student student) {  
  13.             FullNameLabel.Text = student.FullName;  
  14.             CourseLabel.Text = student.Course;  
  15.             DurationLabel.Text = student.Duration;  
  16.         }  
  17.     }  
  18. }   

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

  1. using System;  
  2. using System.Collections.Generic;  
  3. using UIKit;  
  4.   
  5. namespace CustomCells {  
  6.     public partial class ViewController : UIViewController {  
  7.         protected ViewController(IntPtr handle) : base(handle) {  
  8.             // Note: this .ctor should not contain any initialization logic.  
  9.         }  
  10.         List<Student> students;  
  11.         public override void ViewDidLoad() {  
  12.             base.ViewDidLoad();  
  13.             students = new List<Student>  
  14.             {  
  15.   
  16.                 new Student()  
  17.                 {  
  18.                 FullName = "Irshad", Course="MCA", Duration="3 Years"  
  19.                 }  
  20.             ,  
  21.                 new Student()  
  22.                 {  
  23.                 FullName = "Kailash", Course="BCA", Duration="3 Years"  
  24.                 }  
  25.             ,  
  26.                 new Student()  
  27.                 {  
  28.                 FullName = "Prteek", Course="B.Tech", Duration="4 Years"  
  29.                 }  
  30.             ,  
  31.                 new Student()  
  32.                 {  
  33.                 FullName = "Dilip", Course="PGDCA", Duration="1 Year"  
  34.                 }  
  35.             ,  
  36.                 new Student()  
  37.                 {  
  38.                 FullName = "Roshan", Course="B.Tech", Duration="4 Years"  
  39.                 }  
  40.   
  41.             };  
  42.             StudentTableView.Source = new StudentTVS(students);  
  43.             StudentTableView.RowHeight = UITableView.AutomaticDimension;  
  44.             StudentTableView.EstimatedRowHeight = 40f;  
  45.             StudentTableView.ReloadData();  
  46.         }  
  47.   
  48.         public override void DidReceiveMemoryWarning() {  
  49.             base.DidReceiveMemoryWarning();  
  50.             // Release any cached data, images, etc that aren't in use.  
  51.         }  
  52.     }  

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

  1. using System;  
  2. using System.Collections.Generic;  
  3. using Foundation;  
  4. using UIKit;  
  5.   
  6. namespace CustomCells {  
  7.     class StudentTVS : UITableViewSource {  
  8.         List<Student> students;  
  9.         public StudentTVS(List<Student> students) {  
  10.             this.students = students;  
  11.         }  
  12.   
  13.         public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {  
  14.             var cell = (StudentCell)tableView.DequeueReusableCell("cell_Id", indexPath);  
  15.             var student = students[indexPath.Row];  
  16.             cell.UpdateCell(student);  
  17.             return cell;  
  18.         }  
  19.         public override nint RowsInSection(UITableView tableview, nint section) {  
  20.             return students.Count;  
  21.         }  
  22.     }  
  23. }  
  24.   
  25.   
  26. using Foundation;  
  27. using System;  
  28. using UIKit;  
  29.   
  30. namespace TableView  
  31. {  
  32.     public partial class EmployeeCell : UITableViewCell  
  33.     {  
  34.         public EmployeeCell (IntPtr handle) : base (handle)  
  35.         {  
  36.         }  
  37.   
  38.         internal void UpdateCell(Employee employee)  
  39.         {  
  40.             FullNameLabel.Text = employee.FullName;  
  41.   
  42.             DepartmentLabel.Text = employee.Department;  
  43.   
  44.             DescriptionLabel.Text = employee.Description;  
  45.         }  
  46.     }  
  47. }   

Build and run the application.

Xamarin

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

Xamarin

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).