Implement The Custom Table View With xib In Xamarin.ios Using xcode

Introduction

In this article, I have explained the custom table view in Xamarin.iOS. In Xamarin.iOS development, the table view is one of the most basic and reused design interfaces.

iOS table view has vertically scrolling content with a single column and we can add multiple contents in the customizable cells. Normally UITableview has one piece of content cell in each rows. UITableview should be associated with custom cell if we are looking for combination view like label, images, text field. Etc.

Step 1

Create your own Cocoa Touch Class in Xcode and I have named as CustomCell.cs

Open your Xcode-File-New-File to choose a template for your new file,

Implement the custom table view with xib in xamarin. iOS using Xcode

Step 2

Create your own xib in the User interface. I have named as CustomeCell.xib

In Xcode-File-New-File to choose a template for your new file,

Implement the custom table view with xib in xamarin. iOS using Xcode

Step 3

After creating the xib, you can design the custom cell with proper constraints as below for my example, I have included the two tables with the background color.

Implement the custom table view with xib in xamarin. iOS using Xcode

Step 4

Create the class name (CustomerViewSource.cs) and implement the UITableViewSource interface as per the below code.

public class CustomerViewSource: UITableViewSource {
    public interface CustomerViewSourceDelegate {
        void DidTappedCustomer(Customer model);
    }
    public List < Customer > customer;
    public UITableView tableView;
    private CustomerViewSourceDelegate sourceDelegate;
    public CustomerViewSource(UITableView TableView, List < Customer > Customer, CustomerViewSourceDelegate SourceDelegate) {
        tableView = TableView;
        customer = Customer;
        sourceDelegate = SourceDelegate;
    }
    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {
        CustomerCell cell = tableView.DequeueReusableCell("CustomerCell", indexPath) as CustomerCell;
        cell.ConfigureCell(model: this.customer[indexPath.Row], sourceDelegate: this.sourceDelegate);
        return cell;
    }
    public override nint RowsInSection(UITableView tableview, nint section) {
        return this.customer.Count;
    }
}

Step 5

Create the class name (CustomerCell.cs) which is associated with xib and implement the UITableViewSource interface as per the below code.

public partial class CustomerCell: UITableViewCell {
    public static readonly NSString Key = new NSString("CustomerCell");
    public static readonly UINib Nib;
    private CustomerViewSourceDelegate sourceDelegate;
    private Customer model;
    public CustomerCell(IntPtr handle): base(handle) {}
    static CustomerCell() {
        Nib = UINib.FromName("CustomerCell", NSBundle.MainBundle);
    }
    internal void ConfigureCell(Customer model, CustomerViewSourceDelegate sourceDelegate) {
        this.sourceDelegate = sourceDelegate;
        this.model = model;
        this.CustomerName.Text = model.CustomerName.ToString();
        this.CustomerAddress.Text = model.CustomerAddress.ToString();
    }
}

Step 6

Finally, bind the list of collection items in created table view ID and bind the collection item in a custom cell with help of RegisterNibForCellReuse.

public partial class ViewController: UIViewController, CustomerViewSourceDelegate {
    public ViewController(IntPtr handle): base(handle) {}
    public override void ViewDidLoad() {
        base.ViewDidLoad();
        List < Customer > list = new List < Customer > ();
        list.Add(new Customer {
            CustomerName = "Manikandan", CustomerAddress = "Thiruchy"
        });
        list.Add(new Customer {
            CustomerName = "Kathirvelu", CustomerAddress = "Coimbatore"
        });
        list.Add(new Customer {
            CustomerName = "Mohankumar", CustomerAddress = "Thiruchy"
        });
        CustomerViewSource CustomerDatasource = new CustomerViewSource(tblCustomer, list, this);
        this.tblCustomer.RegisterNibForCellReuse(CustomerCell.Nib, "CustomerCell");
        this.tblCustomer.Source = CustomerDatasource;
    }
    public void DidTappedCustomer(Customer model) {}
}

Output

Hopefully, this article has given you sufficient information to start creating your custom table view with xib in xamarin. iOS using Xcode in your Xamarin.iOS application. Feel free to leave a comment if you would like me to further elaborate on anything within this article.