Creating a custom table cell

In the previous post we saw how to use the tableview. It's one of the most used things while developing for iPhone so I really suggest you learn how to use this.
When you progress in your developments, there will probably be a moment where you will want to create a custom table cell because the default one can only show text. So if you want to do fancy stuff with logo's, different backgrounds, cell properties, ... this is your guide.

1. Create a new 'View interface definition with controller'
In MonoTouch, go to File->New->File, choose 'iPhone' and then 'View interface definition with controller'. Give it a new, for example 'CustomTableCell'.
MonoTouch will now create a new xib file and the necessary cs files for you.

2. Adding an empty view cell to the design
Double click the xib file to open the Interface Builder. First of all, remove the 'View' because we will not need it here. Now drag a 'Table View Cell' in here. This will be our base table view cell from which we will create our custom cell.

3. Customizing the table cell
Now double click the table cell you just dragged in. You can now start dragging in other controls. I used an image and a label.

4. Create your outlets
We will now create the correct outlets so we can access the labels and the other controls from in our code. If you create the 'File Owner', change the classname to 'CustomTableCell' as well. Now on the right, in 'classes', create the necessary outlets for the cell itself and all its controls.

Then, in connections, create the actual connections between the outlets and the controls by dragging the outlet to the correct control.

5. Set the table cell identifier
Select the table cell and set the identifier to 'CustomCell'. This identifier will later be used in our code.

6. Adding the correct properties
Open the CustomTableCell.cs file and add the following code to it:


public string ContentText
{
   get { return lblText.Text; }
   set { lblText.Text = value; }
}


public UIImage ImgIcon
{
   get { return imgIcon.Image; }
   set { imgIcon.Image = value; }
}

public UITableViewCell Cell
{
   get { return viewCell; }
}

Of course this code depends on with kind of controls you dragged onto the cell because this will determine the return type. You must also use the correct outlet names to access the controls.

7. Using the custom table cell
As you can read in my previous post, there is a function called 'GetCell' that you can override.

public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)

Add this to the global variables:
private Dictionary controllers = null; // Holds custom controllers

In this 'GetCell' function, you can use your custom cell.


ITableViewCell cell = tableView.DequeueReusableCell("CustomCell"); // Call your custom table cell
CustomTableCell cellController = null;


if (cell == null)
{

   cellController = new CustomTableCell();
   NSBundle.MainBundle.LoadNib("CustomTableCell", cellController, null);
   cell = cellController.Cell;

   cell.Tag = Environment.TickCount; // Identify this cell

   controllers.Add(cell.Tag, cellController);

}
else
{

   cellController = controllers[cell.Tag];

}

// Label text
cellController.ContentText = "Data";


// Icon
string iconPath = "http://www.ardella.be/iphone/siteicon.jpg";
NSUrl nsurl = new NSUrl(iconPath);
NSData data = NSData.FromUrl(nsurl);
UIImage icon = UIImage.LoadFromData(data);

cellController.ImgIcon = icon;

8. The result
If all goes well, you could end up with the following result depending on your data to fill up the table cells.