Interface de Usuario Android - Control tipo lista ListView

Bienvenidos a otra nueva lección del curso gratuito en www.AprendeAndroid.com Últimamente estoy viendo que hay muchas webs/blogs que se están apropiando de mi trabajo gratuitamente, pero en fin... espero que les salga un grano en el culito de esos que no te dejan sentarte! ;P.

 

Ejemplo control ListView sencillo y predefinido por Android

Un ListView es un objeto de tipo view, muestra en el una lista de elementos seleccionables y con scroll integrado (si la lista es mú grande se desplazará por la pantalla). Esta lista la llenamos de dos formas:

1) Un adaptador que extrae el contenido de una fuente tal como una matriz
2) Una consulta a una base de datos volcando el objeto cursor en ella

¡¡tranqui que vemos los ejemplos!! ;p. El tema es que Android pone a nuestra disposición un par de diseños ListView predefinidos, es es decir, la disposición, colores, tamaños de los textos de la lista es un diseño predefinido por Android y ¡no se puede cambiar! si nos viene bien... ¡genial! pero... si queremos hacer una cosa mona... ¡¡nos tocara currar un poco mas!!

Izquierda la lista simple. android.R.layout.simple_list_item_1
Derecha la lista doble (elemento y sub-elemento). android.R.layout.simple_list_item_2

ejemplo listview android lista simple ejemplo listview android lista doble

 

Como dije la gran ventaja de usar estas listas, es que no necesitamos diseñar las filas y nos ahorraremos un montón de tiempo, el uso de este control ListView sencillo quedaría de la siguiente forma:

Diseño de la lista en el fichero gráfico xml (res/layout)

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

<ListView
        android:id="@+id/listaFiles"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <TextView
        android:id="@android:id/empty"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="la lista esta vacia!"
        android:textColor="#000000" />

</LinearLayout>

Bueno, lo que veis arriba es el diseño gráfico en formato xml de nuestro layout, lo esencial es la parte del ListView, que como ves hemos puesto un ID (como el DNI linea10) para identificarlo luego en nuestro codigo JAVA, con las propiedades de tamaño (alto y ancho líneas 11 y 12) ajustado este control al contenedor padre.

Después hay una etiqueta de texto de tipo TextView que nos sirve para mostrar un texto por defecto cuando la lista esta vacía, en este caso aparecería el texto entre las " ".

Creación del Array con los datos de la lista

//Creamos los Items de la lista
final String[] datos_lista = new String[]{"Elemto1","Elemto2","Elemto3","Elemto4","Elemto5"};

Lo que ves aquí arriba, seria un ejemplo para crear un array sencillo con los datos de Elemento1, Elemento2.... este array seria de contenido estático (no cambia) pero para probar esta bien ¿verdad?

Creación del adaptador de la lista y asociarla con el diseño gráfico

		//Localizamos la lista en el control grafico layout en el xml
		ListView lista = (ListView) findViewById(R.id.listaFiles);
		
		// Creamos el adaptador asignando tambien el diseño grafico
		ArrayAdapter adaptador_fileList = new ArrayAdapter(this, android.R.layout.simple_list_item_1, datos_lista);
		
		// Asignamos el adaptador al control lista
		lista.setAdapter(adaptador_fileList);
		
		

Esta seria la parte en la que relacionamos todo (gráfico, datos y control) lo haríamos en nuestra clase JAVA, el ejemplo esta disponible en la sección de ejemplos de este tema.

La línea importante aquí es la numero 5! en ella, creamos el "adaptador" y lo asignamos al diseño predefinido por Android y le asignamos también los datos que queremos mostrar (array).

 

Ejemplo control ListView Android Personalizado

Ahora toca el mega ejemplo del control ListView personalizado y molón!! así a priori (porque hasta a mi me lo parece) es un coñazo y muy engorroso, pero si queremos hacer una lista totalmente personalizable y molona... ¡es lo que hay amigo!

Aunque ya lo hemos visto en los ejemplos mas sencillos, veamos primero cómo añadir el control ListView a nuestra interfaz de usuario, no tiene mucho secreto a así de primeras, tampoco tienen propiedades complejas, tan solo el id, y el tamaño de alto y ancho.

Propiedades, TextView, eclipse

Bueno, esto es solo la punta del icebert... jejejeje mediante este control emplazaremos la posición de nuestra lista dentro ejemplo listview android personalizado de un Layout, pero aun nos queda pasarle el contenido de la lista, y el diseño de la propia lista, es decir, los elementos que va a tener cada línea de nuestra lista.

En esta captura de pantalla de una de mis apps (esta en proceso, es una aplicación que estoy desarrollando ahora) veras que arriba del todo a la izquierda pongo el icono de la aplicación seguido del nombre de la app, a continuación de esto esta el ListView. Fíjate, que cada línea del ListView tiene 3 elementos, una imagen, un titulo, y un SubTitulo largo.

El siguiente paso de esta lección será diseñar cada línea, es decir haremos otro xml con el diseño de una única línea

Como veis este xml, tiene un diseño sencillo, incluye un LinearLayout principal con una orientación en Horizontal, después un ImageView y por ultimo otro LinearLayout con orientación Vertical que recoge las 2 etiquetas de texto TextView, es importante asignar bien los id de cada elemento, ya que en el siguiente paso deberemos indicar, que dato va en cada etiqueta, así que presta atención a todo eso!.

El siguiente paso será enlazar todo esto en un Adapter (ListView, diseño de línea y datos), pero bueno, no quiero adelantar acontecimientos, ahora quiero que analices el xml que recoge el diseño de cada línea del ListView.

Propiedades, TextView, eclipse

Adaptador para la Lista ArrayAdapter

Bueno, ya la cosa se esta poniendo tensa! jajaja hasta aquí hemos visto los dos xml que componen nuestra lista, el primero que es el control en si, es decir el contenedor que tendrá nuestra lista, y el segundo xml que hemos visto, es el diseño que tendrá cada línea o fila de nuestra lista.

Ahora toca el Adaptador, ¿que coño es esto? (es lo que me pregunte yo cuando intentaba comprender esto), es como un interface entre la lista ListView, el diseño que hicimos de cada línea y los datos que va a contener ¿tampoco es tan raro no?. ;P

ejemplo clase listview personalizado android

No quiero continuar explicando todo esto, sin que tengas una perspectiva general y clara de todas las partes y/o elementos que contiene este elemento ListView, se que ahora estarás pensando.. joooderrrr que follon! pos si! es un follon! jajjaja pero bueno, seguramente sea la primera lista que estas analizando o programando, así que es normal, ¡no te preocupes!

Las 3 clases Java que ves, son:

 ListaAppActivity: Esta clase contiene el código principal de la lista.
 Adapter: Esta clase contiene el código que define el Adaptador de la lista.
 Tool: Esta clase contiene el código para introducir datos a la lista (que es un array).

Ahora vamos a continuar analizando la clase Adapter.... bueno también os quiero decir que hay varios tipos de adaptadores dependiendo del tipo de dato que le queremos pasar a la lista, voy a explicar los dos que yo he usado, uno es de tipo ArrayAdapter (para cuando como dato, le pasamos un arrray) y el otro es de tipo CursorAdapter (para cuando como dato, le pasamos un cursor de una base de datos). Fíjate en la siguiente clase:

ejemplo clase listview personalizado android

Intentemos analizar el código de arriba... ¡madre mía! a ver... se que esto será complicado cuando se esta empezando, pero ten paciencia!.

La primera parte de esta clase Adaptador se crea el array que contendrá los datos de la lista, esto lo hacemos mediante otra clase auxiliar que he creado y que he llamado Tool, se trata de una clase que gestiona la imagen y los dos textos (titulo y descripción) ya la analizaremos mas adelante.. a continuación llegamos al constructor de la clase. Un constructor es una parte del código en el que decimos que elementos tienen que pasarse a esta clase, esta clase se llama desde la Actividad principal ListaAppActivity que también analizaremos mas adelante. Por ultimo llegamos al método getView que es el encargado de dibujar la lista asignando cada dato del array a cada elemento de la lista (Imagen, Titulo y Descripción).

La Clase Tool

Esta clase tiene un cometido especial, creamos un objeto datos que contiene el array con las imágenes y los textos de cada ítem de la lista.

ejemplo clase listview personalizado android

En esta ocasión he querido resaltar la parte del constructor, para los que no lo sepais, un constructor es muy útil, obliga para crear el objeto a que le pasemos los parámetros que queremos, en este caso obligamos a pasar, Titulo, Descripción e Imagen. A continuacion, generamos los métodos para devolver los datos cuando los necesitemos.

La clase ListaAppActivity para el control ListView Android

Bueno, ya hemos llegado a la clase principal, aunque de primeras pienses que esta clase es la mas complicada, es justo alcontrario! es la mas sencilla! por fin una buena noticia!! ¿no? xDD.

Te e señalado lo importante, en el recuadro amarillo tienes 3 líneas, en estas 3 líneas definimos lo que hemos estado hablando todo el tiempo, el famoso adaptador!! Fíjate que llamamos a la clase AdaptadorEIC y creamos el objeto adaptador pasándole al constructor el contexto (this). La siguiente línea localizamos la lista en el xml, esta ya la hemos visto otras veces, ya nos sonara, y por ultimo asignamos la lista al adaptador. ¡ya esta! ¡así de simple!.

Con esto ya veríamos la lista si ejecutáramos el programa, si además queremos dar funcionalidad a cada ítem de la lista (en este caso si) incluiremos todo lo que viene acontinuacion, esto no tiene que ser así siempre, quiero decir, hay muchas ocasiones que simplemente queremos representar datos en una lista, pero aprovecho para compartir este código contigo por si te sirve para algún proyecto mas adelante!

ejemplo clase listview personalizado android

Bueno, este método getView captura el id de la posición de la lista, la primera posición es la 0, 1, 2... veras que hay un selector que captura la posición y la canaliza para que en cada caso haga la función que deseamos.

Hechale un ojo y si tienes alguna pregunta.. ¡ya sabes! pasate por el foro y plantea tu duda, estaré encantado de contestarte.