Andriod Listview

http://www.androidcurso.com/index.
php/tutoriales-android/34-unidad-3-actividades-e-
intenciones/128-la-vista-listview
La vista ListView
Una vista ListView visualiza una lista deslizable verticalmente de varios elementos, donde cada
elemento puede definirse como un Layout .Su utilizacin es algo compleja, pero muy potente. Un
ejemplo lo podemos ver en la siguiente figura:

Definir un ListView conlleva los siguientes cuatro pasos:
Disear un Layout que lo contenga al ListView
Disear un Layout individual que se repetir en la lista
Implementar una actividad que lo visualice el Layout con el ListView
Personalizar cada una de los Layouts individuales segn nuestros datos
Veamos estos pasos con ms detalle:
Para utilizar un ListView dentro de un Layout puedes de usar la siguiente estructura:
<FrameLayout>
<ListView
android:id="@android:id/list"... />
<TextView
android:id="@android:id/empty"
... />
</FrameLayout>
Donde tenemos un FrameLayout que permite visualizar dos posibles elementos, uno u otro, pero no
los dos simultneamente. El primero es el ListView que se visualizar cuando haya algn elemento
en la lista. El segundo puede ser cualquier tipo de vista y se visualizar cuando no existan elementos
en la lista. El sistema controla la visibilidad de forma automtica, solo has de tener cuidado de
identificar cada uno de los elementos con el valor exacto que se muestra.
NOTA: Recuerda que para crear nuevos identificadores debes utilizar la
expresin"@+id/nombre_identificador". El carcter @ significa que se trata de un identificador de recurso
que se definir en la clase R.java. El carcter + significa que el recurso ha de ser creado en este
momento. En este caso hemos utilizado identificadores definidos en el sistema (es
decir @android:significa que es un recurso definido en la clase android.R.java).
Una vez creado el Layout que contiene el ListView tendremos que visualizarlo en una
actividad. Para este propsito utilizaremos un tipo de actividad especial, ListActivity.
Tambin tendremos que indicar al sistema cada uno de los Layouts individuales que
contendr el ListView. Esto lo haremos llamando al
mtodo setListAdapter(). Existen varias alternativas con diferentes grados de
dificultad. Para una mejor conprensin iremos mostrando tres ejemplos de uso
de setListAdapter(), de ms sencillo a ms complejo.

Las capturas anteriores muestran los tres ListView que vamos construir. El de la izquierda se limita a
mostrar una lista de Strings. El del centro visualiza una lista de un Layout diseado por nosotros.
Aunque este Layout tiene varios componentes (una imagen y dos textos), solo cambiamos uno de los
textos. En el ltimo ejemplo cambiaremos tambin la imagen de cada elemento.

video[Tutorial] Uso de ListView

Un ListView que visualiza una lista de Strings
Ejercicio paso a paso: Un ListView que visualiza una lista de
Strings
1. El Layout que utilizaremos en Asteroides para mostrar las puntuaciones se
llamar puntuaciones.xml. En el se incluye una vista ListView. Crea el Layout con el siguiente
cdigo:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="wrap_content"
android:text="Puntuaciones"
android:gravity="center"
android:layout_margin="10px"
android:textSize="10pt"/>
<FrameLayout
android:layout_height="0dip"
android:layout_weight="1">
<ListView
android:id="@android:id/list"
android:layout_height="match_parent"
android:drawSelectorOnTop="false" />
<TextView
android:id="@android:id/empty"
android:text="No hay puntuaciones" />
</FrameLayout>
</LinearLayout>

2. Necesitamos ahora crear la actividad Puntuaciones para visualizar el Layout anterior. Crea una
nueva clase en tu proyecto e introduce el siguiente cdigo:
public class Puntuaciones extends ListActivity {
@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.puntuaciones);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
Asteroides.almacen.listaPuntuaciones(10)));
}
}

Toda actividad que vaya a visualizar un ListView ha de heredar de ListActivity. Adems, ha de llamar
al mtodo setListAdapter() para indicar el adaptador con la lista de elementos a visualizar. En el
ejemplo se ha utilizado una de la posibilidades ms sencillas, para crear un adaptador, usar la
clase ArrayAdapter<clase>. Un ArrayAdapter crea las vistas del ListView a partir de los datos
almacenados en un array. Puedes utilizar un array que contenga datos de cualquier clase, no tienes
ms que indicar en <Clase> la clase deseada. En este caso se utiliza de un array de String[1]. El
constructor de ArrayAdapter<clase> tiene tres parmetros: El primer parmetro es un Context con
informacin sobre el entorno de la aplicacin. Utilizaremos como contexto la misma actividad que
hace la llamada. El segundo parmetro es un Layout, utilizado para representar cada elemento de la
lista. En este ejemplo, en lugar de definir uno nuevo, utilizaremos una ya definido en el sistema. El
ltimo parmetro es un array con los strings a mostrar. Para ello, llamamos al
mtodo listaPuntuaciones() que nos devuelve esta lista del objeto esttico almacen de la clase Asteroides.
3. Recuerda que toda nueva actividad ha de ser registrada en AndroidManifest.xml.
4. Prueba si funcionan las modificaciones introducidas.
Un ListView que visualiza Layouts personalizados
Vamos a personalizar el ListView anterior para que cada elemento de la lista sea un Layoutdefinido
por nosotros. Para ello sigue los siguientes pasos:
Ejercicio paso a paso: Un ListView que visualiza layouts
personalizados
1. Reemplaza la clase anterior por:
public class Puntuaciones extends ListActivity {
@Override public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.puntuaciones);
setListAdapter(
new ArrayAdapter<String>(this,
R.layout.elemento_lista,
R.id.titulo,
}
}

Como hemos explicado, la clase ArrayAdapter<String> permite insertar los
datos desde un array de String en nuestro ListView. En este ejemplo se
utiliza un constructor con cuatro parmetros:
R.layout.elemento_lista: es una referencia de recurso a la vista que ser
utilizada repetidas veces para formar la lista. Se define a continuacin.
R.id.titulo: identifica un id de la vista anterior que ha de ser un TextView.
Su texto ser reemplazado por el que se indica en el siguiente
parmetro.
Asteroides.almacen.listaPuntuaciones(10): vector de String con
los textos que sern visualizados en cada uno de los TextView. Esta lista
es obtenida accediendo a la claseAsteroides a su variable
esttica almacen llamando a su mtodo listaPuntuaciones().
2. Ahora hemos de definir el Layout que representar cada uno de los elementos de la
lista. Crea el fichero res/Layout/elemento_lista.xml con el siguiente cdigo:
<RelativeLayout
android:layout_height="?android:attr/listPreferredItemHeight">
<ImageView android:id="@+id/icono"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_alignParentLeft="true"
android:src="@drawable/asteroide2"/>
<TextView android:id="@+id/titulo"
android:layout_width="matchl_parent"
android:layout_toRightOf="@id/icono"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:singleLine="true" />
<TextView android:id="@+id/subtitulo"
android:text="Otro Texto"
android:layout_toRightOf="@id/icono"
android:layout_below="@id/titulo"
android:layout_alignParentBottom="true"
android:gravity="center"/>
</RelativeLayout>

Este Layout representa una imagen a la izquierda con dos textos a la derecha, uno de mayor tamao
en la parte superior. Para combinar estos elementos se ha escogido un RelativeLayout, donde el alto se
establece a partir de un parmetro de configuracin del sistema ?android:attr/listPreferredItemHeight. El
primer elemento que contiene es un ImageView alineado a la izquierda. Su alto es la misma que el
contenedor (match_parent) mientras que el ancho se establece con el mismo parmetro que el alto del
contenedor. Por lo tanto la imagen ser cuadrada.
3. Las imgenes utilizadas en la aplicacin Asteroides puedes descargarlas de www.androidcurso.com. En
el men El gran libro de Android / Ficheros usados en ejercicios dentro de Graficos.zip. Copia el
fichero asteriode1.png, asteriode2.png y asteriode3.png a la carpeta res/drawable.
4. Ejecuta la aplicacin y verifica el resultado.

Un ListView con nuestro propio adaptador
En el ejercicio anterior hemos visto como podamos asociar un Layout definido por nosotros
alListView y personalizar uno de sus campos. Si queremos algo ms adaptable,por ejemplo
cambiar varios campos, tendremos que escribir nuestro propio adaptador extendiendo la
clase BaseAdapter. En esta clase habr que sobreescribir los siguientes cuatro mtodos:
View getView(int position, View convertView, ViewGroup parent)
Este mtodo ha de construir un nuevo objeto View que ser visualizado en la posicin position .
Opcionalmente podemos partir de una vista base convertView para generar ms rpido este
objeto. El ltimo parmetro corresponde al contenedor de vistas donde el objeto va a ser
aadido.
int getCount()
Devuelve el nmero de elementos de la lista.
Object getItem(int position)
Devuelve el elemento en una determinada posicin de la lista.
long getItemId(int position)
Devuelve el identificador de fila de una determinada posicin de la lista.
Veamos un ejemplo:
Ejercicio paso a paso: Un ListView con nuestro propio
adaptador

1. Crea la clase MiAdaptador.java en el proyecto con el siguiente cdigo:

public class MiAdaptador extends BaseAdapter {
private final Activity actividad;
private final Vector<String> lista;

public MiAdaptador(Activity actividad, Vector<String> lista) {
super();
this.actividad = actividad;
this.lista = lista;
}

public View getView(int position, View convertView,
ViewGroup parent) {
LayoutInflater inflater = actividad.getLayoutInflater();
View view = inflater.inflate(R.layout.elemento_lista, null,
true);
true);
TextView textView =(TextView)view.findViewById(R.id.titulo);
textView.setText(lista.elementAt(position));
ImageView imageView=(ImageView)view.findViewById(R.id.icono);
switch (Math.round((float)Math.random()*3)){
case 0:
imageView.setImageResource(R.drawable.asteroide1);
break;
case 1:
break;
default:
break;
}
return view;
}

public int getCount() {
return lista.size();
}

public Object getItem(int arg0) {
return lista.elementAt(arg0);
}

public long getItemId(int position) {
return position;
}
}
2. En el constructor de la clase se indica la actividad donde se ejecutar y la lista de
datos a visualizar. El mtodo ms importante de esta clase es getView() el cual tiene
que construir los diferentes Layouts que sern aadidos en la lista. Comenzamos
construyendo un objeto View a partir del cdigo xml definido enelemento_lista.xml.
Este trabajo se realiza por medio de la clase LayoutInflater.Luego, se modifica
el texto de uno de los TextView segn el array que se pas en el constructor.
Finalmente, se obtiene un nmero al azar (Math.round()) y se asigna uno de los
tres grficos de forma aleatoria.
3. Reemplaza en la clase Puntuaciones la llamada al constructor
de ArrayAdapter<String> por:
setListAdapter(new MiAdaptador(this,

4. Ejecuta la aplicaciny verifica el resultado.
NOTA: En algunos casos el adaptador ha de trabajar con listas muy grandes o estas listas
han de ser creadas desde un servidor. En estos casos es mejor ir solicitando la informacin a
medida que se va representando. Un ejemplo se muestra en la aplicacin ApiDemos descrita
en el captulo 1, en la actividad:
com.example.android.apis.view.List13
Detectar una pulsacin sobre un elemento de la lista
Un ListView puede tener diferentes componentes que nos permitan interaccionar con el
usuario. Por ejemplo, cada elemento definido en getView() puede tener botones para
diferentes acciones.
Hay un tipo de interaccin muy sencilla de definir. La clase ListActivity tiene un
mtodo que es invocado cada vez que se pulsa sobre un elemento de la lista. El siguiente
ejercicio ilustra cmo utilizarlo.

Ejercicio paso a paso: Detectar una pulsacin sobre un
elemento de la lista
1. Aade el siguiente mtodo a la clase Puntuaciones.java:
@Override protected void onListItemClick(ListView listView,
View view, int position, long id) {
super.onListItemClick(listView, view, position, id);
Object o = getListAdapter().getItem(position);
Toast.makeText(this, "Seleccin: " + Integer.toString(position)
+ " - " + o.toString(),Toast.LENGTH_LONG).show();
}
2. Ejecuta la aplicacin, pulsa en Puntuaciones y luego en una puntuacib para
verificarel resultado.

http://jarroba.com/listview-o-listado-en-android/
ListView o listado en Android
Este tutorial est indicado para todos lo que ya hayan buceado un poco en Android. Se
dar por sentado ciertos conocimientos muy bsicos, cuyo apoyo pueden servirse de
tutoriales anteriores como el de saber qu es una Actividad. Si no tienes mucho tiempo
o quieres un Snippet de cdigo para hacer un listado rpidamente, entonces te
recomiendo que vayas directamente al artculo de listado en pocas lneas; si por el
contrario quieres aprenderlo todo sobre listados de Android continuar leyendo es la
opcin correcta.
Aunque todo en el universo tienda al caos, siempre es bueno ponerle un orden para
saber interpretarlo. No es la mejor definicin de listado, pero si una bonita alegora al
mismo. Un listado es eso, un conjunto de datos ordenados, para que sea sencillo indagar
en ellos.
Este tutorial se basar en describir como hacer un listado en Android: en el que tenemos
un nmero arbitrario de datos -nmero exacto de entradas que no conocemos, bien
porque obtengamos los datos de Internet, o estn en una base de datos que va creciendo,
etc- de aves que queremos ordenar en un listado. Cuyas entradas queremos hacer a
nuestro antojo con el nombre del ave como titular, una pequea descripcin y una
imagen asociada a cada uno (Vase la imagen siguiente, para entender de un vistazo lo
que se quiere conseguir).

Y no contentos con esto, queremos que adems sea seleccionable cada elemento del
listado.

Para mostrar ms informacin en un Toast (tambin podramos abrir otra Activity con
informacin extra, o lo que queramos) del elemento seleccionado.

Vamos, que construiremos un ListView de generacin dinmica de contenidos (Un
ejemplo esttico lo tienes en la pgina oficial de desarrolladores de Android), deseable
el 90% de la veces por un programador Android. Y s, las imgenes y textos del ejemplo
estn obtenidos de la Wikipedia.
Como haremos esto de una manera sencilla y ptima. Primero lo entenderemos y luego
lo haremos.
Qu es lo que queremos hacer? Queremos un listado de todos los elementos/entradas
individuales que me den la gana (entre cero e infinito ). De lo real al concepto mental
sera la siguiente imagen.

Todos las entradas son iguales, Sera maravilloso que se pudiera disear una nica
entrada y luego que el resto sean un copiar y pegar? Aunque sea por vaguera, la
respuesta es: debemos como buenos programadores.

Ya tenemos dividido lo que queremos hacer. Ahora, la lgica nos dice que en el diseo
hacia delante, tendremos dos Layouts uno principal que contendr varias veces la copia
del segundo:
Uno con la entrada suelta, con el diseo que queramos. Ser la unidad que se copiar en
el interior del listado. Lo llamaremos en este ejemplo entrada.xml.
Otro con el listado, que solo dispondr de tal. Con los huecos esperando para contener
la copia del diseo de la entrada; y cada entrada con unos datos diferentes. A este
contenedor de entradas lo llamaremos listado.xml.

Haremos el diseo de entrada.xml. Para el ejemplo haremos el siguiente Layout, que
evidentemente podremos hacer a nuestro antojo, con los campos que queramos,
imgenes, botones, checkbox, spinner, etc. Al disear ste, pensemos, no en el
contenido de cada entrada, sino como haremos todas las entradas para que salgan
iguales. Pues este ser replicado para todas la entradas.
Para el ejemplo, la idea de una entrada es la siguiente:

Y su cdigo asociado para generar la vista de una entrada sera este (Nota: por reducir
cdigo y que se entienda mejor, hemos optado por poner los Strings directamente; esto
est mal hecho y deberan ir al fichero strings.xml). Evidentemente ponemos los id
para luego referenciarlos y llenar cada una de las entradas con sus datos
correspondientes.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal" >

<ImageView
android:id="@+id/imageView_imagen"
android:layout_width="80dp"
android:layout_height="80dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:contentDescription="Descripcin del contenido de la
imagen"
android:src="@android:drawable/ic_menu_gallery" />

<LinearLayout
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/textView_superior"
android:layout_width="wrap_content"
android:text="Large Text"

android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView_inferior"
android:text="Small Text"

android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

</LinearLayout>
Fcil? No. Ms fcil es listado.xml. En este ejemplo nos bastar con que usemos
ListView, que ser el contenedor de las entradas.
<ListView
android:id="@+id/ListView_listado"
android:layout_height="match_parent" >
</ListView>
Falta que hagamos la lgica del programa. La lgica que nos cargar los datos y nos
construir el listado. Para esto tendremos una Actividad que ser la que muestre el
listado. Para no liar las cosas lo haremos en el ejemplo en la clase MainActivity.java.
Esta har uso de otras dos. Una que encapsule los datos de la entrada, cuyo nombre
pondremos como Lista_entrada.java. Y otra que ser la que adapte las entradas a la
lista, y ser nombrada como Lista_adaptador.java.
Terminaremos teniendo los siguientes archivos en el explorador de paquetes. Donde los
marcados sern los que usaremos en este ejemplo. Cabe indicar que las imgenes las
estamos insertando directamente para no complicar ms el ejemplo, pero esta forma de
construir el listado dinmicamente tambin funcionara si las imgenes se descargaran
de internet, se obtuvieran de la memoria del telfono, etc.

Empezaremos a definir Lista_entrada.java. Para qu sirve? Sabemos que nos
llegarn unos datos, y que nos interesan los siguientes para cada entrada: imagen, ttulo
y descripcin. Por lo que haremos unos paquetes de datos para cada uno de los
conjuntos de la entrada. Estos paquetes sern objetos de la clase Lista_entrada.java.

Para hacernos una idea, imaginemos que tenemos tres pjaros. Cada uno con: ttulo,
descripcin e imagen. Tendremos tres objetos de la clase Lista_entrada.java, cada uno
almacenar sus datos. Pero no confundamos, esto no est asignado todava a la entrada
de la vista -de la interfaz- sino que son grupos para separar la informacin. Estos grupos
se suelen llamar manejadores o en ingls handler.

El cdigo siguiente contiene lo que es la encapsulacin de los datos, que coinciden con
los explicados:
Ttulo, con nombre de variable como textoEncima para especificar en cul de los dos
TextViews de la vista tendr que ser colocado.
Descripcin, la variable la llamaremos como textoDebajo.
Imagen, y almacenaremos la variable idImagen, para referenciara a la imagen. Solo
guardaremos el id, ya que solo guardaremos el identificador de la imagen y no la imagen
en s (para este ejemplo no lo complicamos y guardamos el identificador, pero si
queremos podremos guardar un Drawable, un Bitmap, etc).
Este manejador tendr las variables de los View que hayamos declarado en el Layout
entrada.xml. Repito, aqu no lo referenciaremos, es solo un contenedor que separa
unos datos de otros.
Si nos fijamos en el su cdigo, solo son variables, con sus getters y de setter el mismo
constructor. No tiene ms la clase, es as de simple (aqu, para que se entienda mejor,
ponemos los getters y setters; Android recomienda por optimizar hacer variables
globales publicas y olvidarnos de getters y setters, con lo que sera todava mucho ms
simple este cdigo).
package jarroba.ramon.listado;

public class Lista_entrada {
private int idImagen;
private String textoEncima;
private String textoDebajo;

public Lista_entrada (int idImagen, String textoEncima,
String textoDebajo) {
this.idImagen = idImagen;
this.textoEncima = textoEncima;
this.textoDebajo = textoDebajo;
}

public String get_textoEncima() {
return textoEncima;
}

public String get_textoDebajo() {
return textoDebajo;
}

public int get_idImagen() {
return idImagen;
}
}
Cmo encapsulamos los datos que queramos en este Handler? Muy sencillo, ya vers.
Si creamos el objeto Lista_entrada tal cual, lo haramos de la siguiente manera:
new Lista_entrada(R.drawable. imagen, "TTULO", "Descripcin");
Dnde asignamos el objeto? Cuntos objetos vamos a tener de estos? La respuesta es
en una lista de Java, ms concretamente en un ArrayList.
En este ejemplo lo haremos directamente sobre la clase MainActivity.java como
ejemplo la siguiente (Nota: lo que se muestra a continuacin es un trozo de la clase
MainActivity.java, se muestra completa al final del artculo). Aqu un ejemplo de
como aadir la informacin de las tres aves al ArrayList:

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.listado);

ArrayList<Lista_entrada> datos = new
ArrayList<Lista_entrada>();

datos.add(new Lista_entrada(R.drawable.im_buho, "BUHO",
"Bho es el nombre comn de aves de la familia Strigidae, del orden
de las estrigiformes o aves rapaces nocturnas. Habitualmente
designa especies que, a diferencia de las lechuzas, tienen plumas
alzadas que parecen orejas."));
datos.add(new Lista_entrada(R.drawable.im_colibri,
"COLIBR", "Los troquilinos (Trochilinae) son una subfamilia de
aves apodiformes de la familia Trochilidae, conocidas vulgarmente
como colibres, quindes, tucusitos, picaflores, chupamirtos,
chuparrosas, huichichiquis (idioma nahuatl), mainumby (idioma
guaran) o guanumby. Conjuntamente con las ermitas, que pertenecen
a la subfamilia Phaethornithinae, conforman la familia Trochilidae
que, en la sistemtica de Charles Sibley, se clasifica en un orden
propio: Trochiliformes, independiente de los vencejos del orden
Apodiformes. La subfamilia Trochilinae incluye ms de 100 gneros
que comprenden un total de 330 a 340 especies."));
datos.add(new Lista_entrada(R.drawable.im_cuervo, "CUERVO",
"El cuervo comn (Corvus corax) es una especie de ave paseriforme
de la familia de los crvidos (Corvidae). Presente en todo el
hemisferio septentrional, es la especie de crvido con la mayor
superficie de distribucin. Con el cuervo de pico grueso, es el
mayor de los crvidos y probablemente la paseriforme ms pesada; en
su madurez, el cuervo comn mide entre 52 y 69 centmetros de
longitud y su peso vara de 0,69 a 1,7 kilogramos. Los cuervos
comunes viven generalmente de 10 a 15 aos pero algunos individuos
han vivido 40 aos. Los juveniles pueden desplazarse en grupos pero
las parejas ya formadas permanecen juntas toda su vida, cada pareja
defendiendo un territorio. Existen 8 subespecies conocidas que se
diferencian muy poco aparentemente, aunque estudios recientes hayan
demostrado diferencias genticas significativas entre las
poblaciones de distintas regiones."));
}

}
Todava no hemos acabado con la clase MainActivity.java. Faltara decirle que
queremos hacer con el ArrayList, que ser envirselo a la lista para que lo reconstruya y
la de forma.
A toda ListView hay que pasarle un adaptador con los datos y que herede de
BaseAdapter (Son cosas de Android).
Antes un inciso. Hemos trabajado y conocemos la pesadez de hacer el adaptador de un
listado de manera dinmica. Por eso www.jarroba.com quiere haceros un regalo, con el
siguiente ahorro de tiempo y de comerse la cabeza. En todos los ejemplos que he visto
por ah, construyen un adaptador independiente para cada handler para este tipo de listas
simples. Y yo he dicho: no, nunca ms, no es necesario, un solo adaptador vale para
todas las listas con entradas personalizadas que queramos (o al menos todas con las que
he trabajado). A continuacin les regalo el cdigo, que en apariencia es sencillo; lo que
s es muy fcil de utilizar. Es el trabajo de mucho tiempo, errores y experiencia. Puede
que sea mejorable, por lo que si descubres y nos lo quieres contar, o descubro una
manera mejor actualizar este tutorial. Pero por ahora no he visto nada ms cmodo
para trabajar con listas. Por supuesto, eres libre de modificarlo, proponer mejoras y de
usarlo. Nota: este adaptador universal es solo para listas simples con vistas
complejas, lo que es que van a cargarse un vez los elementos de la lista y ya no se van a
modificar ms mientras el usuario interaccione con la lista; si queremos aadir o
eliminar elementos mientras el usuario toca la lista, requerimos de otro tipo de
adaptador (Puedes aprender como utiliza inflate() el mtodo getView() del Adapter en
este otro tutorial).
Cdigo de la clase Lista_adaptador.java:


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

/** Adaptador de ListView universal, para www.jarroba.com
* @author Ramon Invarato Menndez
*/
public abstract class Lista_adaptador extends BaseAdapter {

private ArrayList<?> entradas;
private int R_layout_IdView;
private Context contexto;

public Lista_adaptador(Context contexto, int R_layout_IdView,
ArrayList<?> entradas) {
super();
this.contexto = contexto;
this.entradas = entradas;
this.R_layout_IdView = R_layout_IdView;
}

@Override
public View getView(int posicion, View view, ViewGroup
pariente) {
if (view == null) {
LayoutInflater vi = (LayoutInflater)
contexto.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = vi.inflate(R_layout_IdView, null);
}
onEntrada (entradas.get(posicion), view);
return view;
}

@Override
return entradas.size();
}

@Override
public Object getItem(int posicion) {
return entradas.get(posicion);
}

@Override
public long getItemId(int posicion) {
return posicion;
}

/** Devuelve cada una de las entradas con cada una de las
vistas a la que debe de ser asociada
* @param entrada La entrada que ser la asociada a la view. La
entrada es del tipo del paquete/handler
* @param view View particular que contendr los datos del
paquete/handler
*/
public abstract void onEntrada (Object entrada, View view);

}
Este cdigo lo que hace es crear un adaptador para ListView. En el constructor hay que
pasarle el contexto de la aplicacin, el id del layout de la entrada (en este ejemplo
R.layout.entrada), y el ArrayList que construimos anteriormente con los handler con
los datos. Como es obvio, ya que pide los datos del ArrayList, este cdigo ir justo
despus de la creacin del ArrayList. Al crear el objeto se nos pedir sobrescribir el
mtodo onEntrada, que ser donde asignaremos cada parte del handler de la clase
Lista_entrada.java a cada una de las copias de las vistas entrada.xml. onEntrada
da de informacin: el objeto con solo los datos de la entrada que va a construir y la vista
donde lo va a meter. Te sorprender el escaso cdigo que hay que usar y lo simple que
es su uso, a continuacin lo veremos.
Una vista rpida de donde se usa este adaptador.

En el ejemplo lo situaremos dentro del MainActivity.java en el onCreate, despus
del cdigo que ya haba (Nota: como comentamos anteriormente, al final publicaremos
el cdigo completo). Cdigo para usar el adaptador:
ListView lista = (ListView) findViewById(R.id.ListView_listado);
lista.setAdapter(new Lista_adaptador(this,
R.layout.entrada, datos){
@Override
public void onEntrada(Object entrada, View
view) {
TextView texto_superior_entrada =
(TextView) view.findViewById(R.id.textView_superior);

texto_superior_entrada.setText(((Lista_entrada)
entrada).get_textoEncima());

TextView texto_inferior_entrada =
(TextView) view.findViewById(R.id.textView_inferior);

texto_inferior_entrada.setText(((Lista_entrada)
entrada).get_textoDebajo());

ImageView imagen_entrada = (ImageView)
view.findViewById(R.id.imageView_imagen);

imagen_entrada.setImageResource(((Lista_entrada)
entrada).get_idImagen());
}
});
Este poco de cdigo usa el adaptador. Se asigna cada View con su dato en el momento
justo en el que se construye cada entrada No dije que era fcil?.
Ya solo queda capturar el evento de Click para cada una de las entradas y hacer lo
que sea con esta. En este ejemplo recogemos la descripcin y la mostramos en un
Toast. Esto lo hacemos al devolver el adaptador y conociendo la posicin nos habr
devuelto la entrada pulsada. Despus del anterior cdigo escribimos el escuchador del
evento click como se hace normalmente:
lista.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> pariente, View view, int
posicion, long id) {
Lista_entrada elegido = (Lista_entrada)
pariente.getItemAtPosition(posicion);

CharSequence texto = "Seleccionado: " +
elegido.get_textoDebajo();
Toast toast = Toast.makeText(MainActivity.this, texto,
Toast.LENGTH_LONG);
toast.show();
}
});
Y ya al fin, el cdigo completo del MainActivity.java, es el siguiente:


import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;


private ListView lista;

@Override
setContentView(R.layout.listado);

ArrayList<Lista_entrada> datos = new
ArrayList<Lista_entrada>();

datos.add(new Lista_entrada(R.drawable.im_buho, "BUHO",
"Bho es el nombre comn de aves de la familia Strigidae, del orden
de las estrigiformes o aves rapaces nocturnas. Habitualmente
designa especies que, a diferencia de las lechuzas, tienen plumas
alzadas que parecen orejas."));
datos.add(new Lista_entrada(R.drawable.im_colibri,
"COLIBR", "Los troquilinos (Trochilinae) son una subfamilia de
aves apodiformes de la familia Trochilidae, conocidas vulgarmente
como colibres, quindes, tucusitos, picaflores, chupamirtos,
chuparrosas, huichichiquis (idioma nahuatl), mainumby (idioma
guaran) o guanumby. Conjuntamente con las ermitas, que pertenecen
a la subfamilia Phaethornithinae, conforman la familia Trochilidae
que, en la sistemtica de Charles Sibley, se clasifica en un orden
propio: Trochiliformes, independiente de los vencejos del orden
Apodiformes. La subfamilia Trochilinae incluye ms de 100 gneros
que comprenden un total de 330 a 340 especies."));
datos.add(new Lista_entrada(R.drawable.im_cuervo, "CUERVO",
"El cuervo comn (Corvus corax) es una especie de ave paseriforme
de la familia de los crvidos (Corvidae). Presente en todo el
hemisferio septentrional, es la especie de crvido con la mayor
superficie de distribucin. Con el cuervo de pico grueso, es el
mayor de los crvidos y probablemente la paseriforme ms pesada; en
su madurez, el cuervo comn mide entre 52 y 69 centmetros de
longitud y su peso vara de 0,69 a 1,7 kilogramos. Los cuervos
comunes viven generalmente de 10 a 15 aos pero algunos individuos
han vivido 40 aos. Los juveniles pueden desplazarse en grupos pero
las parejas ya formadas permanecen juntas toda su vida, cada pareja
defendiendo un territorio. Existen 8 subespecies conocidas que se
diferencian muy poco aparentemente, aunque estudios recientes hayan
demostrado diferencias genticas significativas entre las
poblaciones de distintas regiones."));
datos.add(new Lista_entrada(R.drawable.im_flamenco,
"FLAMENCO", "Los fenicopteriformes (Phoenicopteriformes), los
cuales reciben el nombre vulgar de flamencos, son un orden de aves
neognatas, con un nico gnero viviente: Phoenicopterus. Son aves
que se distribuyen tanto por el hemisferio occidental como por el
hemisferio oriental: existen cuatro especies en Amrica y dos en el
Viejo Mundo. Tienen crneo desmognato holorrino, con 16 a 20
vrtebras cervicales y pies anisodctilos."));
datos.add(new Lista_entrada(R.drawable.im_kiwi, "KIWI",
"Los kiwis (Apterix, gr. 'sin alas') son un gnero de aves
paleognatas compuesto por cinco especies endmicas de Nueva
Zelanda.1 2 Son aves no voladoras pequeas, aproximadamente del
tamao de una gallina. Antes de la llegada de los humanos alrededor
del ao 1300, en Nueva Zelanda los nicos mamferos que haba eran
murcilagos, y los nichos ecolgicos que en otras partes del mundo
eran ocupados por animales tan diversos como caballos, lobos y
ratones fueron utilizados en Nueva Zelanda por pjaros (y en menor
proporcin por ciertas especies de reptiles). La denominacin kiwi
es maor, idioma del pueblo homnimo de linaje malayopolinesio que
coloniz Nueva Zelanda antes de la llegada de los europeos."));
datos.add(new Lista_entrada(R.drawable.im_loro, "LORO",
"Las Psitcidas (Psittacidae) son una familia de aves psitaciformes
llamadas comnmente loros o papagayos, e incluye a los guacamayos,
las cotorras, los periquitos, los agapornis y formas afines."));
datos.add(new Lista_entrada(R.drawable.im_pavo, "PAVO",
"Pavo es un gnero de aves galliformes de la familia Phasianidae,
que incluye dos especies, el pavo real comn (Pavo cristatus) y el
pavo real cuelliverde (Pavo muticus).1"));
datos.add(new Lista_entrada(R.drawable.im_pinguino,
"PINGINO", "Los pinginos (familia Spheniscidae, orden
Sphenisciformes) son un grupo de aves marinas, no voladoras, que se
distribuyen nicamente en el Hemisferio Sur, sobre todo en sus
altas latitudes."));

lista = (ListView) findViewById(R.id.ListView_listado);
lista.setAdapter(new Lista_adaptador(this,
R.layout.entrada, datos){
@Override
public void onEntrada(Object entrada, View
view) {
if (entrada != null) {
TextView texto_superior_entrada =
(TextView) view.findViewById(R.id.textView_superior);
if (texto_superior_entrada != null)

texto_superior_entrada.setText(((Lista_entrada)
entrada).get_textoEncima());

TextView texto_inferior_entrada =
(TextView) view.findViewById(R.id.textView_inferior);
if (texto_inferior_entrada != null)

texto_inferior_entrada.setText(((Lista_entrada)
entrada).get_textoDebajo());

ImageView imagen_entrada = (ImageView)
view.findViewById(R.id.imageView_imagen);
if (imagen_entrada != null)

imagen_entrada.setImageResource(((Lista_entrada)
entrada).get_idImagen());
}
}
});

lista.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?>
pariente, View view, int posicion, long id) {
Lista_entrada elegido =
(Lista_entrada) pariente.getItemAtPosition(posicion);

CharSequence texto = "Seleccionado: " +
elegido.get_textoDebajo();
Toast toast = Toast.makeText(MainActivity.this,
texto, Toast.LENGTH_LONG);
toast.show();
}
});

}

}
Esperamos que haya sido aclaratorio y para entender muchas cosas sobre cmo se
construye una lista.
Aqu dejo para descargar el proyecto entero: Listado
En respuesta a las preguntas ms comunes de nuestros lectores. Si quieres hacer otra
cosa con los listados, as como si has visto cosas que no has sabido como solucionar; e
incluso, con lo aqu aprendido, como hacer un GridView o un Spinner completamente
personalizados. Te recomiendo que eches una ojeada al artculo que expande los
conocimientos de ListView, se solventan muchas dudas y ensea mucho ms,
en: http://jarroba.com/expansion-listview/
Tambin puede ser muy interesante el artculo sobre programar para diferentes
dispositivos Android con la arquitectura de Fragments, en el que extiendo un poco ms
el ejemplo de listado y aado conceptos avanzados.
ListViews personalizadas en
Android
Tengo un par de amigos que estn empezando a meterse en el mundillo de la
programacin para Android, y como buenos principiantes, tienen muchas ganas pero
tambin muchas dudas.
Hace unos das me preguntaron por cmo hacer listas personalizadas para sus
aplicaciones de Android. A pesar de que hay bastantes ejemplos por Internet (y tambin
est disponible ladocumentacin de Google) he mirado algunas pginas y desde luego no
destacan por su sencillez a la hora de dar explicaciones, por lo que quiz una persona que
est empezando en el mundillo los encuentre bastante difcil de entender. As que me he
decidido a, en lugar de explicrselo personalmente a ellos, hacer un post con una
explicacin lo ms clara posible y si as puedo ayudar a alguna otra persona bienvenido
sea.

Quiero un ListView que contenga imgenes
Las listas en Android se llenan de elementos mediante un Adapter, que, para explicarlo de
forma sencilla, es una especie de puente entre la lista y los datos que queremos que
aparezcan en esa lista. Esto quiere decir que no importan los datos que deseemos aadir
a una lista, la ListViewsiempre ser igual, cambiando el Adapter. Nos podemos encontrar
con varios tipos de Adapterpor defecto, como, por ejemplo, el ArrayAdapter, que muestra
un array en una lista.
Adems del Adapter tambin necesitamos un archivo xml donde se especifique cmo va a
ser la lista. Estos archivos son archivos layout, exactamente iguales a los que definen
cmo son las actividades de nuestra aplicacin. Android cuenta con varios
archivos layout para listas por defecto, como simple_list_item1, simple_list_item2
Dependiendo del layout que escojas la lista tendr un aspecto u otro (y tendrs que
escoger un Adapter u otro, o sobreescribir mtodos).
Pero como todo esto es muy sencillo vamos a lo que importa: vamos a crear una lista que
muestre la lista del Consejo de Direccin de la empresa Cebollas Paco S.L; lista que nos
mostrar una foto del directivo, su nombre completo y su cargo.
Creando el layout para los elementos
Creamos un archivo layout de la forma habitual, escogiendo la opcin XML Layout File. Lo
llamaremos itemlista.xml y constar de una RelativeLayout, un ImageView con ID foto y
dosTextView de distinto tamao, el mayor con el ID nombre y el menor con el ID cargo.
Diseamos a nuestro gusto nuestro layout. En mi caso he dado un padding de 10dp a
la RelativeLayout y he colocado los campos de texto a la izquierda de la imagen (he
colocado el androide en el campo de imagen para que sea visible y ms fcil de entender,
pero una vez le dais una altura y anchura podis dejarlo vaco ya que los que tenga cada
campo en el XML se sobreescribirn mediante los datos que pasemos por cdigo).
Estupendo, ya tenemos cmo se vern los elementos de nuestra lista personalizada.
Ahora vamos a lo ms importante: el cdigo.
Creando un objeto Directivo
Para poder llenar nuestra lista de los directivos de la empresa tendremos que crear un
objeto que nos permita representarlos. Para ello crearemos una nueva clase dentro de
nuestro proyecto, la clase Directivo, que utilizaremos para crear un objeto de tipo Directivo
donde se puedan almacenar los datos deseados: fotografa, nombre y cargo. Recordad
que es una clase auxiliar, as que debe crearse como tal, no como una actividad (no hay
que registrarla en AndroidManifest ni crear un xml asociado).
Esta clase contendr tres elementos protegidos, un Drawable para la fotografa (no tiene
por qu ser un Drawable de forma obligatoria, puede ser un Drawable o lo que sea que
necesites), dos String para el nombre y para el cargo y un long para poder obtener el tem
con el que se est interactuando en el caso de que queramos dar esa opcin. Una vez
declarados los elementos (y hechas las importaciones necesarias) podemos hacerlo todo
un poco ms sencillo utilizando las herramientas automticas de Eclipse que nos permiten
crear automticamente el constructor y los mtodos set y get (clic derecho sobre el editor
de cdigo > Source).
Grficamente un objeto directivo ser algo as:

Nuestra clase Directivo tendr la siguiente pinta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.naroh.pruebalistviewimagenes;

import android.graphics.Drawable;

public class Directivo {
protected Drawable foto;
protected String nombre;
protected String cargo;
protected long id;

public Directivo(Drawable foto, String nombre, String cargo) {
super();
this.foto = foto;
this.nombre = nombre;
this.cargo = cargo;
}

public Directivo(Drawable foto, String nombre, String cargo, long id) {
super();
this.foto = foto;
this.cargo = cargo;
this.id = id;
}

26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
public Drawable getFoto() {
return foto;
}

public void setFoto(Drawable foto) {
this.foto = foto;
}

public String getNombre() {
return nombre;
}

public void setNombre(String nombre) {
}

public String getCargo() {
return cargo;
}

public void setCargo(String cargo) {
this.cargo = cargo;
}

public long getId() {
return id;
}

public void setId(long id) {
this.id = id;
}
}
Creando nuestro propio Adapter
Dado que la lista representar objetos que hemos creado es bastante obvio que no
podremos utilizar ningn adapter predefinido. Por lo tanto tendremos que crear nosotros
mismos uno, algo que no es demasiado difcil una vez le pillas el truco. Bsicamente ser
un conjunto de una Activity (o sea, el contexto de la actividad en la que mostraremos la
lista) y un ArrayList de nuestros directivos, lo que representaremos
por ArrayList<Directivo>. Para crear nuestroAdapter crearemos la
clase AdapterDirectivos. y extenderemos de BaseAdapter, implementando los mtodos
de BaseAdapter necesarios.
Si te cuesta ver mentalmente la estructura del ArrayList<Directivo> imagnate una cuerda
de tender la ropa (el array) de donde cuelgan un montn de calcetines (los directivos). Ms
o menos as te puedes acercar a dibujar mentalmente cmo es un array de objetos.
A continuacin os dejo mi clase AdapterDirectivos. Hay una cosa que aparece ah y no he
explicado, y es ese convertView que aparece en el mtodo getView. Se trata de un
truquillo para aumentar la eficiencia a la hora de pintar las listas, y podis ahondar un poco
sobre ello en este post: Using convertView in getView() to make ListView efficient y en
la documentacin de Android. He colocado unos comentarios inline en el cdigo que
espero que sean suficientemente explicativos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19



public class AdapterDirectivos extends BaseAdapter{

protected Activity activity;
protected ArrayList<Directivo> items;

public AdapterDirectivos(Activity activity, ArrayList<Directivo> items) {
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
this.activity = activity;
this.items = items;
}

@Override
return items.size();
}

@Override
public Object getItem(int arg0) {
return items.get(arg0);
}

@Override
return items.get(position).getId();
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

// Generamos una convertView por motivos de eficiencia
View v = convertView;

//Asociamos el layout de la lista que hemos creado
if(convertView == null){
LayoutInflater inf = (LayoutInflater)
activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inf.inflate(R.layout.itemlista, null);
}

// Creamos un objeto directivo
Directivo dir = items.get(position);
//Rellenamos la fotografa
ImageView foto = (ImageView) v.findViewById(R.id.foto);
56
57
58
59
60
61
62
63
64
65
66
foto.setImageDrawable(dir.getFoto());
//Rellenamos el nombre
TextView nombre = (TextView) v.findViewById(R.id.nombre);
nombre.setText(dir.getNombre());
//Rellenamos el cargo
TextView cargo = (TextView) v.findViewById(R.id.cargo);
cargo.setText(dir.getCargo());

// Retornamos la vista
return v;
}
}
Cargando el contenido en la lista
Lo ms complicado ya ha pasado. Ahora lo nico que tenemos que hacer es adecuar la
actividad donde vamos a mostrar la lista y su layout. En el cdigo de la actividad
tendremos que crear objetos Directivo que introduciremos en
un ArrayList<Directivo> e instanciar un AdapterDirectivosy colocarlo como el Adapter de la
lista que tenemos en nuestro layout de actividad.

1
2
3
4
5
6
7
8
9
10
11
12
13
14


import android.view.Menu;

public class Principal extends Activity {

@Override
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
setContentView(R.layout.activity_principal);

ListView lista = (ListView) findViewById(R.id.listadirectivos);
ArrayList<Directivo> arraydir = new ArrayList<Directivo>();
Directivo directivo;

// Introduzco los datos
directivo = new Directivo(getResources().getDrawable(R.drawable.ariannahuffington), "Arianna
Huffington", "Presidenta");
arraydir.add(directivo);
directivo = new Directivo(getResources().getDrawable(R.drawable.corinna), "Princesa Corinna", "CEO");
directivo = new Directivo(getResources().getDrawable(R.drawable.hillaryclinton), "Hillary Clinton",
"Tesorera");
directivo = new Directivo(getResources().getDrawable(R.drawable.bono), "Bono el de U2", "Amenizador");
directivo = new Directivo(getResources().getDrawable(R.drawable.carmenmairena), "Carmen de Mairena",
"Directora RRHH");

// Creo el adapter personalizado
AdapterDirectivos adapter = new AdapterDirectivos(this, arraydir);

// Lo aplico
lista.setAdapter(adapter);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.principal, menu);
return true;
}

}
Todo listo
Ya est! No ha sido tan terrible, verdad? Tras estos sencillos pasos tendremos el
resultado de la imagen que encabeza este post.
Adems del cdigo aqu posteado tambin he creado un repositorio en GitHub con el
proyecto para que lo descarguis y ejecutis en vuestro Eclipse si lo deseis: Android-
Custom-ListView-with-images.
Mucha suerte con la programacin y que vaya todo bien. Y recuerda que si no entiendes
algo siempre puedes preguntar en los comentarios.
El patrn ViewHolder
Aunque esta implementacin funciona perfectamente, en el caso de que tu lista contenga
muchos elementos puede ser til que eches un vistazo al patrn ViewHolder, que permitir
que tu lista tenga un mejor rendimiento a la hora de hacer scroll. Puedes leer el post sobre
el patrn ViewHolder aqu: El patrn ViewHolder para ListViews.
http://www.oneoctopus.es/desarrollo-android/listviews-personalizadas-en-android/
http://amatellanes.wordpress.com/2013/04/14/ejemplo-de-listview-en-android/
ANDROID >> EJEMPLO DE LISTVIEW
EN ANDROID

Una vista ListView visualiza una lista deslizable verticalmente de varios elementos, donde
cada elemento puede definirse como un layout. Su utilizacin es algo compleja, pero muy
potente.
A continuacin voy a realizar un ejemplo usando un ListView, pero a diferencia de otros
ejemplos que he encontrado en la red, donde solo se muestra una lista por pantalla, voy a
mostrar por pantalla la vista ListView junto a otra vista, en este caso una vista WebView, de
tal manera que nuestra aplicacin quedar de la siguiente manera:

Primero vamos a crear las vistas de nuestra aplicacin. En este caso tendremos dos: la vista
principal main.xml y la vista para cada uno de los elementos de la lista list_item.xml. En
el layout main.xml definimos una vista ListView y una vista WebView. Le hemos asignado a
cada uno de los dos elementos un peso mediante el atributo android:layout_weight, en
ambos elementos el peso es el mismo para dividir en dos partes iguales la pantalla:
main.xml
1
2
3
4
5
6
7
8
9
<LinearLayout
android:orientation="horizontal" >

<ListView
android:id="@+id/listView"
10
11
12
13
14
15
16
17
18
19
android:layout_weight="1" />

<WebView
android:id="@+id/webView"
android:layout_weight="1" />

</LinearLayout>
Como hemos dicho, el layout list_item.xml es la vista que tendr cada uno de los elemento
de la lista. En esta ocasin, para cada elemento vamos a mostrar una imagen y un texto:
list_item.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<RelativeLayout
android:layout_height="?android:attr/listPreferredItemHeight" >

<ImageView
android:id="@+id/ivItem"
android:layout_width="?android:attr/listPreferredItemHeight"
android:contentDescription="@string/app_name" />

<TextView
android:id="@+id/tvTitle"
android:layout_toRightOf="@id/ivItem"
17
18
19
20
21
22
23
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textIsSelectable="false" />

</RelativeLayout>
Bien, una vez definidos nuestras vistas vamos a empezar a crear la lgica de la aplicacin.
Comenzamos creando la clase Item, donde definiremos el contenido de cada uno de los
elementos de la lista. En este caso, cada Item va a almacenar informacin sobre pelculas.
Adems de la imagen y el titulo que vamos a mostrar en la vista, almacenaremos tambin una
direccin de una pgina Web que contiene informacin sobre la pelcula, pero que no se va a
mostrar en la lista.
Item.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.amatellanes.android.examples;

public class Item {

private int image;
private String title;
private String url;

public Item() {
super();
}

public Item(int image, String title, String url) {
super();
this.image = image;
this.title = title;
this.url = url;
}
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

public int getImage() {
return image;
}

public void setImage(int image) {
this.image = image;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getUrl() {
return url;
}

public void setUrl(String url) {
this.url = url;
}

}
El siguiente paso es crear el adaptador ItemAdapter para la lista. Dicho adaptador debe
heredar de la clase BaseAdapter. Deberemos implementar obligatriamente los siguientes
mtodos:
o int getCount() Devuelve el nmero de elementos de la lista.
o Object getItem(int position) Devuelve el elemento en una
determinada posicin de la lista.
o long getItemId(int position) Devuelve el identificador de fila de
una determinada posicin de la lista.
o View getView(int position, View convertView, ViewGroup
parent) Este mtodo ha de construir un nuevo objeto View con
el layout correspondiente a la posicin position y devolverlo. Opcionalmente,
podemos partir de una vista base convertView para generar ms rpido las
vistas. El ltimo parmetro corresponde al padre al que la vista va a ser
aadida.
Adems vamos a definir el siguiente constructor:
o ItemAdapter(Context context, List items) Recibe el contacto de
la aplicacin y la lista de elementos que se van a mostrar en la lista.
La clase ItemAdapter quedara de la siguiente manera:
ItemAdapter.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14

import java.util.List;


public class ItemAdapter extends BaseAdapter {

private Context context;
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
private List<Item> items;

public ItemAdapter(Context context, List<Item> items) {
this.context = context;
this.items = items;
}

@Override
return this.items.size();
}

@Override
public Object getItem(int position) {
return this.items.get(position);
}

@Override
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup
parent) {

View rowView = convertView;

if (convertView == null) {
// Create a new view into the list.
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
rowView = inflater.inflate(R.layout.list_item, parent,
false);
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
}

// Set data into the view.
ImageView ivItem = (ImageView)
rowView.findViewById(R.id.ivItem);
TextView tvTitle = (TextView)
rowView.findViewById(R.id.tvTitle);

Item item = this.items.get(position);
tvTitle.setText(item.getTitle());
ivItem.setImageResource(item.getImage());

return rowView;
}

}
En el mtodo getView() lo primero que vamos a hacer es comprobar si la
vista convertViewpuede ser reutilizada para no tener que inflarla nuevamente si no es
necesario, de esta manera optimizaremos nuestra lista. Existen otras tcnicas para mejorar el
rendimiento de una vistaListView que podis consultar aqu.
Por ultimo, definimos nuestra actividad principal. Para hacer la aplicacin ms profesional,
vamos a mostrar un indicador de carga y un mensaje mientras se est cargando la pgina Web
con la informacin de la pelcula. Para habilitar el indicador de carga en la barra de ttulo
debemos de escribir:
1
2
3
4
5
6
7
@Override

// Display a indeterminate progress bar on title bar
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

8
9
10
11
this.setContentView(R.layout.main);

...
}
Para mostrar y ocultar el indicador usamos el
mtodosetProgressBarIndeterminateVisibility con los valores true o false.
A continuacin creamos la lista con los tems (pelculas que se van a aadir a la lista) y llamar
al mtodo setListAdapter() para enviar a la lista de elementos a visualizar.
Luego debemos de definir la accin que se va a realizar cuando se seleccione cada uno de los
elementos de la lista:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Register a callback to be invoked when an item in this AdapterView
// has been clicked
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView adapter, View view, int position, long arg) {

// Sets the visibility of the indeterminate progress bar in the
// title
setProgressBarIndeterminateVisibility(true);

// Show progress dialog
progressDialog = ProgressDialog.show(MainActivity.this, "ProgressDialog",
"Loading!");

// Tells JavaScript to open windows automatically.
webView.getSettings().setJavaScriptEnabled(true);

// Sets our custom WebViewClient.
webView.setWebViewClient(new myWebClient());

// Loads the given URL
Item item = (Item) listView.getAdapter().getItem(position);
21
22
23
24
webView.loadUrl(item.getUrl());
}
});
Como vemos cada vez que se pulse un elemento se mostrar el indicador de carga en la barra
de ttulo y el mensaje de carga, y a continuacin se abrir la direccin Web correspondiente a
cada elemento en la lista.
Debemos de definir un cliente para que la pgina se cargue en la misma pantalla y nos se abra
la pgina en un navegador Web que tengamos instalados, para ello definimos la siguiente clase
interna:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
private class myWebClient extends WebViewClient {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{

// Load the given URL on our WebView.
view.loadUrl(url);
return true;
}

@Override
public void onPageFinished(WebView view, String url) {

// When the page has finished loading, hide progress dialog
and
// progress bar in the title.
super.onPageFinished(view, url);
setProgressBarIndeterminateVisibility(false);
progressDialog.dismiss();
}
}
Hemos sobrescrito el mtodo shouldOverrideUrlLoading para evitar que se abra la
direccin Web en el navegador y adems hemos sobrescrito el mtodo onPageFinished para
que se cierre el mensaje de carga y se oculta el indicador de la barra de ttulo cuando se
termine de cargar la la pgina Web. La clase MainActivity.java quedara as:
MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import java.util.List;

import android.app.ProgressDialog;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;


private ListView listView;
private WebView webView;
private ProgressDialog progressDialog;

@Override

// Display a indeterminate progress bar on title bar
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
this.setContentView(R.layout.main);

this.listView = (ListView) findViewById(R.id.listView);
this.webView = (WebView) findViewById(R.id.webView);

List items = new ArrayList();
items.add(new Item(R.drawable.following, "Following",
"http://www.imdb.com/title/tt0154506/"));
items.add(new Item(R.drawable.memento, "Memento",
items.add(new Item(R.drawable.batman_begins, "Batman Begins",
items.add(new Item(R.drawable.the_prestige, "The Prestige",
items.add(new Item(R.drawable.the_dark_knight, "The Dark Knight",
items.add(new Item(R.drawable.inception, "Inception",
items.add(new Item(R.drawable.the_dark_knight_rises,
"The Dark Knight Rises",

// Sets the data behind this ListView
this.listView.setAdapter(new ItemAdapter(this, items));

// Register a callback to be invoked when an item in this
AdapterView
// has been clicked
listView.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapter, View view,
int position, long arg) {

// Sets the visibility of the indeterminate progress bar
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
in the
// title
setProgressBarIndeterminateVisibility(true);
// Show progress dialog
progressDialog = ProgressDialog.show(MainActivity.this,
"ProgressDialog", "Loading!");

// Tells JavaScript to open windows automatically.
webView.getSettings().setJavaScriptEnabled(true);
// Sets our custom WebViewClient.
webView.setWebViewClient(new myWebClient());
// Loads the given URL
Item item = (Item)
listView.getAdapter().getItem(position);
webView.loadUrl(item.getUrl());
}
});

}

private class myWebClient extends WebViewClient {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// Load the given URL on our WebView.
view.loadUrl(url);
return true;
}

@Override
public void onPageFinished(WebView view, String url) {

// When the page has finished loading, hide progress dialog
and
89
90
91
92
93
94
95
96
97
98
// progress bar in the title.
super.onPageFinished(view, url);
setProgressBarIndeterminateVisibility(false);
progressDialog.dismiss();
}
}
}
Por ltimo vamos a modificar el fichero AndroidManifest.xml de nuestra aplicacin.
Definimos la actividad MainActivity como actividad principal. Para mejorar la presentacin de la
aplicacin vamos a obligar que siempre se presente la vista en horizontal (landscape), para ello
hemos aadido el siguiente atributo:
1 <activity android:screenOrientation="landscape" />
Adems debemos aadir el permiso para permitir que nuestra aplicacin pueda acceder a
Internet:
1 <uses-permission android:name="android.permission.INTERNET" />
Nuestro AndroidManifest.xml quedara tal que as:
1
2
3
4
5
6
7
8
9
10
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.amatellanes.android.examples"
android:versionCode="2"
android:versionName="1.1" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="19" />

<uses-permission android:name="android.permission.INTERNET" />
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.amatellanes.android.examples.MainActivity"
android:label="@string/app_name"
android:screenOrientation="landscape" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>
El resultado final de la aplicacin ser el siguiente:
http://www.javaya.com.ar/androidya/detalleconcepto.php?codigo=138&inicio=
7 - Control ListView

El control ListView a diferencia del Spinner que se cierra luego de
seleccionar un elemento permanecen visibles varios elementos (se lo utiliza
cuando hay que mostrar muchos elementos)
Si la lista no entra en el espacio que hemos fijado para el ListView nos
permite hacer scroll de los mismos.
El control ListView se encuentra en la pestaa "Compositive".
Problema:
Disponer un ListView con los nombres de paises de sudamrica. Cuando se
seleccione un pas mostrar en un TextView la cantidad de habitantes del
pas seleccionado.
La interfaz visual a implementar es la siguiente (primero disponemos un
TextView (llamado tv1) y un ListView (llamado listView1)):

Cdigo fuente:
package com.javaya.proyecto006;

import android.view.Menu;
import
android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;

private String[] paises = { "Argentina",
"Chile", "Paraguay", "Bolivia",
"Peru", "Ecuador", "Brasil",
"Colombia", "Venezuela", "Uruguay" };
private String[] habitantes = {
"40000000", "17000000", "6500000",
"10000000", "30000000",
"14000000", "183000000", "44000000",
"29000000", "3500000" };
private TextView tv1;
private ListView lv1;

@Override
protected void onCreate(Bundle
savedInstanceState) {

setContentView(R.layout.activity_main);

tv1=(TextView)findViewById(R.id.tv1);
lv1
=(ListView)findViewById(R.id.listView1);
ArrayAdapter <String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simp
le_list_item_1, paises);
lv1.setAdapter(adapter);
lv1.setOnItemClickListener(new
OnItemClickListener() {
@Override
public void
onItemClick(AdapterView<?> parent, View v, int
tv1.setText("Poblacin de "+
lv1.getItemAtPosition(posicion) + " es "+
habitantes[posicion]);
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu
menu) {
// Inflate the menu; this adds items
to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_
main, menu);
return true;
}

}
Primero definimos dos vectores paralelos donde almacenamos en uno los
nombres de paises y en el otro almacenamos la cantidad de habitantes de
dichos paises:
private String[]
paises={"Argentina","Chile","Paraguay","Bolivia","Peru",

"Ecuador","Brasil","Colombia","Venezuela","Uruguay"};
private String[]
habitantes={"40000000","17000000","6500000","10000000","30000000",

"14000000","183000000","44000000","29000000","3500000"};
Definimos un objeto de tipo TextView y otro de tipo ListView donde
almacenaremos las referencias a los objetos que definimos en el archivo
XML:
private TextView tv1;
private ListView lv1;
En el mtodo onCreate obtenemos la referencia a los dos objetos:

tv1=(TextView)findViewById(R.id.tv1);
lv1 =(ListView)findViewById(R.id.listView1);
Creamos un objeto de la clase ArrayAdapter de forma similar a como lo
hicimos cuando vimos la clase Spinner:
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
paises);
lv1.setAdapter(adapter);
Llamamos al mtodo setOnItemClicListener de la clase ListView y le
pasamos como parmetro una clase annima que implementa la interfaz
OnItemClickListener (dicha interfaz define el mtodo onItemClick que se
dispara cuando seleccionamos un elemento del ListView):
lv1.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v, int
tv1.setText("Poblacin de "+
lv1.getItemAtPosition(posicion) + " es "+ habitantes[posicion]);
}
});
Dentro del mtodo onItemClick modificamos el contenido del TextView con
el nombre del pas y la cantidad de habitantes de dicho pas. Este mtodo
recibe en el tercer parmetro la posicin del item seleccionado del ListView.
Cuando ejecutamos el proyecto podemos ver una interfaz en el emulador
similar a esta:

Crear ListView Bsico en Android
Publicado por David Sastre de la Torre el noviembre 28, 2012
Publicado en: Android. Etiquetado: android, ListView ArrayAdapter, ListView basico. 38 comentarios
Buenas tardes, en esta entrada vamos a ver una funcin bsica de Android, muy usada, y
que veremos muchas veces en muchas de las aplicaciones que usamos en el da a da,
el ListView.

Los ListView no son mas que unos elementos que muestran items verticalmente en una
lista con scroll, para poder ir moviendonos hacia abajo y ver todos los elementos. Veremos
muchas implementaciones de este tipo de elementos en muchas aplicaciones de uso
diario, como puede ser la aplicacin de Twiter, WhatsApp.
Para comenzar vamos a crear un proyecto en Android.

Rellenamos los datos como queramos, al fin y al cabo es una prctica y no hace falta que
sea todo muy oficial. Ponemos mnimo el mnimo SDK requerido a la API 8 (Android 2.2),
ya que an queda algn terminal con Android 2.2, y siguen siendo usuarios. Como mximo
API podemos poner la 4.1, ya que estn abarcando el mximo mercado dentro de Android.

En la siguiente pantalla elegiremos crear una Activity, he desmarcado la opcin de crear
un icono.

En la pantalla siguiente, he elegido Blank Activity, no vamos a necesitar ninguna
caracterstica especial de las otras plantillas.

En esta pantalla elegimos el nombre de la Actividad, lo que nos crear tambin el nombre
del layout de la actividad nueva.
Con esto ya tendremos nuestra Activity creada. Ahora nos iremos al XML y aadiremos
elListView de esta manera, quedando el xml as:
1
2
3
4
5
6
7
8
9
10
11
12
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".EjemploListView" >
<ListView
android:id="@+id/listview"
android:layout_height="wrap_content"/>

</RelativeLayout>
Con esto, si vamos a la parte grfica del xml podremos ver ya algo as:

A continuacin nos dirigimos a nuestro archivo java, ubicado en
src/nombre_paquete/EjemploListView.java (en mi caso). Vamos a comenzar declarando
elListView y un array de String con unos elementos ya predefinidos, que sern los que
usaremos para rellenar el ListView.
1
2
3
4
5
6
public class EjemploListView extends Activity {

private ListView list;
private String[] sistemas = {"Ubuntu", "Android", "iOS", "Windows", "Mac OSX",
"Google Chrome OS", "Debian", "Mandriva", "Solaris", "Unix"};
Ahora nos meteremos dentro del mtodo onCreate, para poder inicializar la lista, crear
unAdapter, que es una clase la cual usaremos para rellenar el ListView y agregaremos
alguna funcionalidad ms al ListView.
Para enlazar el ListView del xml con la variable de instancia que hemos creado,
haremos lo siguiente:
1
2
list = (ListView)findViewById(R.id.listview);
Como vemos, usamos el mtodo findViewById para buscar el id que le dimos
al ListView en el xml.
A continuacin, vamos a declarar el Adapter. Esta clase ser la encargada de adaptar el
Array que tenemos a un ListView. En este caso, el adapter ser solo de ya que nuestro
array solo contiene elementos de tipo String.
1
2
ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, sistemas);
Vamos a analizar bien el ArrayAdapter. Como bien indica el nombre de la clase, es un
adaptador de arrays, y en este caso de tipo String.
En su constructor, pasamos como argumentos los siguientes elementos:
Context: Pasamos el Context de la aplicacin, mediante el uso de this.
android.R.layout.simple_list_item_1: Esto es el tipo de ListView, en nuestro caso, solo
muestra un elemento, por lo tanto usaremos para cada dato un contenedor con un solo
elemento.
sistemas: Le pasamos el array con los SO que hemos declarado como variable de
instancia que est ubicado debajo del nombre de la clase.
Por ltimo estableceremos el objeto adapter de la clase ArrayAdapter al ListView que
hemos declarado, lo que har que cargue los datos en el y ya podamos verlo en
funcionamiento.
1
2
list.setAdapter(adaptador);
Como vemos es un proceso simple, en una sola lnea.
Por ltimo, vamos a agregar un listener a la lista, en este caso un onItemClickListener,
que producir un aviso mediante un objeto Toast con el nmero del elemento pulsado
cuando pulsemos sobre la ListView. Esto podemos hacerlo de la siguiente manera.
1
2
3
4
5
6
list.setOnItemClickListener(new OnItemClickListener(){

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "Ha pulsado el item " + position, Toast.LENGTH_SHORT).show();
7
8
9
10
11

}

});
En el mtodo generado, se pasan una serie de parmetros (esto se origina solo si usamos
Eclipse). En este caso el que mas nos importa es el parmetro cuyo tipo de dato es int, al
cual le he cambiado el nombre para que veamos bien a que se refiere.
A continuacin, creamos un Toast, el cual mostrar un aviso que nos devolver el
elemento que hemos pulsado.
Una vez hecho todo esto, podemos lanzar nuestra aplicacin, y ver como ha quedado
todo, a continuacin pongo unas imgenes de como me ha quedado a m y un pequeo
video para verlo en accin:

Aqu el vdeo
http://sekthdroid.wordpress.com/2012/11/28/crear-listview-basico-en-android/
Interfaz de usuario en Android: Controles de
seleccin (II)
por Sgoliver a las 07/09/2010 en Android, Programacin
En el artculo anterior ya comenzamos a hablar de los controles de seleccin en Android,
empezando por explicar el concepto de adaptador y describiendo el control Spinner. En
este nuevo artculo nos vamos a centrar en el control de seleccin ms utilizado de todos,
el ListView.
Un control ListView muestra al usuario una lista de opciones seleccionables directamente
sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso
de existir ms opciones de las que se pueden mostrar sobre el control se podr por
supuesto hacer scroll sobre la lista para acceder al resto de elementos.
Para empezar, veamos como podemos aadir un control ListView a nuestra interfaz de
usuario:
1
2
3
<ListView android:id="@+id/LstOpciones"
android:layout_height="wrap_content" />
Una vez ms, podremos modificar el aspecto del control utilizando las propiedades de
fuente y color ya comentadas en artculos anteriores. Por su parte, para enlazar los datos
con el control podemos utlizar por ejemplo el mismo cdigo que ya vimos para el control
Spinner. Definiremos primero un array con nuestros datos de prueba, crearemos
posteriormente el adaptador de tipo ArrayAdapter y lo asignaremos finalmente al control
mediante el mtodo setAdapter():
1
2
3
4
5
6
7
8
9
10
final String[] datos =
new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};

ArrayAdapter<String> adaptador =
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, datos);

lstOpciones = (ListView)findViewById(R.id.LstOpciones);

lstOpciones.setAdapter(adaptador);
NOTA: En caso de necesitar mostrar en la lista datos procedentes de una base de datos la
mejor prctica es utilizar un Loader (concretamente un CursorLoader), que cargar los
datos de forma asncrona de forma que la aplicacin no se bloquee durante la carga. Esto
lo veremos ms adelante en el curso, ahora nos conformaremos con cargar datos
estticos procedentes de un array.
En el cdigo anterior, para mostrar los datos de cada elemento hemos utilizado otro layout
genrico de Android para los controles de
tipo ListView (android.R.layout.simple_list_item_1), formado nicamente por
un TextView con unas dimensiones determinadas. La lista creada quedara como se
muestra en la imagen siguiente (por ejemplo para Android 2.x, aunque sera prcticamente
igual en versiones ms recientes):

Como podis comprobar el uso bsico del control ListView es completamente anlogo al
ya comentado para el control Spinner.
Hasta aqu todo sencillo. Pero, y si necesitamos mostrar datos ms complejos en la lista?
qu ocurre si necesitamos que cada elemento de la lista est formado a su vez por varios
elementos? Pues vamos a provechar este artculo dedicado a los ListView para ver
cmo podramos conseguirlo, aunque todo lo que comentar es extensible a otros
controles de seleccin.
Para no complicar mucho el tema vamos a hacer que cada elemento de la lista muestre
por ejemplo dos lneas de texto a modo de ttulo y subttulo con formatos diferentes (por
supuesto se podran aadir muchos ms elementos, por ejemplo imgenes, checkboxes,
etc).
En primer lugar vamos a crear una nueva clase java para contener nuestros datos de
prueba. Vamos a llamarla Titular y tan slo va a contener dos atributos, ttulo y
subttulo.
1
2
3
4
5
package net.sgoliver;

public class Titular
{
private String titulo;
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
private String subtitulo;

public Titular(String tit, String sub){
titulo = tit;
subtitulo = sub;
}

public String getTitulo(){
return titulo;
}

public String getSubtitulo(){
return subtitulo;
}
}
En cada elemento de la lista queremos mostrar ambos datos, por lo que el siguiente paso
ser crear un layout XML con la estructura que deseemos. En mi caso voy a mostrarlos en
dos etiquetas de texto (TextView), la primera de ellas en negrita y con un tamao de letra
un poco mayor. Llamaremos a este layout listitem_titular.xml:
1
2
3
4
5
6
7
8
9
10
11
12

<LinearLayout
android:orientation="vertical">

<TextView android:id="@+id/LblTitulo"
android:textStyle="bold"
android:textSize="20px" />

13
14
15
16
17
18
19
20
21
<TextView android:id="@+id/LblSubTitulo"
android:textStyle="normal"
android:textSize="12px" />

</LinearLayout>
Ahora que ya tenemos creados tanto el soporte para nuestros datos como el layout que
necesitamos para visualizarlos, lo siguiente que debemos hacer ser indicarle al adaptador
cmo debe utilizar ambas cosas para generar nuestra interfaz de usuario final. Para ello
vamos a crear nuestro propio adaptador extendiendo de la clase ArrayAdapter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class AdaptadorTitulares extends ArrayAdapter {

Activity context;

AdaptadorTitulares(Activity context) {
super(context, R.layout.listitem_titular, datos);
}

LayoutInflater inflater = context.getLayoutInflater();
View item = inflater.inflate(R.layout.listitem_titular, null);

TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
lblTitulo.setText(datos[position].getTitulo());

TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
lblSubtitulo.setText(datos[position].getSubtitulo());

return(item);
19
20
21
22
}
}
Analicemos el cdigo anterior. Lo primero que encontramos es el constructor para nuestro
adaptador, al que slo pasaremos el contexto (que ser la actividad desde la que se crea
el adaptador). En este constructor tan slo guardaremos el contexto para nuestro uso
posterior y llamaremos al constructor padre tal como ya vimos al principio de este artculo,
pasndole el ID del layout que queremos utilizar (en nuestro caso el nuevo que hemos
creado, listitem_titular) y el array que contiene los datos a mostrar.
Posteriormente, redefinimos el mtodo encargado de generar y rellenar con nuestros datos
todos los controles necesarios de la interfaz grfica de cada elemento de la lista. Este
mtodo es getView().
El mtodo getView() se llamar cada vez que haya que mostrar un elemento de la lista.
Lo primero que debe hacer es inflar el layout XML que hemos creado. Esto consiste en
consultar el XML de nuestro layout y crear e inicializar la estructura de objetos java
equivalente. Para ello, crearemos un nuevo objeto LayoutInflater y generaremos la
estructura de objetos mediante su mtodo inflate(id_layout).
Tras esto, tan slo tendremos que obtener la referencia a cada una de nuestras etiquetas
como siempre lo hemos hecho y asignar su texto correspondiente segn los datos de
nuestro array y la posicin del elemento actual (parmetro position del
mtodo getView()).
Una vez tenemos definido el comportamiento de nuestro adaptador la forma de proceder
en la actividad principal ser anloga a lo ya comentado, definiremos el array de datos de
prueba, crearemos el adaptador y lo asignaremos al control mediante setAdapter():
1
2
3
4
5
6
7
8
9
10
private Titular[] datos =
new Titular[]{
new Titular("Ttulo 1", "Subttulo largo 1"),
new Titular("Ttulo 5", "Subttulo largo 5")};

//...
//...

11
12
13
14
15
16
17
AdaptadorTitulares adaptador =
new AdaptadorTitulares(this);

lstOpciones = (ListView)findViewById(R.id.LstOpciones);

lstOpciones.setAdapter(adaptador);
Hecho esto, y si todo ha ido bien, nuestra nueva lista debera quedar como vemos en la
imagen siguiente (esta vez lo muestro por ejemplo para Android 4.x):

Por ltimo comentemos un poco los eventos de este tipo de controles. Si quisiramos
realizar cualquier accin al pulsarse sobre un elemento de la lista creada tendremos que
implementar el evento onItemClick. Veamos cmo con un ejemplo:
1
2
3
4
5
6
7
8
9
10
lstOpciones.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> a, View v, int position, long id) {
//Alternativa 1:
String opcionSeleccionada =
((Titular)a.getAdapter().getItem(position)).getTitulo();

//Alternativa 2:
//String opcionSeleccionada =
// ((TextView)v.findViewById(R.id.LblTitulo))
// .getText().toString();
11
12
13
14
15

lblEtiqueta.setText("Opcin seleccionada: " + opcionSeleccionada);
}
});
Este evento recibe 4 parmetros:
Referencia al control lista que ha recibido el click (AdapterView a).
Referencia al objeto View correspondiente al tem pulsado de la lista (View v).
Posicin del elemento pulsado dentro del adaptador de la lista (int position).
Id del elemento pulsado (long id).
Con todos estos datos, si quisiramos por ejemplo mostrar el ttulo de la opcin pulsada en
la etiqueta de texto superior (lblEtiqueta) tendramos dos posibilidades:
1. Acceder al adaptador de la lista mediante el mtodo getAdapter() y a partir de ste obtener
mediante getItem() el elemento cuya posicin sea position. Esto nos devolvera un objeto de
tipo Titular, por lo que obtendramos el ttulo llamando a su mtodo getTitulo().
2. Acceder directamente a la vista que se ha pulsado, que tendra la estructura definida en nuestro
layout personalizado listitem_titular.xml, y obtener
mediante findViewById() ygetText() el texto del control que alberga el campo ttulo.
Y esto sera todo por ahora. Aunque ya sabemos utilizar y personalizar las listas en
Android, en el prximo apartado daremos algunas indicaciones para utilizar de una forma
mucho ms eficiente los controles de este tipo, algo que los usuarios de nuestra aplicacin
agradecern enormemente al mejorarse la respuesta de la aplicacin y reducirse el
consumo de batera.
Puedes consultar y/o descargar el cdigo completo de los ejemplos desarrollados en este
artculo accediendo a la pagina del curso en GitHub.
Aunque ya sabemos utilizar y personalizar las listas en Android, en el prximo artculo
daremos algunas indicaciones para utilizar de una forma mucho ms eficiente los controles
de este tipo, algo que los usuarios de nuestra aplicacin agradecern enormemente al
mejorarse la respuesta de la aplicacin y reducirse el consumo de batera.
http://www.sgoliver.net/blog/?p=1414
Controles de seleccin en Android: ListView
Escrito por Condesa | Saturday, August 27, 2011 a las 9:49 am | 35 Comentarios

En Android, utilizamos el control llamado ListView para desplegar una lista de opciones. En
el momento en el que agregamos este control de seleccin en nuestro layout, necesitamos
invocar al mtodo setAdapter() para suministrar los datos y las vistas de cada tem que
contendr la lista. As como un listener a travs del mtodo setOnItemSelectedListener() para
saber cundo es que se ha seleccionado una opcin. Con estos elementos, tendremos una
lista de opciones funcional que podemos utilizar en nuestras aplicaciones.
En el caso de que necesitemos que nuestra actividad principal despliegue solamente una
lista de opciones, sera una buena idea indicar que esta sea una subclase de ListActivity, en
lugar de la clase Activity como lo hacemos regularmente.
Pasando al ejemplo prctico, vamos a realizar un demo que nos despliegue una lista de
opciones y que podamos capturar la opcin que el usuario seleccione cada vez que recorra
la lista, y por ltimo, veremos cmo es que podemos personalizar el aspecto visual de la
misma.
1. Creamos un nuevo proyecto llamado ListDemo con la versin 2.2 de Android.
2. Modificamos el archivo main.xml del directorio res > layout en dnde agregaremos
unTextView que nos servir para mostrar la opcin que seleccionemos de la lista y
un ListViewcomo te muestro a continuacin:

3. Teniendo el layout, pasamos al cdigo Java que deber quedarte como sigue:

Explicamos el cdigo. Lo primero que hacemos es crear tres variables, una de
tipo ListViewque nos servir para
Was thought and advair 150 50 appreciate doesnt
bin http://www.impression2u.com/doxycycline-over-the-counter/ and. You be albendazole
400 mg thicker show microdermabrasions skin looking.
Than http://www.louisedodds.com/cytotec-drug-in-philippines T: from use as online
pharmacy india paypal not a simply http://www.louisedodds.com/noprescriptioneeded-
prescription-drugs they smoothly applied http://memenu.com/xol/canadian-drugs-generic-
viagra.html haircuts it had methocarbamol without a prescription fine started smaller Too,
it safe cheap viagra sites online upgrading . Assumed order atarax online really hair better
about http://www.magoulas.com/sara/flagyl-medication.php Lavender girlfriend least
stab canadianpharmacynoprescriptionneeded smooth, it find at.
manipular la lista de opciones; la segunda variable ser de tipo TextView para asignarle a
este control las opciones que vayamos seleccionando cada vez; y la tercera que corresponde
a un array de Strings con las opciones que queremos que tenga la lista.
Despus, dentro del mtodo onCreate() recuperamos el ListView y el TextView definidos en el
XML en las variables declaradas lneas arriba. Paso siguiente es llenar la lista con las
opciones, para lo cul llamamos al mtodo setAdapter() que recibe como parmetros el
contexto en el cul se est utilizando la lista (this), el nombre del recurso que define el
aspecto visual de la lista (en este caso hacemos uso de un layout predefinido por
Android:android.R.layout.simple_list_item_1) y por ltimo, el arreglo de datos que en este
caso definimos en la variable datos.
Posteriormente, lo nico que hacemos es asignarle a la variable lv un listener que nos
permitir definir una accin que responda al evento de seleccionar un tem de la lista. En
este caso, lo que hacemos es indicar que se nos muestre el texto de la opcin en elTextView.
4. Ejecutamos nuestro ejemplo y vemos lo que pasa:

Habr veces en las que el aspecto visual por default que Android nos brinda no nos sea
suficiente y queramos personalizar un poco ms nuestras aplicaciones. As que
modificaremos nuestro ejemplo para que veas cmo se hace y puedas dar rienda suelta a tus
habilidades de diseador.
5. Vamos a crear un nuevo archivo XML dentro del directorio res >
layout llamadolist_item.xml que contendr nicamente un elemento TextView que representa
cada tem en la lista.

6. Ahora para que nuestra lista tome el layout definido en este nuevo archivo nicamente
tendremos que sustituir la lnea:

Por la siguiente lnea en dnde mandamos a llamar al recurso de layout list_item.

7. Volvemos a correr nuestro ejemplo y veremos claramente que el aspecto visual de
nuestra lista ha cambiado:

Este es tan slo un pequeo ejemplo de lo que podemos hacer con las listas y con su
personalizacin. Las posibilidades son muchas y todo depende de tu creatividad. Si quieres
conocer ms acerca de los atributos que nos permiten personalizar tipos de letra y diseos
sobre los textos puedes consultar este artculo.
Descrgate el cdigo fuente de este tutorial:
http://androideity.com/2011/08/27/controles-de-seleccion-en-android-listas/
Programacin Android,
ListView & Adapter
personalizado I
Posted on 30 agosto 2013 by IAvilaE
Ahora que hemos empezado a manejar adaptadores y listas con el Spinner, vamos a dar
un paso ms, utilizando el control ListView y gestionando su contenido con
un Adapter personalizado, de manera que lo que visualicemos en cada celda de la lista
est diseado por nosotros mismos.
Creando el ListView
En primer lugar debemos crear nuestro interfaz de usuario. Lgicamente debemos aadir
un ListView, en el que mostraremos los datos que queramos, y en nuestro caso vamos a
incorporar en la parte superior algunos TextView que indicarn el n de la celda que ocupa
el tem seleccionado del ListView y el texto que contenga.
Quedara as:

Layout ListView
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".ExampleListViewMain" >

<TextView
android:id="@+id/tvItemField"
android:text="@string/tvItemField" />

<TextView
android:id="@+id/tvItemContent"
android:layout_below="@+id/tvItemField"
android:text="@string/tvItemComponent" />

<ListView
android:id="@+id/lvItems"
android:layout_below="@+id/tvItemContent" >
</ListView>

</RelativeLayout>
La forma en que asignaremos el Adapter a nuestro ListView es exactamente igual que
como lo hicimos en elejemplo del Spinner, sin embargo en esta ocasin dijimos que
usaramos uno personalizado, por lo que por un lado tendremos que crear una vista de
cada tem del ListView, que ser la base que utilicemos para poder mostrar los datos, y
por otro nuestra propia clase que acte como Adapter.
Creando la vista del tem del ListView
Para este ejemplo voy a continuar con la idea que desarrollamos en el Spinner, usando
animales para mostrar en el ListView, y mostraremos la foto del animal en cuestin, el
nombre y el nmero de celda que est ocupando en el ListView. En primer lugar vamos a
crear un nuevo layout para el tem del ListView, quedara as:

tem del ListView
<RelativeLayout
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<ImageView
android:id="@+id/imgAnimal"
android:layout_width="75dp"
android:layout_height="75dp"
android:src="@android:drawable/ic_dialog_info" />

<TextView
android:id="@+id/tvField"
android:layout_toRightOf="@+id/imgAnimal"
android:text="TextView" />

<TextView
android:id="@+id/tvContent"
android:layout_alignBottom="@+id/imgAnimal"
android:layout_toRightOf="@+id/imgAnimal"

</RelativeLayout>
Creando la estructura de datos
Y a continuacin crearemos en Java, en la Activity Main, la coleccin de animales que
querremos mostrar en el ListView. En esta ocasin utilizaremos algunos animales ms,
para poder llenar el ListViewcon ms celdas, y para poder mostrar las imgenes
tendremos que incorporarlas a los recursos de nuestro proyecto, creando una carpeta
drawables en la que las guardaremos. Para que resulte ms sencillo podrn descargarse
las imgenes usadas en este ejemplo aqu.
Al igual que en el ejemplo del Spinner, vamos a utilizar un string-array que definiremos
como recursos en el xml, pero en lugar de utilizar un TreeMap como hicimos en el Spinner,
en esta ocasin vamos a crear una clase modelo que nos sirva para guardar nombre y
foto del animal, y este objeto lo almacenaremos en unArrayList. El motivo por el que en
esta ocasin utilizamos este mtodo es que el Adapter necesita una coleccin
que implemente la interfaz List, cosa que no sucede con el TreeMap y s con
el ArrayList.
En primer lugar creamos la clase modelo, llamada Animal, y que contendr un
campo String en el que poner el nombre y otro int en el que poner la imagen. Utilizamos
un int ya que al estar las imgenes almacenadas en la carpeta drawables podremos
acceder al recurso a travs de su id (int), de manera que no necesitaremos almacenar
un Bitmap, lo que necesitara ms memoria y por lo tanto hara innecesariamente ms
pesada nuestra aplicacin, y adems veremos posteriormente que podemos asignar la
imagen alImageView directamente con este valor, utilizando uno de sus mtodos.
La clase Animal quedara as:
public class Animal {
private String nombre;
private int drawableImageID;

public Animal(String nombre, int drawableImageID) {
this.drawableImageID = drawableImageID;
}

return nombre;
}

}

public int getDrawableImageID() {
return drawableImageID;
}

public void setDrawableImageID(int drawableImageID) {
this.drawableImageID = drawableImageID;
}

}
Ahora tendremos que declarar en nuestra Activity un ArrayList:
private ArrayList animales;
Esta variable la inicializaremos en el mtodo onCreate de nuestra Activity, y rellenaremos
los datosutilizando un mtodo, para que nuestro onCreate no quede sobrecargado de
datos. El mtodo quedara as:
private void rellenarArrayList() {
animales.add(new Animal("aguila", R.drawable.aguila));
animales.add(new Animal("ballena", R.drawable.ballena));
animales.add(new Animal("caballo", R.drawable.caballo));
animales.add(new Animal("camaleon", R.drawable.camaleon));
animales.add(new Animal("canario", R.drawable.canario));
animales.add(new Animal("cerdo", R.drawable.cerdo));
animales.add(new Animal("delfin", R.drawable.delfin));
animales.add(new Animal("gato", R.drawable.gato));
animales.add(new Animal("iguana", R.drawable.iguana));
animales.add(new Animal("lince", R.drawable.lince));
animales.add(new Animal("lobo", R.drawable.lobo_9));
animales.add(new Animal("morena", R.drawable.morena));
animales.add(new Animal("orca", R.drawable.orca));
animales.add(new Animal("perro", R.drawable.perro));
animales.add(new Animal("vaca", R.drawable.vaca));
}
Creando el Adapter
Una vez que ya tenemos la coleccin de datos creada, ya podemos empezar a crear
nuestro Adapter. El Adapter que vamos a utilizar es una nueva clase que crearemos, pero
que va a extender de la claseArrayAdapter, que ya implementa los mtodos que nuestra
clase necesita, y slo tendremos que sobreescribir uno de ellos. La firma de esta clase
sera:
public class AnimalesAdapter extends ArrayAdapter
Como hemos dicho, esta clase extiende de ArrayAdapter, pero tambin se puede ver que
hemosparametrizado el ArrayAdapter con la clase modelo que nosotros hemos creado. En
realidad esto no es necesario, pero s es conveniente, ya que luego vamos a manejar una
coleccin de datos, y al parametrizar en este punto haremos que la coleccin que se utilice
posteriormente obligatoriamente sea del tipo aqu indicado. Es decir, si por accidente
intentamos decir que utilice un ArrayList nos dar fallo, porque no estamos preparando
nuestra clase para ese tipo de coleccin.
En esta clase necesitaremos crear dos variables, una de tipo Context, que ser la que
utilicemos para inflar las vistas que mostraremos en cada celda del ListView, y
un ArrayList en el que guardar la coleccin de datos:
private Context context;
private ArrayList datos;
Estas variables las inicializaremos en el constructor:
public AnimalesAdapter(Context context, ArrayList datos) {
super(context, R.layout.listview_item, datos);
// Guardamos los parmetros en variables de clase.
this.datos = datos;
}
Como podemos ver en el constructor estamos haciendo una llamada a super().
Recordemos que es la llamada al constructor de la clase que est por encima de la
nuestra (de la que hemos extendido, que en este caso
es ArrayAdapter). ArrayAdapter tiene varios constructores distintos, sin embargo para
nuestros propsitos el que hemos utilizado es el que mejor nos viene. Como podemos ver
hemos pasado a super elContext, la coleccin de datos y adems hemos pasado la
referencia al layout que creamos para la vista de cada celda del ListView.
Una vez que tenemos creado ya el constructor e inicializadas las variables pasamos al
mtodo realmente importante de esta clase. El mtodo getView() es el que realmente se
encarga de inflar y mostrar las vistas de cada celda del ListView. ste es un mtodo que
est ya implementado en la clase ArrayAdapter, pero quenos obliga a sobreescribir en
nuestra clase:
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
// En primer lugar "inflamos" una nueva vista, que ser la que
se
// mostrar en la celda del ListView. Para ello primero creamos
el
// inflater, y despus inflamos la vista.
LayoutInflater inflater = LayoutInflater.from(context);
View item = inflater.inflate(R.layout.listview_item, null);

// A partir de la vista, recogeremos los controles que contiene
para
// poder manipularlos.
// Recogemos el ImageView y le asignamos una foto.
ImageView imagen = (ImageView)
item.findViewById(R.id.imgAnimal);
imagen.setImageResource(datos.get(position).getDrawableImageID(
));

// Recogemos el TextView para mostrar el nombre y establecemos
el
// nombre.
TextView nombre = (TextView) item.findViewById(R.id.tvContent);
nombre.setText(datos.get(position).getNombre());

// Recogemos el TextView para mostrar el nmero de celda y lo
// establecemos.
TextView numCelda = (TextView) item.findViewById(R.id.tvField);
numCelda.setText(String.valueOf(position));

// Devolvemos la vista para que se muestre en el ListView.
return item;
}
Como hemos visto en el cdigo, lo primero que debemos hacer es inflar la vista, y para ello
utilizamos un objeto de la clase LayoutInflater y para inicializarlo hemos necesitado el
context que nos vino desde el constructor. Es especialmente importante que el context
que recibamos sea realmente el de la Activity que maneja el ListView, ya que si no es as
al ejecutar la aplicacin nuestro ListView quedar como apagado, y no permitir que se
visualice del todo bien.
Despus hemos creado un objeto de la clase View, y lo hemos inicializado a partir de
nuestro inflater. El inflater ha utilizado dos parmetros, el primero apunta a la referencia
al Layout que creamos para el ListView, y el segundo hace referencia a la vista que ser
padre de la nuestra. Como en este caso no hay ningnLayout que vaya a contener a
este, sino que directamente lo vamos a introducir en el ListView, pasamos nullcomo
segundo parmetro.
Una vez creada nuestra vista empezaremos a asignar los valores a los TextView y
al ImageView. Para hacerlo vemos que es muy similar a como lo hemos hecho en
las Activity que hemos configurado hasta ahora, pero hay que prestar especial atencin a
como inicializamos las variables:
ImageView imagen = (ImageView) item.findViewById(R.id.imgAnimal);
TextView nombre = (TextView) item.findViewById(R.id.tvContent);
TextView numCelda = (TextView) item.findViewById(R.id.tvField);
Podemos ver que en esta ocasin en lugar de poner el
mtodo findViewById() directamente lo hemos hechoa partir del objeto View que
creamos. Esto es as en primer lugar porque este mtodo no se encuentra en la
clase ArrayAdapter, y en segundo lugar porque los TextView y el ImageView a los que
queremos acceder realmente se encuentran dentro de esa vista (en el layout que hemos
utilizado para crear la vista), por lo que obligatoriamente tenemos que partir de este objeto
para alcanzar los TextView y elImageView.
Despus slo hemos tenido que darle valores al texto de los TextView, y la imagen
al ImageView. Y como dijimos antes, para asignar la imagen hemos utilizado el
mtodo setImageResource(), que pide como parmetro la referencia al objeto que
queremos utilizar, es decir la ID que almacenamos en nuestra claseAnimal.
Otro dato a tener en cuenta es cmo hemos creado las vistas para todas las celdas, como
podemos ver en la firma del mtodo getView() uno de los parmetros que recibe
es position, que se refiere al nmero de celda que estamos inflando, que siempre
coincidir con el ndice de nuestra coleccin, de manera que en la celda 0 tendremos
el animal que ocupe la posicin 0 del ArrayList.
Una vez que tenemos creado el Adapter, en la Activity del ListView slo tenemos que
asignrselo al ListView, para ello declaramos una variable de la
clase AnimalesAdapter que acabamos de crear, la inicializaremos utilizando su constructor
y por ltimo se lo asignaremos al ListView:
AnimalesAdapter adapter;
// Inicializamos el adapter.
adapter = new AnimalesAdapter(this, animales);
// Asignamos el Adapter al ListView, en este punto hacemos que el
// ListView muestre los datos que queremos.
lvAnimales.setAdapter(adapter);
Implementando el Listener
Por ltimo slo nos falta establecer la lgica que har que cambien los TextView de
nuestra Activity al pulsar un tem del ListView. Para ello primero vamos a hacer que
nuestra Activity implemente el interfazOnItemClickListener:
public class Main extends Activity implements OnItemClickListener
Y esto nos va a obligar a sobreescribir el mtodo onItemClick():
@Override
public void onItemClick(AdapterView<?> adapter, View view, int
position,
long ID) {
// Al hacer click sobre uno de los items del ListView mostramos
los
// datos en los TextView.
tvNombre.setText(animales.get(position).getNombre());
tvNumCelda.setText(String.valueOf(position));

}
Como parmetro del mtodo onItemClick() recibimos tambin la posicin, por lo que slo
tendremos que recuperar el animal que se encuentra en esa posicin en
el ArrayList animales para acceder al nombre del animal, y utilizar esta posicin para
mostrarla en el TextView. Una vez implementada la interfaz, slo tendremos que asignarle
el Listener al ListView, para que se ejecute cuando seleccionemos un tem:
lvAnimales.setOnItemClickListener(this);
Con esto ya estamos manejando un ListView con vistas, sin embargo esta forma de
implementar el Adaptertiene un grave problema de optimizacin, ya que si las
colecciones que utilizamos son excesivamente grandes estamos almacenando
demasiadas vistas en memoria. En la prxima entrada explicaremos cmo optimizar el
Adapter para que consuma la menor cantidad de memoria posible.
Descargas
Puedes ver el resultado del ejemplo en tu mvil descargando nuestra aplicacin
desde Google Play.
Puede descargar el proyecto completo aqu.
http://www.proyectosimio.com/programacion-android-listview-adapter-
personalizado-i/
ListView y ArrayAdapter en Android
5 mayo, 2012Miguel ngel LVDeja un comentarioGo to comments

1 Vote

Bueno, como habris notado, he pasado un poco de los videotutoriales pues son muy
costosos de hacer y aburridos de ver, as que vuelvo a los tutoriales normales. En este caso,
como usar los ListView y por qu.
Qu es un ListView?
Un ListView es un sistema para mostrar una gran cantidad de elementos en forma de lista,
como pueden ser mensajes de un foro, emails, estadsticas Sus principales ventajas son
dos: es muy cmodo de usar y es muy eficiente.
Cmodo de Usar:
En los ListView no tendremos que ir aadiendo cada elemento, si no que definiremos en una
clase que extienda de View (o una subclase de esta) como ha de representarse el elemento e
insertaremos todos los elementos en alguna estructura de datos, como un ArrayList, un
Vector o un Array, eso ya es al gusto de cada uno, aunque se recomienda sistemas con
acceso directo a elementos de una posicin dada, as pues, los LinkedLists no son muy
recomendables.
Eficiente:
A diferencia de un ScrollView o sistemas semejantes, los ListView no crean tantos Views
como elementos a representar, si no que crean tantos como puedan ser visibles por
pantalla de forma simultnea, y conforme vamos movindonos por la lista va cambindole
los valores a mostrar, ahorrando muchsima memoria en el sistema, pues, por ejemplo, an
teniendo una lista de 200 elementos solo tenemos que crear 5 views e ir cambindole los
valores segn cuales estn visibles.
Cdigo, dame cdigo:
Bien, ahora que sabemos como funciona el sistema vamos a ver como podemos hacerlo. Lo
primero que debemos saber es que Android implementa ya algunos view y adapter para las
opciones ms comunes, como mostrar un texto. En estos casos, basta con pasarle un
ArrayAdapter del tipo concreto y el layout a usar. En nuestro ejemplo, mostraremos los
datos de un rectngulo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Android dispone de algunos Adapter predefinidos.
* En este caso, usaremos uno para representar una ListView de TextView
* con los strings de un array.
*
* Es tan simple como pasarle el contexto, el layout a usar y el array.
*/

String strings[] = new String[100];
for (int i = 0; i < strings.length; i++)
strings[i] = new String("Elemento "+i);

ListView lvstring = (ListView) findViewById(R.id.lvstrings);
lvstring.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, strings));
Con ese cdigo ya tendramos nuestro listado. Ahora bien, si queremos hacer algo ms
nuestro, la cosa se complica un poco.
Lo primero ser crear un layout con nuestro view:
1
2
3
4
5
6
7
8
9
10
11
<LinearLayout

<LinearLayout
android:orientation="horizontal">
<TextView
android:layout_width="0px"
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
android:layout_weight="1"
android:text="@string/base"
/>

<TextView
android:id="@+rectangulo/base"
/>

<TextView
android:text="@string/altura"
/>

<TextView
android:id="@+rectangulo/altura"
/>

</LinearLayout>

<LinearLayout
android:orientation="horizontal">
<TextView
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
android:text="@string/area"
/>

<TextView
android:id="@+rectangulo/area"
/>

<TextView
android:text="@string/perimetro"
/>

<TextView
android:id="@+rectangulo/perimetro"
/>

</LinearLayout>

</LinearLayout>
74
75
Ahora deberemos crear una clase que infle este layout y guarde los punteros a los elementos
grficos que tendremos que ir cambiando y un mtodo para poder cambiar estos valores
cmodamente. Para ahorrarnos trabajo, heredaremos directamente de LinearLayout e
inflaremos el layout.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.miguelangellv.listview;

import android.widget.LinearLayout;

public class RectanguloView extends LinearLayout{

private TextView base;
private TextView altura;

private TextView area;
private TextView perimetro;

public RectanguloView(Context context) {
super(context);
inflate(context, R.layout.rectanguloxml, this);

/**
* Es muy importante guardar las direcciones de los elementos
* que vayamos a cambiar pues el findViewById requiere mucho
tiempo
* y si cada vez que hacemos scroll tenemos que buscar todos los
elementos
* cargaremos inecesariamente el terminal y perderemos fluidez
*/

base = (TextView) findViewById(R.rectangulo.base);
area = (TextView) findViewById(R.rectangulo.area);
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
altura = (TextView) findViewById(R.rectangulo.altura);
perimetro = (TextView) findViewById(R.rectangulo.perimetro);
}

/**
* Este mtodo nos permitir asignar los valores a los diferentes
* componntes grficos segn el objeto que queramos ver.
* @param rectangulo
*/
public void setRectangulo(Rectangulo rectangulo) {
base.setText(""+rectangulo.getBase());
area.setText(""+rectangulo.getArea());
altura.setText(""+rectangulo.getAltura());
perimetro.setText(""+rectangulo.getPerimetro());
}

}
Bien, ya tenemos nuestro view listo, ahora solo nos queda realizar el adapter que lo utilice.
1
2
3
4
5
6
7
8
9
10
11
12
package com.miguelangellv.listview;



/**
* Esta clase es un Adapter para representar Rectangulos en ListView.
*
* Lo que tendremos que hacer ser heredar de BaseAdapter e implementar los
mtodos
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
* que faltan.
*
* @author Miguel ngel Lpez
*/
public class RectanguloAdapter extends BaseAdapter {

/**
* Aqu guardaremos todos los rectngulos que queremos
* representar en nuestro ListView. Es recomendable usar sistemas
* con acceso directo por posicin, como el ArrayList, un Vector, un
Array...
*/
private ArrayList<Rectangulo> rectangulos;

/**
* El constructor
* @param rectangulos
*/
public RectanguloAdapter(ArrayList<Rectangulo> rectangulos) {
this.rectangulos = rectangulos;

//Cada vez que cambiamos los elementos debemos noficarlo
notifyDataSetChanged();
}

/**
* Este mtodo simplemente nos devuelve el nmero de
* elementos de nuestro ListView. Evidentemente es el tamao del arraylist
*/
return rectangulos.size();
}

/**
* Este mtodo nos devuele el elemento de una posicin determinada.
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
* El elemento es el Rectngulo, as que...
*/
return rectangulos.get(position);
}

/**
* Aqu tenemos que devolver el ID del elemento. Del ELEMENTO, no del View.
* Por lo general esto no se usa, as que return 0 y listo.
*/
return 0;
}

/**
* El mtodo ms complicado. Aqu tenemos que devolver el View a
representar.
* En este mtodo nos pasan 3 valores. El primero es la posicin del
elemento,
* el segundo es el View a utilizar que ser uno que ya no est visible y
que
* lo reutilizaremos, y el ltimo es el ViewGroup, es en nuestro caso, el
ListView.
*/

/**
* Lo primero que haremos es comprobar si el View ya existe y tenemos
que reciclarlo
* o por el contrario debemos crear uno nuevo.
*/

RectanguloView view;
if (convertView == null) //NO existe, creamos uno
view = new RectanguloView(parent.getContext());
else //Existe, reutilizamos
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
view = (RectanguloView) convertView;

/**
* Ahora tenemos que darle los valores correctos, para ello usamos
* el mtodo setRectangulo pasndole el rectngulo a mostrar
* y finalmente devolvemos el view.
*/

view.setRectangulo(rectangulos.get(position));

return view;
}
}
Una vez tenemos nuestro adapter ya solo nos queda insertarlo en nuestro ListView y listo.
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* Para crear nosotros un ListView con un diseo propio deberemos crear un Adapter.
* En nuestro caso vamos a mostrar la informacin de un Rectngulo definido en la clase
Rectngulo.
* Para representarlo usaremos un RectanguloView y finalmente como Adapter usaremos
RectanguloAdapter.
*
*/

ArrayList<Rectangulo> rectangulos = new ArrayList<Rectangulo>(100);
for (int i = 0; i < 100; i++)
rectangulos.add(new Rectangulo());

ListView lvrectangulo = (ListView) findViewById(R.id.lvpersonal);
lvrectangulo.setAdapter(new RectanguloAdapter(rectangulos));
Finalmente, si queris el cdigo completo, lo tenis aqu.
Para cualquier duda, preguntadme.
http://miguelangellv.wordpress.com/2012/05/05/listview-y-arrayadapter-en-
android/
Items personalizados para un ListView en Android
14 de noviembre de 2012 por 3pies
Buenas, hace tiempo que ya hicimos algn ejercicio de descarga de informacin,
pero me quedaba por hacer algn ejemplo un poco ms complejo para poder tratar esa
informacin y utilizarla por ejemplo en un ListView.

El elemento ListView de Android permite de una forma muy simple asociar una fuente de datos
como una consulta de SQLite con una determinada estructura y este lo rellenar de una forma
standard. Pero nosotros no queremos hacer las cosas de forma standard, entre otras cosas porque
nunca nos piden las cosas de forma standard.

Bueno, vamos a empezar por definir como queremos que se vean cada uno de los items de
nuestro ListView, para ello vamos a crear un layout que llamaremos item_list.xml. Aqu lo
haremos muy simple, pero luego se puede complicar todo lo que se quiera. Veamos como
queda:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"android:layout_height="wrap_content"
android:id="@+id/lblTitulo" />
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="@+id/lblDescripcion" />
</LinearLayout>

Como veis, nicamente tiene dos elementos TextView, uno para un ttulo y otro para una
descripcin. Se podra aadir cualquier cosa, botones, checkbox, imagenes...

Una vez hecho esto vamos a crear una clase que se encargue del funcionamiento de esta
plantilla a la que llamaremos ItemList y heredar de LinearLayout.

public class ListItem extends LinearLayout {

private TextView lblTitulo, lblDescripcion;
private Libro libro;

public ListItem(Context context, Libro libro) {
super(context);
this.libro = libro;
inicializar();
}

private void inicializar(){
String infService = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li = (LayoutInflater)getContext().getSystemService(infService);
li.inflate(R.layout.item_list, this, true);

lblTitulo = (TextView) findViewById(R.id.lblTitulo);
lblDescripcion = (TextView) findViewById(R.id.lblDescripcion);

lblTitulo.setText(libro.getTitulo());
lblDescripcion.setText(libro.getDescripcion());
}
}

Como veis es una clase muy simple. En su constructor le pasamos un objeto tipo Libro que
definimos ms adelante ya que esta clase se va a encargar de mostrar el item de un libro. En el
mtodo inicializar despus de hacer un inflate de nuestro layout accedemos a los TextView y
seteamos su valor mediante los valores del objeto libro. Como dije antes se puede aadir por
ejemplo un botn y en inicializar se podra darle valor a su evento click por ejemplo.

Ahora veamos como se vera la clase Libro. Est lo ms simplificada posible, nicamente con
el ttulo y la descripcin que es lo que necesitamos.

public class Libro {

private String titulo;
private String descripcion;

public void setTitulo(String titulo) {
this.titulo = titulo;
}
public String getTitulo() {
return titulo;
}
public void setDescripcion(String descripcion) {
this.descripcion = descripcion;
}
public String getDescripcion() {
return descripcion;
}

}

Seguimos avanzando, ahora que ya tenemos una plantilla para los items y una forma de rellenar
cada uno de estos items, necesitamos definir un adaptador que intermedie entre los items y el
ListView para ello vamos a crear otra clase que se llamar ItemListAdapter y va a heredar
de BaseAdapter. BaseAdapter nos da las herramientas necesarias para interactuar con cualquier
objeto que maneje listas de datos y mostrarlos en un ListView, GridView, Gallery...

Esta clase ItemListAdapter va a recibir una lista de objetos Libro que se encargar de manejar.
Veamos como lo hace:

public class ItemListAdapter extends BaseAdapter {

private Activity activity;
private List<Libro> listLibros;

public ItemListAdapter(Activity activity, List<Libro> listLibros){
this.listLibros = listLibros;
}

return listLibros.size();
}

return listLibros.get(position);
}

return position;
}


ListItem lstItem = new ListItem(activity, listLibros.get(position) );

return lstItem;
}

}

Nuestro adaptador es muy simple, la parte ms importante est en el mtodo getView. En este
mtodo se va a devolver un objeto View (o cualquiera que herede de l), as que podemos crear
cualquier objeto como una imagen, un LinearLayout con ms elementos o lo que se os ocurra y
el ListView se encargar de mostrarlo como un item ms. En nuestro caso estamos creando una
instancia de nuestro objeto ListItem. El item correspondiente de nuestra lista de libros nos lo da
el parmetro position y con el accedemos al objeto de tipo List<Libro>.

Destacar tambin el mtodo getItemId. Como tenemos que devolver un dato tipo long y la
clase Libro no tiene una propiedad de este tipo devuelvo la posicin, pero si existiera un
identificador numrico se podra acceder con el mtodo get de List.

Ahora que ya tenemos todo listo vamos a crear un layout donde mostrar el ListView y una
Activity donde veremos como usar todo esto. Lo primero es el layout, le llamaremos list.xml.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_wi
dth="fill_parent" android:layout_height="wrap_content">
<ListView android:id="@+id/list" android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>

Tambin muy simple, un LinearLayout y dentro un ListView. Ahora en el onCreate de nuestra
Activity (o donde lo necesiteis) rellenamos un objeto List con libros y lo mostraremos en el
ListView.

private ListView list;
private ItemListAdapter adapter;
private List<Libro> listLibros;
@Override
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.list);
list = (ListView) findViewById(R.id.list);
listLibros = new ArrayList<Libro>();
Libro libro;
//Aqui rellenamos solo con un libro, pero se puede descargar una lista de internet o
leyendo de base de datos por ejemplo.
libro = new Libro();
Libro.setTitulo("titulo");
Libro.setDescripcion("descripcion");
listLibros.add(libro);

//Ahora rellenamos el ListView
adapter = new ItemListAdapter(this, listLibros);
list.setAdapter(adapter);
//Posteriormente podemos aadir ms items a nuestro listview de la siguiente
forma

//primero aadimos ms objetos a nuestra lista
libro = new Libro();
Libro.setTitulo("titulo 2");
Libro.setDescripcion("descripcion 2");
listLibros.add(libro);

//y luego le decimos a nuestro adapter que notifique los cambios correspondientes y
que actualice los items del ListView
adapter.notifyDataSetChanged();

}

Lo primero a destacar es la forma de rellenar la lista de libros, aqu se hace de forma manual
pero ya hemos visto como acceder a datos a travs de un servicio web o mediante base de datos.

Empezamos como siempre, accediendo al layout que tiene nuestro ListView y haciendo
referencia a l con el objeto list. Luego inicializamos listLibros y aadimos los libros, en este
caso de forma manual.

Una vez rellenada la lista inicializamos en adapter un ItemListAdapter pasndole la Activity y la
lista de libros, y por ltimo seteamos el adaptador de nuestro ListView con nuestro
ItemListAdapter.

Hay veces que no tenemos todos los datos para el ListView y se van aadiendo ms datos
posteriormente. Actualizar el ListView en este caso es muy fcil. Simplemente aadiramos en
este caso ms libros a nuestra lista de Libros y luego le decimos a nuestro ItemListAdapter que
se han producido cambios y que debe actualizarlos mediante el
mtodo notifyDataSetChanged.
http://www.nosinmiubuntu.com/2012/11/items-personalizados-para-un-listview.html
Personalizar ListView en Android
por Jose el 10/05/2012
Llevo un tiempo trabajando con Android y aprendiendo a desarrollar software para
esta plataforma, as que creo que ya es momento de comenzar a realizar algunas
entradas sobre Android. Para comenzar vamos a ver como personalizar un ListView.
Android nos proporciona por defecto un par de estilos para los items que
aparecern dentro de un ListView. Pero si queremos personalizarlo ms, no
tenemos otra alternativa que programarlo nosotros mismos. Aunque pueda parecer
una tarea compleja es bastante sencillo realizar esta personalizacin. Supongamos
que queremos que los items sean como la siguiente imagen:

En ella podemos ver una imagen a la izquierda, un ttulo en la parte central, un
subtitulo con una fuente ms pequea en la parte inferior y de nuevo otra imagen
en la parte de la derecha. El ejemplo que vamos a realizar es una lista de la
compra, donde la imagen de la izquierda ser una foto del producto, el ttulo
principal ser el nombre del producto, el subtitulo ser el tipo de producto y la
imagen de la derecha ser simplemente un icono.
Lo primero que vamos a crear es un layout para organizar la disposicin de todos
estos elementos en la pantalla, as que creamos un nuevo fichero xml en la carpeta
layout al que llamaremoslist_item_layout.xml y en el que pondremos el siguiente
cdigo:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" >

<ImageView
android:id="@+id/imagen"
android:layout_centerInParent="true"/>

<TextView
android:id="@+id/nombre"
android:layout_centerHorizontal="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/tipo"
android:layout_below="@+id/nombre"
android:layout_centerHorizontal="true"

<ImageView
android:id="@+id/imageView1"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:src="@drawable/next" />

</RelativeLayout>
Como se puede ver hemos utilizado un RelativeLayout para organizar la
informacin, gracias a este layout organizamos el resto de los componentes
ajustndolos con l para dar el formato tal y como nos interesa. Para ello utilizamos
las
propiedades layout_alignParantLeft, layout_centerInParent,layout_alignPar
entTop, layout_centerHorizontal, layout_alignParentRight y layout_below.
Aunque la funcin de cada una de estas propiedades est bastante clara por su
nombre vamos a explicar que es lo que realizan:
layout_alignParantLeft, layout_alignParentTop y layout_alignParentRi
ght: alinean el componente a la parte izquierda, arriba o derecha del
componente padre que los contiene.
layout_centerInParent: centra el componente respecto al padre.
layout_below: coloca el componente debajo del componente cuyo id sea el
que indicamos.
Una vez aclarado estas propiedades, dentro del layout tenemos dos ImageView y
dos TextViewque sern los encargados de contener toda la informacin que nos
interesa. A todos estos componentes les asignamos las propiedades de layout que
hemos mencionado antes para ajustarlos como queramos y nos proporcionen el
aspecto que buscamos.
Una vez tenemos el layout vamos a definir el modelo de datos, para ello crearemos
una clase llamadaItemCompra.java y cuyo contenido ser el siguiente:
public class ItemCompra {
protected long id;
protected String rutaImagen;
protected String nombre;
protected String tipo;

public ItemCompra() {
this.nombre = "";
this.tipo = "";
this.rutaImagen = "";
}

public ItemCompra(long id, String nombre, String tipo) {
this.id = id;
this.tipo = tipo;
this.rutaImagen = "";
}

public ItemCompra(long id, String nombre, String tipo, String rutaImagen) {
this.id = id;
this.tipo = tipo;
this.rutaImagen = rutaImagen;
}

public long getId() {
return id;
}

public void setId(long id) {
this.id = id;
}

public String getRutaImagen() {
return rutaImagen;
}

public void setRutaImagen(String rutaImagen) {
this.rutaImagen = rutaImagen;
}

return nombre;
}

}

public String getTipo() {
return tipo;
}

public void setTipo(String tipo) {
this.tipo = tipo;
}
}
No creo que necesite explicacin, simplemente es una clase que contendr las
variables necesarias para almacenar los elementos que ms tarde queremos que
aparezcan en el ListView. Estos elementos sern el identificador, el nombre, el tipo
y la ruta de la imagen para poder mostrarla.
Despus de esto nos toca personalizar el adapter. Como sabrs, para rellenar un
ListView tenemos que pasarle un elemento de tipo Adapter con los datos
queremos que contenga el ListView. Normalmente para un ListView simple se utiliza
la clase ArrayAdapter, pero como nuestro ListView va a ser personalizado
tenemos que crear nuestro propio adapter. Para ello simplemente tenemos que
crear una clase derivada de BaseAdapter y sobrescribir los mtodos que contiene
esta clase abstracta. Creamos un fichero que
llamaremos ItemCompraAdapter.java y le aadimos el siguiente contenido:
public class ItemCompraAdapter extends BaseAdapter {
protected Activity activity;
protected ArrayList<ItemCompra> items;

public ItemCompraAdapter(Activity activity, ArrayList<ItemCompra> items) {
this.items = items;
}

@Override
return items.size();
}

@Override
return items.get(position);
}

@Override
return items.get(position).getId();
}

@Override
public View getView(int position, View contentView, ViewGroup parent) {
View vi=contentView;

if(contentView == null) {
LayoutInflater inflater = (LayoutInflater)
activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
vi = inflater.inflate(R.layout.list_item_layout, null);
}

ItemCompra item = items.get(position);

ImageView image = (ImageView) vi.findViewById(R.id.imagen);
int imageResource =
activity.getResources().getIdentifier(item.getRutaImagen(), null,
activity.getPackageName());

image.setImageDrawable(activity.getResources().getDrawable(imageResource));

TextView nombre = (TextView) vi.findViewById(R.id.nombre);
nombre.setText(item.getNombre());

TextView tipo = (TextView) vi.findViewById(R.id.tipo);
tipo.setText(item.getTipo());

return vi;
}
}
Esta clase contiene dos atributos: activity e items. Ambos son pasados al
constructor para inicializar el adapter. El atributo activity es necesario para poder
generar el layout que hemos creado anteriormente para nuestros item en el
ListView, mientras que el ArrayList de items contiene los elementos que se
mostrarn. A continuacin se sobrescriben los mtodos de la clase
abstracta,getCount tiene que devolver la cantidad de items que contiene el
adapter, esa cantidad la obtenemos desde el ArrayList que tenemos. El
mtodo getItem tiene que devolver el item que se encuentra en la posicin que se
pasa como parmetro, de nuevo gracias al ArrayList podemos obtener el item
correcto sin ningn tipo de problema. El mtodo que nos queda, getView, se
encarga de mostrar los items dentro del ListView. Este mtodo es algo ms
complejo as que creo que merece la pena explicarlo un poco.
getView es llamado cada vez que hay que pintar un item del ListView en la
pantalla del dispositivo. Lo que quiere decir que si tenemos 10 elementos en
nuestro ListView pero en la pantalla solo se visualizan 5 elementos, al comenzar la
aplicacin se llamada a getView 5 veces para mostrar esos 5 elementos. Conforme
realicemos scroll para recorrer el resto de elementos, se volver a llamar para
volver a pintar los elementos que se vean. Con esto en mente, lo primero que
hacemos es asignar el segundo parmetro llamado contentView a una variable
local para trabajar con el. El contentViewes la vista del item, es decir, como se va
a mostrar el item dentro del ListView. Si es null lo que tenemos que hacer es
inicializarlo, para ello obtenemos el LayoutInflater llamando al
mtodoactivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE). El
LayoutInflater se encarga de pasndole un recurso xml generar una vista para que
podamos trabajar con ella, por lo tanto con el LayoutInflater llamaremos al
mtodo inflate indicndole el recurso para el que queremos generar la vista, en
nuestro caso R.layout.list_item_layout. Una vez que la vista para el item est
inicializada o la hemos recibido ya inicializada recuperamos el item que vamos a
mostrar utilizando el primer parmetro que recibe el mtodo getView y el ArrayList
que tenemos con los items. A continuacin vamos recuperando los componentes de
la vista y rellenndolos con los datos adecuados. Comenzamos con la imagen del
elementos, obtenemos el componente con ayuda del mtodofindViewById a
continuacin obtenemos el identificador de la imagen a partir de los recursos de la
aplicacin, para ello usamos el mtodo getIdentifier habiendo obtenido los
recursos de la aplicacin previamente con el
mtodo activity.getResources. getIdentifier necesita que le pasemos como
primer parmetro la ruta donde se encuentra la imagen en los recursos y como
ltimo parmetro el nombre del paquete, el segundo parmetro lo podemos dejar a
null. Despus de esto le aplicamos la imagen al ImageView con el
mtodo setImageDrawable. Para obtener la imagen tendremos que pasar el
identificador del recurso al mtodo activity.getResources().getDrawable. Una
vez finalizado con la imagen, el texto del nombre y del tipo no tiene ningn
misterio, obtenemos los controles adecuados y les asignamos el texto con el
mtodo setText. Finalmente devolvemos la vista terminada de configurar.
Una vez terminado esto, el trabajo ms difcil ha sido completado, nos queda
configurar la pantalla principal de la aplicacin para indicar que muestre un
ListView. Para ello vamos al layout main.xaml y lo dejamos de la siguiente forma:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"

<ListView
android:id="@+id/listView" />
</LinearLayout>
Para acabar con el ejemplo vamos al fichero de inicio de la
aplicacin ListViewSampleActivity.java y escribimos lo siguiente:
class ListViewSampleActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.main);

ListView lv = (ListView)findViewById(R.id.listView);

ArrayList<ItemCompra> itemsCompra = obtenerItems();

ItemCompraAdapter adapter = new ItemCompraAdapter(this, itemsCompra);

lv.setAdapter(adapter);
}

private ArrayList<ItemCompra> obtenerItems() {
ArrayList<ItemCompra> items = new ArrayList<ItemCompra>();

items.add(new ItemCompra(1, "Patatas", "Tuberculo", "drawable/patatas"));
items.add(new ItemCompra(2, "Naranja", "Fruta", "drawable/naranjas"));
items.add(new ItemCompra(3, "Lechuga", "Verdura", "drawable/lechuga"));

return items;
}
}
La funcionalidad principal aqu es recuperar el ListView y obtener un ArrayList con
los elementos, en este ejemplo se ha optado por crear los elementos de uno en
uno, pero se pueden obtener desde una base de datos, desde un fichero o como
queramos. A continuacin se crea el adapter y finalmente se le asigna el adapter al
ListView. Con esto el resultado que obtenemos es el siguiente:

Como se ha podido ver, personalizar los items no es una tarea tan complicada
como podra parecer, lleva un poco de trabajo pero es bastante sencillo hacerlo.
Para descargar el ejemplo completo, podis hacerlo desde aqu.
Un androide del control ListView contiene varios valores desde el que los usuarios pueden
seleccionar. Cada control se crea en la interfaz de Android utiliza un ID nico. El ID se utiliza
para recuperar el control e identificar el elemento seleccionado por sus usuarios . Se utiliza el
elemento seleccionado para determinar la accin a tomar despus de la entrada del usuario.
Instrucciones
1
doble clic en el archivo " eclipse.exe " en su computadora para abrir el programa de desarrollo
de Android SDK . Abra el proyecto Android.
2 Haga doble clic en el archivo de cdigo fuente de Java que contiene su oyente men. Inicie el
cdigo mediante la creacin de una variable ListView que apunta al control ListView. Los
siguientes puntos de cdigo a un control ListView denominado "clientes" :
ListView lv = ( ListView ) findViewById ( R.id.customers ) ;
3
Crear un " ; oyente ", que se activa cuando los usuarios seleccionan un elemento . La siguiente
funcin crea un detector para los "clientes" ListView : < >
lv.setOnItemClickListener ( nueva OnItemClickListener () { public void onItemClick (
AdapterView customerAdapter , Ver pie de pgina, selectedInt int, long selectedLong ) {
}
4
Agregar la funcin que determina los tems seleccionados el cdigo siguiente recupera los
valores seleccionados : .
cadena listChoice = ( lv.getItemAtPosition ( selectedInt ) ) ;

Optimizacin de un ListView
jtristan mircoles, marzo 7, 2012 at 11:07AM 8 Comments Share Article
ListView y adapters.
En android disponemos de los Listview como forma de mostrar una lista de valores. En el
caso de que la lista de elementos abarque ms tamao que la pantalla, podremos
desplazarnos entre ellos mediante un scroll. Tambin podremos permitir que el ListView
admita la seleccin de uno o varios valores.

Para poder utilizar un ListView debemos entender como funcionan los adaptadores
(Adapters). Todos los controles de seleccin tienen una interfaz comn respecto al
manejo de datos. Estos son los adaptadores. Siendo ms concretos, un adaptador nos va
a permitir indicar qu tipo de datos vamos a pasar a la lista y cmo deseamos que se
visualicen esos datos en pantalla.
Centrndonos en la forma de pasar los datos al ListView los adaptadores ms usados son:
ArrayAdapter: pasaremos arrays de cualquier tipo de objetos as como colecciones list.
SimpleCursorAdapter: mapearemos las columnas de un cursor (por ejemplo, obtenido de
la consulta a una base de datos o a un ContentProvider) con las vistas correspondientes.

Veamos un ejemplo sencillo de uso de un ArrayAdapter:
1.final String[] valores =
2.new String[]{"Uno","Dos","Tres","Cuatro","Cinco"};
3.
4.ArrayAdapter adaptador =
5.new ArrayAdapter(this,
6.android.R.layout.simple_list_item_1, valores);
Podemos ver que estamos pasando tres valores al constructor. El primero es el contexto,
en este caso sera la propia actividad. En el segundo caso un identificador del layout que
queremos que forme la vista de una fila de nuestra lista. En este caso le pasamos un
layout compuesto simplemente por un textView, pero podemos pasar cualquier layout
predefinido en android o crearnos uno personalizado, como veremos ms adelante. En
tercer lugar le indicamos los datos que queremos que se muestren en ese layout.
Una vez declarado nuestro adaptador, simplemente le tenemos que asignar al listView y ya
tendramos preparada la lista.
1.ListView listaValores = (ListView)findViewById(R.id.listaValores);
2.listContactos.setAdapter(adaptador);
Si quisiesemos utilizar un SimpleCursorAdapter, la forma de hacerlo sera muy similar. En
el caso del cursor, vamos a aadir tambin el mapeo de sus columnas a las views del
listView (SimpleCursorAdapter(Context context, int layout, Cursor c, String[] from, int[] to)).
En el caso del ArrayAdapter, como le estamos pasando simplemente una columna de
valores, el mapeo es automtico.
01.String[] projection = new String[]{
02.Data._ID,
03.Data.DISPLAY_NAME,
04.Phone.TYPE,
05.Phone.NUMBER};
06.
07.Cursor cursor = this.managedQuery(
08.Data.CONTENT_URI,
09.projection,
10.Data.MIMETYPE + "= '" + Phone.CONTENT_ITEM_TYPE + "'"
11.+ " AND " + Phone.NUMBER + " IS NOT NULL",
12.null,
13.null);
Recuperamos en un cursor de un contentProvider datos relativos a nuestros contactos.
01.String[] columnas = new String[]{Data.DISPLAY_NAME,
02.Phone.NUMBER};
03.int[] id_views
= new int[]{ android.R.id.t
ext1, android.R.id.text2}
04.
05.SimpleCursorAdapter adaptador = new SimpleCursorAdapter(
06.this, android.R.layou
t.simple_list_item_2,
07.cursor,
08.columnas,
09.id_views);
Al constructor de un SimpleCursorAdapter debemos pasarle los siguientes parmetros:
el contexto.
el id del layout que queremos que se dibuje en el listview. En este caso le pasamos un
layout compuesto por dos textviews. Como podis ver, no estamos utilizando nuestra clase
R, sino la clase de android (android.R.layout.simple_list_item_2).
el cursor
Un array de string con las columnas del cursor que queremos que se visualicen. Aunque
nuestro cursor contiene cuatro tipo de datos slo vamos a mostrar el nombre del contacto
y el nmero de telfono.
Un array de enteros en el que realizamos el mapeo a los views.

ListActivity.
Android posee una clase que extiende de Activity y que est especialmente preparada
para trabajar con listas, ListActivity.
Si utilizamos un ListActivity no es necesario que nos declaremos un layout conteniendo un
listView. Se mostrar una actividad ocupada totalmente por un listView. En el caso de que
quisiesemos tener adems de un listview ms controles, como un textview o un button,
tendramos que crearnos dentro del layout un listView con el identificador android:list.
<ListView
android:id="@android:id/list"
android:layout_height="wrap_content">
</ListView>

Tambin podemos aadir al layout un textview con el identificador @android:id/empty. Si la
lista no muestra ningn valor se mostr el textView en el centro de la pantalla con los
atributos que hayamos indicado.
Para poder asignar el adaptador a nuestra ListActivity tenemos que utilizar el mtodo
setListAdapter(Adapter adapter).
ListViews personalizados.
En muchos casos, los layouts que trae android para un listView sern suficiente. Sin
embargo, es posible declararnos nuestros propios layouts. Imaginemos que queremos que
cada elemento de la fila contenga datos relativos a un usuario, como el nombre, el apellido
y la direccin. Para ello tenemos que crearnos nuestro propio layout.
Una vez creado el layout tendremos que sobreescribir la clase adapter para poder indicarle
el mapeo a cada una de las views. El mtodo que vamos a sobreescribir y nos va a
permitir cargar las filas es getView(int position, View convertView, ViewGroup parent) .
Este mtodo se llama cada vez que se carga una fila (con position nos indica que fila se
est cargando). Debemos devolver una view inflada con nuestro layout personalizado.
01.
02.private class UsuarioAdapter extends ArrayAdapter{
03.
04.Activity context;
05.
06.public UsuarioAdapter(Activity context) {
07.super(context, R.layout.usuariolayout,usuarios);
08.this.context = context;
09.}
10.
11.@Override
12.public View getView(int position, View convertView, ViewGroup
parent) {
13.
14.Usuario usuario;
15.usuario = usuarios.get(position);
16.View view = null;
17.
18.LayoutInflater inflate = context.getLayoutInflater();
19.view =
inflate.inflate(R.layout.usuariolayout,null);
20.TextView tvNombre =
(TextView)view.findViewById(R.id.tvNombre);
21.TextView tvApellido = (TextView)view.findViewById(R.id.tvApellido);
22.TextView tvDireccion =
(TextView)view.findViewById(R.id.tvDireccion);
23.
24.tvNombre.setText(usuario.getNombre());
25.tvApellido.setText(usuario.getApellido());
26.tvDireccion.setText(usuario.getDireccion());
27.
28.return view;
29.}
30.}
En primer lugar pasamos al constructor del ArrayAdapter el contexto, el identificador del
layout personalizado que vamos a cargar y el array con los valores.
A continuacin sobreescribimos el mtodo getView. Para ello, recogemos los valores de
nuestro arrayList para el elemento de la lista que se va a cargar. Despus, instanciamos el
fichero XML del layout en sus correspondientes objetos views.
1.
3.view =
inflate.inflate(R.layout.usuariolayout,null);
Slo nos queda crear los objetos que componen el layout, en este caso tres TextViews y
pasarles los valores del objeto Usuario que hemos obtenido de la posicin actual del array.
Optimizando ListView mediante ConvertView.
Cuando trabajamos con layouts personalizados, cada vez que se carga una fila estamos
creando un objeto. Si trabajamos con listas de muchos elementos tendremos un problema
de rendimiento pues vamos a generar una gran cantidad de objetos en memoria.
Con convertView podremos reutilizar los primeros objetos creados. Detalladamente, slo
crearemos tantos objetos como filas se visualizan en la pantalla sin hacer scroll. Cuando
nos desplacemos con el scroll, android obtendr la instancia del primer elemento que
dejamos de visualizar y lo utilizar para mostrar los datos del primer elemento que vamos
a ver con el scroll. Veamos una imagen que nos aclara rpidamente todo esto.

Os recomiendo que echis un vistazo al artculo de donde he sacado la imagen.
01.
parent) {
03.
04.Usuario usuario;
07.TextView tvNombre;
08.TextView tvApellido;
09.TextView tvDireccion;
10.if (convertView==null){
12.view = inflate.inflate(R.layout.usuariolayout,null);
13.tvNombre = (TextView)view.findViewById(R.id.tvNombre);
14.tvApellido = (TextView)view.findViewById(R.id.tvApellido);
15.tvDireccion = (TextView)view.findViewById(R.id.tvDireccion);
16.}else{
17.view = convertView;
18.}
19.tvNombre.setText(usuario.getNombre());
20.tvApellido.setText(usuario.getApellido());
21.tvDireccion.setText(usuario.getDireccion());
22.
23.return view;
24.}
Si el objeto convertView nos llega vaco es que estamos cargando las filas que se
visualizan en pantalla. Para inflar el layout y creamos los objetos views hacemos igual que
en el ejemplo anterior. Cuando el convertView est instanciado es que estamos utilizando
el scroll. En este caso no hace falta crearnos nuestro objeto view, sino que simplemente
recuperamos su instancia. Despus slo es necesario asignar los valores de nuestro array
en la posicin que vamos a mostrar y devolver el objeto view.
ConvertView es muy sencillo de usar y supone una mejora muy importante en el
rendimiento de nuestras listas as que es de uso obligatorio.
Optimizando un poco ms con el patrn ViewHolder.
Cada vez que utilizamos el mtodo findViewById() estamos realizando una operacin muy
cara en trminos de rendimiento. Tenemos que evitar utilizar este mtodo en la medida de
lo posible, y para ello, cuando trabajamos con nuestras listas disponemos del patrn
ViewHolder.
Nos crearemos una clase esttica con la cual manejaremos las referencias a los campos
que forman nuestro layout y de esta forma no tendremos que utilizar findViewById. Para
ello, adjuntaremos esta clase a cada fila mediante el mtodo setTag(). Cuando la fila sea
reutilizada podemos obtener el tag de esa fial con el mtodo getTag().
Es mucho ms eficiente utilizar convertView que el patrn viewHolder, pero ambos juntos
optimizan mucho un listView.
Veamos un ejemplo, adems de mostrar los datos del usuario, vamos a aadir un
checkbox para poder seleccionar o deseleccionar usuarios.
1.static class ViewHolder{
2.protected TextView tvNombre;
3.protected TextView tvApellido;
4.protected TextView tvDireccion;
5.protected CheckBox cbSeleccionado;
6.}
Nuestra clase ViewHolder slo va a contener los atributos para cada uno de nuestros
componentes en el layout.
01.@Override
parent) {
03.
04.Usuario usuario;
07.
08.if (convertView==null){
10.view = inflate.inflate(R.layout.usuariolayout,null);
11.final ViewHolder viewHolder= new ViewHolder();
12.viewHolder.tvNombre =
(TextView)view.findViewById(R.id.tvNombre);
13.viewHolder.tvApellido =
(TextView)view.findViewById(R.id.tvApellido);
14.viewHolder.tvDireccion =
(TextView)view.findViewById(R.id.tvDireccion);
15.viewHolder.cbSeleccionado =
(CheckBox)view.findViewById(R.id.cbSeleccionado);
16.viewHolder.cbSeleccionado.setOnCheckedChangeListener(
17.new CompoundButton.OnCheckedChangeListener() {
18.
19.@Override
20.public void onCheckedChanged(CompoundButton
buttonView,boolean isChecked) {
21.Usuario usuario = (Usuario)viewHolder.cbSeleccionado.getTag();
22.usuario.setSeleccionado(isChecked);
23.}
24.});
25.
26.view.setTag(viewHolder);
27.viewHolder.cbSeleccionado.setTag(usuarios.get(position));
28.}else{
29.view = convertView;
30.view.getTag()).cbSeleccionado.setTag(usuarios.get(position));
31.}
32.ViewHolder viewHolder = (ViewHolder) view.getTag();
33.viewHolder.tvNombre.setText(usuario.getNombre());
34.viewHolder.tvApellido.setText(usuario.getApellido());
35.viewHolder.tvDireccion.setText(usuario.getDireccion());
36.viewHolder.cbSeleccionado.setChecked(usuario.isSeleccionado());

37.
38.return view;
39.}
Cuando tenemos que crear el objeto view para la fila, guardamos las instancias de las
vistas que componen el layout en nuestro objeto viewHolder. Despus guardamos el
objeto en nuestra fila mediante setTag().
Como tambin queremos utlizar un checbox, implementamos su listener. Cuando hacemos
click en l, recuperamos el objeto usuario de esa fila que almacenaremos en el tag del
checkbox y marcamos el atributo seleccionado como seleccionado o no. Como vemos, el
mtodo tag nos permite almacenar cualquier objeto.
Cuando estamos reciclando una fila, recuperamos el objeto viewHolder mediante el
mtodo getTag() de nuestra view devuelva en el parmetro convertView. Ya slo nos
queda asignar el valor del objeto usuario a los atributos del viewHolder.
Crearnos secciones indexadas en la lista.
En una listView podemos hacer que al desplazarnos con el scroll podamos avanzar ms
rpido viendo adems algn elemento comn de las filas que las agrupe. Por ejemplo, si
utilizamos la agenda de contactos, podemos movernos entre ellos, viendo su primera letra.

Para poder movernos rpidamente con el scroll tendremos que poder el atributo xml del
listView fastScrollEnabled a true. Tambin podemos hacerlo mediante cdigo con
setFastScrollEnabled(boolean enabled).
Para visualizar el elemento comn deberemos implementar la interfaz SectionIndexer en
nuestra clase adaptador.
Esta interfaz nos obliga a implementar tres mtodos.
01.@Override
02.public int getPositionForSection(int section) {
03.return indexadores.get(secciones[section]);
04.}
05.
06.
07.@Override
08.public int getSectionForPosition(int position) {
09.return 1;
10.}
11.
12.@Override
13.public Object[] getSections() {
14.return secciones;
15.}
Para ello debemos de trabajar con una lista ordenada. Almacenaremos en un hashmap la
primera letra y la primera posicin donde se da. Como el hashmap no permite tener claves
duplicadas, slo vamos a tener un registro por letra.
La otra coleccin que tenemos que crear en un array, en este caso de strings, con todo el
conjunto de las primeras letras ordenadas. Estas las obtenemos de las claves del
hashmap. Las ordenamos y las pasamos a nuestro array.
01.class PaisesAdapter extends ArrayAdapter implementsSectionIndexer{
02.
03.Activity context = null;
04.HashMap indexadores;
05.String[] secciones;
06.
07.public PaisesAdapter(Activity context){
08.super(context, android.R.layout.simple_list_item_1,
paisesOrdenados);
09.this.context = context;
10.
11.indexadores = new HashMap();
12.int tamao = paisesOrdenados.length;
13.
14.String pais=null;
15.for (int i=0;i seccionParaLetras = indexadores.keySet();
16.ArrayList listSecciones
= new ArrayList(seccionParaLetras);
17.Collections.sort(listSecciones);
18.secciones = new String[listSecciones.size()];
19.listSecciones.toArray(secciones);
20.}
21.}
22.}
23.
Permalink Print Article | 1 Reference
tagged ListActivity, ListView in Artculos Android
References (1)
References allow you to track sources for this article, as well as articles that were written in
response to this article.
http://www.javahispano.org/android/2012/3/7/optimizacion-de-un-listview.html

Andriod Listview

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Andriod Listview

Caricato da

Copyright:

Formati disponibili

http://www.androidcurso.com/index.

Potrebbero piacerti anche