mono touch：Customizing a Table's Appearance

Customizing a Table's Appearance

The simplest way to change the appearance of a table is to use a different cell style. You can change which cell style is used when creating each cell in the UITableViewSource’s GetCell method.

UITableViewCell Styles

There are four built-in styles:

• Default – supports an ImageView
• Subtitle – supports an ImageView and subtitle
• Value1 – right aligned subtitle, supports an ImageView
• Value2 – title is right-aligned and subtitle is left-aligned (but no image)

These screenshots show how each style appears.

The sample CellDefaultTable contains the code to produce these screens. The cell style is set in theUITableViewCell constructor, like this:

cell = new UITableViewCell (UITableViewCellStyle.Default, cellIdentifier);
//cell = new UITableViewCell (UITableViewCellStyle.Subtitle, cellIdentifier);
//cell = new UITableViewCell (UITableViewCellStyle.Value1, cellIdentifier);
//cell = new UITableViewCell (UITableViewCellStyle.Value2, cellIdentifier);

The cell’s properties can then be set (do not set properties that the style does not support or an exception will be thrown):

cell.TextLabel.Text = tableItems[indexPath.Row].Heading;
cell.DetailTextLabel.Text = tableItems[indexPath.Row].SubHeading;
cell.ImageView.Image = UIImage.FromFile("Images/"+tableItems[indexPath.Row].ImageName); // don't use for Value2

Accessories

Cells can also have these accessories added to the right of the view

• Checkmark – can be used to indicate ‘selection’ in a table.
• DisclosureIndicator – normally used to indicate that touching the cell will open another view.
• DetailDisclosureIndicator – responds to touch independently of the rest of the cell, allowing it to perform a different function to touching the cell itself.

This is what they look like:

To display one of these accessories you can set the Accessory property in the GetCell method:

cell.Accessory = UITableViewCellAccessory.Checkmark;
//cell.Accessory = UITableViewCellAccessory.DisclosureIndicator;
//cell.Accessory = UITableViewCellAccessory.DetailDisclosureButton; // implement AccessoryButtonTapped
//cell.Accessory = UITableViewCellAccessory.None; // to clear the accessory

When the DetailDisclosureButton is shown you should also override the AccessoryButtonTapped to perform some action when it is touched.

public override void AccessoryButtonTapped (UITableView tableView, NSIndexPath indexPath)
{
    new UIAlertView("DetailDisclosureButton Touched" 
        , tableItems[indexPath.Row].Heading, null, "OK", null).Show();
}

Creating custom cell layouts

To change the visual style of a table you need to supply custom cells for it to display. The custom cell can have different colors, control layout,

The CellCustomTable example implements a UITableViewCell subclass that defines a custom layout ofUILabels and a UIImage with different fonts and colors. The resulting cells look like this:

The custom cell class consists of only three methods:

• Constructor – creates the UI controls and sets the custom style properties (eg. font face, size and colors).
• UpdateCell – a method for UITableView.GetCell to use to set the cell’s properties.
• LayoutSubviews – set the location of the UI controls. In the example every cell has the same layout, but a more complex cell (particularly those with varying sizes) might need different layout positions depending on the content being displayed.

The complete sample code in CellCustomTable/CustomVegeCell.cs follows:

public class CustomVegeCell : UITableViewCell  {
    UILabel headingLabel, subheadingLabel;
    UIImageView imageView;
    public CustomVegeCell (NSString cellId) : base (UITableViewCellStyle.Default, cellId)
    {
        SelectionStyle = UITableViewCellSelectionStyle.Gray;
        ContentView.BackgroundColor = UIColor.FromRGB (218, 255, 127);
        imageView = new UIImageView();
        headingLabel = new UILabel () {
            Font = UIFont.FromName("Cochin-BoldItalic", 22f),
            TextColor = UIColor.FromRGB (127, 51, 0),
            BackgroundColor = UIColor.Clear
        };
        subheadingLabel = new UILabel () {
            Font = UIFont.FromName("AmericanTypewriter", 12f),
            TextColor = UIColor.FromRGB (38, 127, 0),
            TextAlignment = UITextAlignment.Center,
            BackgroundColor = UIColor.Clear
        };
        ContentView.Add (headingLabel);
        ContentView.Add (subheadingLabel);
        ContentView.Add (imageView);
    }
    public void UpdateCell (string caption, string subtitle, UIImage image)
    {
        imageView.Image = image;
        headingLabel.Text = caption;
        subheadingLabel.Text = subtitle;
    }
    public override void LayoutSubviews ()
    {
        base.LayoutSubviews ();
        imageView.Frame = new RectangleF(ContentView.Bounds.Width - 63, 5, 33, 33);
        headingLabel.Frame = new RectangleF(5, 4, ContentView.Bounds.Width - 63, 25);
        subheadingLabel.Frame = new RectangleF(100, 18, 100, 20);
    }
}

The GetCell method of the UITableViewSource needs to be modified to create the custom cell:

public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{
    CustomVegeCell cell = tableView.DequeueReusableCell (cellIdentifier) as CustomVegeCell;
    if (cell == null)
        cell = new CustomVegeCell (cellIdentifier);
    cell.UpdateCell (tableItems[indexPath.Row].Heading
            , tableItems[indexPath.Row].SubHeading
            , UIImage.FromFile ("Images/" +tableItems[indexPath.Row].ImageName) );
    return cell;
}