En mi última entrada vimos cómo crear un TableViewController para mostrar nuestros datos en forma de lista, y como plantilla para mostrar los datos elegimos la que viene por defecto. Hoy vamos a ver cómo crear nuestra propia plantilla.

Partimos del proyecto que habíamos creado en la serie anterior “ProbandoTableViewController” y lo primero que haremos será añadir una nueva vista a nuestro proyecto. Por tanto, añadimos iPhoneView (que no iPhoneViewController). Y le asignamos el nombre CustomCell. Y lo abrimos con el XCode. Eliminamos la vista, y añadimos en su lugar un TableViewCell. Agregamos una imagen y un texto: clip_image002[4]Nos dirigimos al menú superior,con nuestro TableViewCell seleccionado, que contiene las propiedades de nuestro control y le asignamos el identificador CustomCell y el Class CustomCell:

clip_image006[4]clip_image004[4]

Ahora guardamos y volvemos a XCode. Lo que viene a continuación es algo confuso y es debido a que la versión de XCode cambió (con XCode 3 era mucho más simple). Debemos crear una clase parcial con el mismo nombre que la vista, es decir, dos ficheros uno con el nombre CustomCell.cs y el otro CustomCell.designer.cs. La clase debe heredar de UITableViewCell y además, tener un constructor con el parámetro IntPtr.

El contenido inicial de CustomCell.cs

 

   1:  using System;
   2:   
   3:  using MonoTouch.Foundation;
   4:   
   5:  using MonoTouch.UIKit;
   6:   
   7:  namespace ProbandoTableViewController
   8:   
   9:  {
  10:   
  11:  public partial class CustomCell:UITableViewCell
  12:   
  13:  {
  14:   
  15:  public CustomCell (IntPtr handle): base (handle){}
  16:   
  17:  public CustomCell(){}
  18:   
  19:  }
  20:   
  21:  }

 

El contenido inicial de CuestomCell.designer.cs

using MonoTouch.Foundation;

namespace ProbandoTableViewController

{

[Register("CustomCell")] 

public partial class CustomCell{}

}

Ahora podemos abrir el CustomView.xib con Xcode y añadir los Outlets correspondientes a la imagen y al label como hemos hecho hasta ahora: arrastrando el control, manteniendo pulsado control, hacia el editor código. Los denominamos ImageCell y LabelName, guardamos y de vuelta para MonoDevelop.

Una vez en MonoDevelop nos dirigimos a la clase que acabamos de crear (en el archivo CustomView.cs) y añadimos el método: 

public void addDataToCell(UIImage image, string text)

{

this.TextLabel.Text=text;

var imagen =new UIImageView(image);

imagen.Frame = new System.Drawing.RectangleF(ImageCell.Frame.Location,ImageCell.Frame.Size);

this.ImageCell.AddSubview(imagen);

}

Finalmente, nos dirigimos a la clase que creamos en el post anterior, TableSourceMain, y sustituimos el método GetCell por: 

   1:  //Retorna el objeto que vamos a mostrar por pantalla. Es decir, cada celda.
   2:   
   3:  public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
   4:   
   5:  {
   6:   
   7:  CustomCell cell =(CustomCell) tableView.DequeueReusableCell(this._cellID);
   8:   
   9:  if(cell==null)
  10:   
  11:  cell =(CustomCell)Runtime.GetNSObject(NSBundle.MainBundle.LoadNib("CustomCell",new CustomCell(),null).ValueAt(0));
  12:   
  13:  cell.addDataToCell(UIImage.FromFile("MonoTouch.png"),_datos[indexPath.Row]);
  14:   
  15:  return cell;
  16:   
  17:  }

Hay que añadir una referencia al espacio de nombres MonoTouch.ObjCRuntime.

Ahora podemos compilar y veremos nuestra aplicación.

Nota: Para ajustar el diseño de la celda a nuestro gusto se puede hacer desde XCode configurando las propiedades, de igual modo para ajustar la tabla, sólo que en éste último caso desde el archivo TableViewControllerMain.xib.