Continuando con los tutoriales sobre android explicaré como mostrar una lista de elementos compuestos, es decir, dónde en cada fila aparece más de un elemento.

Paso 1: Diseñar formato de fila

Para empezar habrá que diseñar en XML la composición de las filas, en el formato en el que queremos mostrarlas, y guardaremos el resultado en la carpeta “layout”, dándole un nombre que luego podamos recordar, en este caso “row.xml”. El siguiente código es el utilizado en la aplicación de feria para mostrar la información de los diferentes eventos.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:orientation="vertical"
		android:paddingRight="4px">
		<TextView android:id="@+id/hora"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="16dp"
			android:padding="3dp"
		/>
	</LinearLayout>
	<LinearLayout
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:orientation="vertical"
		android:paddingBottom="5dp">
		<TextView android:id="@+id/nombre"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="20dp"
		/>
		<TextView android:id="@+id/desc1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="14dp"
		/>
	</LinearLayout>
</LinearLayout>

La mayor parte del código forma parte del diseño pero lo realmente importante, como esta señalado, son las id de cada uno de los campos que vamos a rellenar.

Paso 2: Diseño de lista

Ahora es cuando diseñamos la pantalla en la que se mostrará la lista. En el caso de la aplicación de feria, se muestra en la pate superior un menú de navegación, y dos botones en la parte inferior, pero puesto que no son de relevancia para el presente tutorial, no los incluyo en el código de ejemplo.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical"
	xmlns:android="http://schemas.android.com/apk/res/android">

		<ListView android:id="@android:id/list"
      		android:layout_width="fill_parent"
			android:layout_weight="1"
 			android:layout_height="fill_parent"
			android:padding="5dp"
			android:cacheColorHint="#00000000">
		</ListView>

		<TextView android:id="@id/android:empty"
		android:background="@null"
		android:text="NO SE ENCUENTRAN EVENTOS"
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"
		/>

</LinearLayout>

Lo verdaderamente importante de esta pantalla es el elemento ListView con id “@android:id/list”, puesto que el cuadro de texto que aparecería en el caso de que la lista no tuviera elementos no tiene porque estar y del mismo modo tampoco tiene porque ser un cuadro de texto. Si quisieramos que apareciera una imagen cuando la lista estubiera vacía tan solo habría que poner un elemento “ImageView” y asignarle la id “@id/android:empty”.
Alrededor del listado se puede incluir cualquier otro tipo de objeto, y darle a ese listado cualquier propiedad que se quiera, siempre y cuando mantengamos la id del “ListView”.

Paso 3: Código de ListActivity

Por último, tan solo queda rellenar la lista desde el código de nuestra actividad. Para ello nos valdremos de la clase “ListActivity” que nos proporcionará unos cuantos métodos bastante útiles para nuestro propósito. Para facilitar la tarea de “copy&paste” del código continúo el tutorial en el mismo:

public class Listado extends ListActivity {

//Mantenemos un Array de elementos en la que podremos guardar
//más información de la que mostraremos en el listado
ArrayList<HashMap<String,String>> Eventos;

//Con los siguientes Arrays establecemos la correspondencia
//entre los elementos del Array de HashMaps de eventos (from)
//con los elementos del diseño en XML de cada una de las filas (to)
String[] from=new String[] {"Time","Name","Desc"};
int[] to=new int[]{R.id.hora,R.id.nombre,R.id.desc1};

@Override
public void onCreate(Bundle savedInstanceState) {

	super.onCreate(savedInstanceState);
	//Establecemos el diseño principal de la Actividad
	setContentView(R.layout.lista);

	// Este método de obtención de elementos puede cambiarse por cualquier otro
	//como leerlos de una BBDD o de un servidor web con JSON
	ArrayList<String[]> lista = new ArrayList<String[]>();

	String[] evento1 = {"11:30","Ofrenda de Flores","Participa la Banda Sinfónica Municipal de Albacete", "1"};
	lista.add(evento1);

	String[] evento2 = {"12:00","Los Redondeles","La ronda de los Redondeles 2011", "2"};
	lista.add(evento2);

	String[] evento3 = {"12:00","Futbol","Albacete Balompie Vs. Tenerife C.D.", "3"};
	lista.add(evento3);

	// Transformamos los elementos String[] en HashMap para
	//posteriormente incluirlos en el Array Global que se utilizará
	//para rellenar la lista
	Eventos = new ArrayList<HashMap<String, String>>();
	for(String[] evento:lista){
		HashMap<String,String> datosEvento=new HashMap<String, String>();

		// Aquí es dónde utilizamos las referencias creadas inicialmente
		//en el elemento "from"
		datosEvento.put("Time", evento[0]);
		datosEvento.put("Name", evento[1]);
		datosEvento.put("Desc", evento[2]);
		datosEvento.put("id", evento[3]);

		Eventos.add(datosEvento);
	}
	// Una vez tenemos toda la información necesaria para rellenar la lista
	//creamos un elemento que nos facilitará la tarea:
	//SimpleAdapter(Actividad, Array de HashMap con elementos, Fichero XML del
	//diseño de cada fila, Cadenas del HashMap, Ids del Fichero XML del diseño de cada fila)
	SimpleAdapter ListadoAdapter=new SimpleAdapter(this, Eventos, R.layout.row, from, to);
	setListAdapter(ListadoAdapter);
}
}

Paso 4: Eventos del listado

Si queremos que nuestro listado tenga un mínimo de funcionalidad, podemos utilizar los “Listeners” que incluye la clase “ListActivity”, esto es, los métodos que se ejecutarán dependiendo del evento ocurrido. Con el siguiente código, que incluiremos en la actividad anterior, iniciaremos otra actividad a la que le pasaremos como información la “id” del elemento pulsado.

@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
		super.onListItemClick(l, v, position, id);

		Intent intent = new Intent(this,DetalleEvento.class);
		intent.putExtra("id",Eventos.get(position).get("id"));
		startActivity(intent);
	}

Como puede observarse, hacemos uso del Array Global “Eventos” que utilizábamos para rellenar la lista, en el cual almacenamos también la información del “id” sin mostrarla en el listado.

Entradas Relacionadas

• Usar nuestra propia Base de Datos SQLite en Android
• Consigue hasta 4.5 Gb Extra en Dropbox
• Feria de Albacete 2011
• NoteBox
• Soluciones para tus cursos ANPE GRATIS
• Claves Wifi con WifiSlaX: Videotutorial