Create TableView In Xamarin.iOS

After we complete our sample app, it will look like the following.



Create Sample Project

I am going to create this project in Mac using Visual Studio 2017.

Select Single View application inside the iOS tab.



Give this project a name as "SampleTableView".



Once the new project is created, we have some default files and a storyboard that we are going to use further in our sample application.



Now, open MainStoryboard.storyboard.

1. Drag and drop navigation Controller from ToolBox in story board and remove the default TableViewController.
2. Drag and drop ViewController.
3. Drag and drop TableView inside the View Controller and give it name as "mainTableView”.
4. Select Navigation Controller and hold down the control key, drag mouse from navigation Controller to View Controller. On moving mouse up, a popup menu will appear letting us choose the action root.
5. Set Navigation Controller as Initial View Controller.
   
   
   

For displaying data to the TableView, we need a source class that passes data and information like how many rows and which type of cell we are going to use for TableView.

For that, we are going to use implementation of UITableViewSource and assign it to the UITableView.

There are only two mandatory methods to make a table display data,

• RowsInSection – return a nint count of the total number of rows of data the table should display
• GetCell – return a UITableCellView populated with data for the corresponding row index passed to the method.

For adding this Table Source file into your project, go to the solution and select "Add new file" and choose Empty Class in General tab.

Find this TableViewSource file from solution and open it.

We need to implement UITableViewSource file into our TableSource file. For that,

1. Import UIKit into TableSource file with “using UIKit”
2. Inherit UITableViewSource to your file using “:” symbol and implement its methods : RowsInSection and GetCell
3. Declare a List of string named tableData.
   

   In TableSource method insert a list of string parameter.

   public TableViewSource(List < string > items) {
       tabledata = items;
   }

4. Now, in RowInSection -
   

   public override nint RowsInSection(UITableView tableview, nint section) {
       return tabledata.Count;
   }

5. In GetCell method -
   

   public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {
       UITableViewCell cell = tableView.DequeueReusableCell("cell");
       if (cell == null) {
           cell = new UITableViewCell(UITableViewCellStyle.Default, "cell");
       }
       cell.TextLabel.Text = tabledata[indexPath.Row];
       return cell;
   }

Now, our TableViewSource file looks like this.

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;
namespace XamarinTableView {
    public class TableViewSource: UITableViewSource {
        List < string > tabledata;
        public TableViewSource(List < string > items) {
            tabledata = items;
        }
        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {
            UITableViewCell cell = tableView.DequeueReusableCell("cell");
            if (cell == null) {
                cell = new UITableViewCell(UITableViewCellStyle.Default, "cell");
            }
            cell.TextLabel.Text = tabledata[indexPath.Row];
            return cell;
        }
        public override nint RowsInSection(UITableView tableview, nint section) {
            return tabledata.Count;
        }
    }
}

To use this subclass, first, create a list of strings and assign this list to Table View source. The View Controller ViewDidLoad method looks like this,

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    List < string > itemData = new List < string > ()
    {
        "Android",
        "IOS",
        "Windows Phone",
        "Xamarin-IOS",
        "Xamarin-Form",
        "Xamarin_Android"
    };
    mainListview.Source = new TableViewSource(itemData);
}

Now, try to build and run the app. If you did all the things right, it’ll look like this.

As you see in the above output, the blank cell border is shown. For removing this blank border, we need to add one line.

mainListview.TableFooterView = new UIView(CoreGraphics.CGRect.Empty);

One last step -- cell border is not left-aligned. For this, we need to call "willdisplay" method in TableViewSource file as mentioned below.

public override void WillDisplay(UITableView tableView, UITableViewCell cell, NSIndexPath indexPath)
{
    if (cell.RespondsToSelector(new ObjCRuntime.Selector("setSeparatorInset:"))) cell.SeparatorInset = UIEdgeInsets.Zero;
    if (cell.RespondsToSelector(new ObjCRuntime.Selector("setLayoutMargins:"))) cell.LayoutMargins = UIEdgeInsets.Zero;
}

Again, run the application and check the output.