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.

 

Let's start.

 

Create Xamarin iOS Single View Application by going to 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  right-clicking the project and select Add >> followed by selecting new File. In the dialog window's left plane select iOS and in center plane select Table View Cell template and give the file a name then click create [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 XCode). Next,  drag a button from the toolbox and place at the beginning of the cell. Also,  place another label after the button.

 

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 is used to update the contents of the cell because we couldn't access the cell subviews from another class.

using System;
using Foundation;
using UIKit;

namespace CustomTableViewCell
{
    public partial class MyCardViewCell : UITableViewCell
    {
        public static readonly NSString Key = new NSString("MyCardViewCell");
        public static readonly UINib Nib;

        static MyCardViewCell()
        {
            Nib = UINib.FromName("MyCardViewCell", NSBundle.MainBundle);
        }

        protected MyCardViewCell(IntPtr handle) : base(handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }
        public void UpdateData(string text)
        {
            title.Text = text;
        }
    }
}

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.

using System;
using Foundation;
using UIKit;

namespace CustomTableViewCell
{
    public class MyTableViewSource : UITableViewSource
    {
        private string[] titles;
        private INavigator navigator;

        public MyTableViewSource(INavigator navigator, params string[] titles)
        {
            this.titles = titles;
            this.navigator = navigator;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            var cell = tableView.DequeueReusableCell("MyCardViewCell_ID", indexPath) as MyCardViewCell;
            cell.UpdateData(titles[indexPath.Row]);

            return cell;

        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return titles.Length;
        }
        public override void RowSelected(UITableView tableView, NSIndexPath indexPath)
        {
            base.RowSelected(tableView, indexPath);
            navigator.Navigate(indexPath.Row);
        }
    }
}

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

using System;
using UIKit;

namespace CustomTableViewCell
{
    public partial class ViewController : UIViewController, INavigator
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.

            tableView.RegisterNibForCellReuse(MyCardViewCell.Nib, "MyCardViewCell_ID");
            tableView.Source = new MyTableViewSource(this, "Remainder", "Remainder 1", "Remainder 22", "Remainder 3", "Remainder 55", "Remainder 66");

            tableView.RowHeight = UITableView.AutomaticDimension;
            tableView.ReloadData();
        }

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

        public void Navigate(int index)
        {
            // Do Navigation code
        }
    }
}

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 ViewController based on selection, there is no option to navigate view controllers. So, I need to create an interface and pass it to the source class. Now user selects row, and the view controller method will be invoked using Interface. Write your navigate code logics here.

using System;
namespace CustomTableViewCell
{
    public interface INavigator
    {
        void Navigate(int index);
    }
}

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

 

 

Summary 

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

Thanks for reading!!!