Crear una tabla con grupos con MonoTouch


La creación de una tabla con grupos, no es muy complicado ni tampoco muy diferente de hacerlo sin grupos.
Nuestro primer paso es, en una vista vacía agregar un control del tipo Table View, luego en la barra izquierda, en la sección del inspector de atributos, cambiamos la opción style, de “plain” a “grouped” y veremos como la lista cambia:

Luego agregamos un outlet para la tabla con el nombre “groupedTable” y guardamos los cambios. En MonoDevelop creamos una clase con el nombre “TableViewDataSource” que heredara de la clase “UITableViewSource”, la clase debera de implementar los metodos “RowsInSection”, “UITableViewCell”,”NumberOfSections” y “TitleForHeader”.

Luego vamos a crear una lista de Ciudades para cada pais:
CitiesBolivia = new List (){
new City{Name="Cochabamba",Country="Bolivia", Population=1000000},
new City{Name="Santa Cruz",Country="Bolivia", Population=1000000},
} ;
CitiesSpain = new List (){
new City{Name="Madrid",Country="Spain", Population=1000000},
new City{Name="Barcelona",Country="Spain", Population=1000000},
new City{Name="Valencia",Country="Spain", Population=1000000},
} ;
CitiesMexico = new List (){
new City{Name="Aguas Calientes",Country="Mexico", Population=1000000},
new City{Name="Chetumal",Country="Mexico", Population=1000000},
new City{Name="Merida",Country="Mexico", Population=1000000},
} ;

Y después vamos a llenar los métodos implementados, con sus respectivas acciones:
public override int RowsInSection (UITableView tableview, int section)
{
int rowsInSection = 0;
switch (section) {
case 0:
rowsInSection = 2;
break;
case 1:
rowsInSection = 3;
break;
case 2:
rowsInSection = 3;
break;
default:
break;
}
return rowsInSection;
}
public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
{
UITableViewCell cell = tableView.DequeueReusableCell (kCellIdentifier);
if (cell == null) {
cell = new UITableViewCell (UITableViewCellStyle.Default, kCellIdentifier);
}
switch (indexPath.Section) {
case 0:
cell.TextLabel.Text = CitiesBolivia [indexPath.Row].Name;
break;
case 1:
cell.TextLabel.Text = CitiesSpain [indexPath.Row].Name;
break;
case 2:
cell.TextLabel.Text = CitiesMexico [indexPath.Row].Name;
break;
default:
break;
}
return cell;
}
public override int NumberOfSections (UITableView tableView)
{
return Sections;
}
public override string TitleForHeader (UITableView tableView, int section)
{
string sectionHeader = "";
switch (section) {
case 0:
sectionHeader = "Bolivia";
break;
case 1:
sectionHeader = "Spain";
break;
case 2:
sectionHeader = "Mexico";
break;
default:
break;
}
return sectionHeader;
}

Ahora si vemos la aplicación, tenemos lo siguiente:


El método RowsInSection, realiza la operación se asignar a un numero de filas por sección; el método GetCell, realiza la tarea de en primera instacion agregar o cambiar los elementos de la lista visible ( esto lo realiza IOS, para evitar un uso desmesurado de recursos al momentos de mostrar una tabla con muchos elementos) y después agregar un texto a la celda. NumberOfSections es un método que se utiliza para indicar el número de secciones a mostrar (cada sección es un grupo) y el método TitleForHeaders asigna un título a cada Grupo.


Suerte.

Publicar un comentario