Custom Table View in Xamarin iOS

Introduction

In my previous article, we discussed the TableView and their default cell behaviors. Now, we going to learn about how to use a custom table view cell in TableView. I won't like writing a lot of theory we can directly go with code.

Let's start.

Create Xamarin iOS Single View Application by going Visual Studio >> New >> Project >> Single view Application under iOS section.

After the project creation open Main.StoryBoard and place UITableView. Set the TableView frame size equal to view size and set constraints.

Now, create new Table View Cell by doing, right-click the project and select Add >> followed by select new File. In the dialog window left plane select iOS and center plane select Table View Cell template and give the file a name then click New [Eg- MyTableViewCell].

Afterward, the new XIB and cs extension file will be created with your given name. Now, open the XIB file in your designer (my favorite and recommend XCode). Next, the drag a button from the toolbox and place the starting of the cell. As well as place another label after the button. Apply corner radius and other properties in the property window.

Note - you must give Cell reuse identifier, otherwise you won't have access for the cell

Next, open MyTableViewCell.cs file and create a new static method named UpdateData. This method used to update the content of the cell. because we couldn't access the cell subviews from another class



Now, create a new Table View Source Class named MyTableViewSource.cs.  This class should be inherited from UITableViewSource and override GetCell, RowSelect and RowInSelection method.



Finally, open ViewController class and apply source class to the TableView source. Here, you should call ReloadData static method. Create an array of string and pass-through constructor and apply the values to the cell.


Here, we have one problem, if the user selects the row, the event will trigger in the source class, but I need to navigate to another view controller based on selection, there is no option to navigate ViewController. So, I need to write an interface and pass it to the source class. now user select row, the view controller method will be invoked using Interface and write your navigate code logics here.



It's time to run our application and our application output like below.

Source code in Github

Summary

• Create a new Table View
• Add new Table View Cell and design the cell
• Create a TableView source class
• Apply source class toTableView 
• Create a new Navigate interface and use it.

Thanks for reading !!!