Como crear filas personalizadas para TableViews usando Titanium Móvil

12.05.2010, Dan Tamas
votar capture-15

En este post trataré de explicar cómo crear filas personalizadas para TableViews usando Titanium Appcelerator.

Si usted no sabe acerca de Titanium mire aquí.  Yo supongo que ya sabe cómo configurar e iniciar un proyecto en Titanium, así que sólo le mostraré como crear una fila personalizada.

De manera predeterminada, un TableView le permitirá crear una fila que puede tener: una imagen a la izquierda, un titulo y el conjunto decorador del tipo de la fila.  El siguiente código es un ejemplo de los datos estándar que necesitan ser pasados al TableView.

var RegData = [
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
];
 
var TheTable = Titanium.UI.createTableView({
data:RegData
});

Y el resultado en Iphone es éste:

Bien, nos gustaría añadir mas datos a una fila, quizás algo como esto:

Esto requerirá construir la fila “a mano”. Así que necesitamos añadir 2 imageViews, la bandera y la tendencia, y labelViews para el país y el porcentaje. Además necesitamos cambiar el arreglo de datos desde luego.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }</code>
];

Creamos una variable “data” como un arreglo que mantendrá los objetos de la fila generada.

var data=[];

entonces recorremos el arreglo “CustomData”, creamos una nueva fila, las vistas de imagen (imageViews) y etiquetas y las añadimos a la fila.

for (var i = CustomData.length - 1; i &gt;= 0; i--) {
var row = Titanium.UI.createTableViewRow();
 
var flag =  Titanium.UI.createImageView({
url:CustomData[i].flag,
width:32,
height:32,
left:4,
top:2
});
 
var country = Titanium.UI.createLabel({
text:CustomData[i].country,
font:{fontSize:16,fontWeight:'bold'},
width:'auto',
textAlign:'left',
top:2,
left:40,
height:16
});
 
var percent =  Titanium.UI.createLabel({
text:CustomData[i].percent,
font:{fontSize:12,fontWeight:'bold'},
width:'auto',
textAlign:'left',
bottom:0,
left:60,
height:12
});
 
var trend =  Titanium.UI.createImageView({
url:CustomData[i].trend,
width:16,
height:16,
right:10
});
 
row.add(flag);
row.add(country);
row.add(percent);
row.add(trend);
row.hasChild=CustomData[i].hasChild; 
 
row.className = 'coutry_row'; 
data.push(row);
};

Como puede ver, además, añadimos un nombre de clase (className) a la fila para mejorar el rendimiento del renderizado, ya que el iPhone reusará la plantilla de la fila con cada nuevo dato cuando renderice la tabla.

El resultado obtenido es:

Puede bajar el proyecto Titanium desde aquí. Tendrá que crear un nuevo proyecto en Titanium y reemplazar la carpeta de recursos con el que se encuentra en el fichero.

Déjeme saber que piensas.

Te recomendamos

  1. Siete días con Titanium – día 6 – animaciones y transformaciones
  2. Transparencias de la presentación de Titanium Appcelerator en The Event 2011

Comments are closed.