ListView en Android

miércoles, 25 de mayo de 2011

En un post anterior en la serie sobre programación Android, vimos los tipos de vistas en Android y explicamos algunos de ellos. Sin embargo, quedó pendiente explicar en detalle la vista ListView en Android. ListView en Android es un tipo de vista en forma de lista, este tipo de vista es muy usada en la mayoría de aplicaciones Android.


Lo primero que debemos hacer es crear un proyecto Android en Eclipse. Una vez creado debemos cambiar la clase de la que heredamos de "Activity" a "ListActivity".

public class ListViewAndroid extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Sigue leyendo para ver como crear un ListView en Android.


Ahora vamos crear la vista en el archivo xml "main.xml" para incluir un ListView en Android. Debemos incluir el widget ListView como incluimos cualquier otro, excepto que vamos a darle un nombre estándar de android: "android:id="@android:id/list"".

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

Una vez que tenemos lista la vista para el ListView en Android, vamos a crear la clase que va a guardar el contenido de cada uno de los elementos del ListView, es decir, cada elemento del ListView va a ser una pequeña vista con los elementos que necesitemos. En este caso, para simplificar el ejemplo, vamos a tener tan solo un String en cada elemento de la lista, así la clase contenido debe quedarnos así.

package com.nosolounix.listviewandroid;

/**
 * @author marta
 *
 */
public class ListViewItem {

    private String title;

    public ListViewItem(String title) {
        super();
        this.title = title;
    }

    public String getTitle() {
        return title;
    }

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

En esta clase incluiremos cada elemento que vamos a incluir en cada item del ListView en Android. Ahora debemos crear la vista se va a cargar en cada elemento del ListView, en este caso tan solo vamos a tener un "TextView" que contendrá el título.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="6dip"
    android:background="@android:color/transparent"    
    android:id="@+id/item">
  
  <TextView android:id="@+id/title"
      android:layout_height="fill_parent"
      android:layout_width="fill_parent"
      android:text="item"/>
</RelativeLayout>

Ahora ya tenemos todo listo para volver a la clase java que hemos empezado al principio del post, la que hereda de ListActivity, en mi caso se llama "ListViewAndroid.java". Vamos a crear la clase ArrayAdapter que contendrá los elementos que vamos a cargar en la lista y va a gestionar todo lo relacionado con la misma.

public class ListViewAdapter extends ArrayAdapter<ListViewItem> {
        
        private ArrayList<ListViewItem> items;
        private ViewHolder holder;
        
        class ViewHolder {
            TextView title;
        }
        
        public ListViewAdapter(Context context, int textViewResourceId, ArrayList<ListViewItem> items) {
            super(context, textViewResourceId, items);
            this.items = items;
        }
        
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            
            if(v == null) {
                LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                v = vi.inflate(R.layout.listitem, null);
                
                holder = new ViewHolder();
                
                holder.title = (TextView) v.findViewById(R.id.title);
                v.setTag(holder);
            } else {
                holder = (ViewHolder) v.getTag();
            }
            ListViewItem listViewItem = items.get(position);
            
            holder.title.setText(listViewItem.getTitle());
            
            return v;
        }
    }

La clase ListViewAdapter contiene un holder que define cada elemento de la ListView, en el holder tenemos que incluir cada uno de los widgets que tenemos en la vista de cada elemento, en este caso tan solo el título. Luego, en la función "getView" cargamos en cada elemento de la lista la vista "listitem.xml" y escribimos en el TextView del título el texto que queremos mostrar.

Para terminar, tan solo debemos usar la clase ListViewAdapter, es decir, decirle a nuestro ListView que Adapter tiene que usar y cargarle los datos. En este ejemplo vamos a cargar unos datos a mano, pero en una aplicación real estos datos deberíamos cargarlos de una base de datos, Internet, una vista anterior, etc. Al final, la función "onCreate" de nuestra aplicación ListView en Android debería quedar algo así.

public class ListViewAndroid extends ListActivity {
    /** Called when the activity is first created. */
    private ListViewAdapter listViewAdapter;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        listViewAdapter = new ListViewAdapter(this, R.layout.listitem, new ArrayList<ListViewItem>());
        setListAdapter(listViewAdapter);
        
        ArrayList<ListViewItem> items = new ArrayList<ListViewItem>();
        items.add(new ListViewItem("NosoloUnix Elemento 1"));
        items.add(new ListViewItem("NosoloUnix Elemento 2"));
        items.add(new ListViewItem("NosoloUnix Elemento 3"));
        items.add(new ListViewItem("NosoloUnix Elemento 4"));
    }


Por último, si queremos realizar alguna acción al pinchar en un elemento del ListView en Android, debemos implementar la función "onListItemClick".

@Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
        // TODO Auto-generated method stub
        super.onListItemClick(l, v, position, id);
        Log.e("NoSoloUnix","Has seleccionado el elemento "+position);
    }

El resultado final de nuestro ListView en Android debe ser algo así.


¡Listo! Con esto ya tenemos listo nuestro ListView en Android.

Artículos relacionados


Comments

12 Responses to “ ListView en Android ”
Post a Comment | Enviar comentarios ( Atom )

Anónimo dijo...

Buenas:
He probado este codigo muchas veces, y no puedo lograr que funcione... Me sucede a mi solo?
Me genera un error en la línea:

(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)

he intentado agregarle un "getContext().getSystemService" ya que "getSystemService" por si solo no la toma como referencia valida...

Bueno, solo queia descargar la bronca de no poder hacerlo funcionar. Capaz a alguien mas le paso y me puede ayudar.
Saludos

14 de noviembre de 2011, 3:11
Marta dijo...

Hola Anonimo,

Prueba "Ctrl+Shift+O" por si es un problema de "Imports" y haz "clean" del proyecto.
Si con eso todavía tienes problemas, se más preciso.

Saludos!

14 de noviembre de 2011, 18:40
Anónimo dijo...

oie yo hago una consulta al abase de datos de mysql y lo meto a un clase de getters y setters lo que quiero es llenar el listview con la informacion que se trae esa clase y se muestre dependiendo la catidad que se haya traido tienes alguna idea de como meto esta informacion al adapter del listview y se llene conforme a la cantidad de la informcion ??? se serveria de gran ayuda gracias

4 de diciembre de 2011, 15:33
ale_doremi dijo...

Hola!! pueden subir el ejemplo a otro servidor?? ya que el FBI no me deja verlo... muchas gracias :)

(si pueden contéstenme a ale_doremi@yahoo.com.ar muuuuchas gracias)

2 de marzo de 2012, 5:03
Anónimo dijo...

Buenas Marta,

Antes de nada, gracias por exponer con tanta paciencia el tema de los ListView. Dicho esto, a mi también me da error el "getSystemService".

Ya prové con CTRL+SHIFT+O y sigue pasándome.

El error que pone es éste:
"The method getSystemService(String) is undefined for the type ListViewAdapte"

Y la única opción que me da es crear un método con ese nombre..

A ver si me ilustráis al respecto.
Gracias de antemano.
Pernorak.

17 de marzo de 2012, 21:14
Marta dijo...

@ale_doremi este post ya tiene un tiempo y no encuentro el código fuente, si alguno de los lectores se lo descargó, por favor, que se ponga en contacto con nosotros para volver a subirlo.

@Anónimo, es extraño que te falle una función tan básica de Android, prueba a hacer un "clean" del proyecto a ver si se te soluciona. Sino, vuelve a postear y a ver si lo arreglamos.

Saludos!

19 de marzo de 2012, 19:38
Mediv dijo...

Yo queria aprender como hacer una listview el ejercicio es muy facil de entender y aunque el codigo no es correcto me sirvio mucho de guia.

21 de abril de 2012, 5:40
Mediv dijo...

En la clase ListViewAdapter en el constructor la variable context se debe guardar de forma global porque luego la usaras en la parte de context.getSystemService que es la parte que a muchos les dio un dolor de cabeza por lo que lei

21 de abril de 2012, 5:43
Mediv dijo...

ahora en el listactivity esta mal el orden de las lineas de codigo.

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);



ArrayList items = new ArrayList();
items.add(new ListViewItem("NosoloUnix Elemento 1"));
items.add(new ListViewItem("NosoloUnix Elemento 2"));
items.add(new ListViewItem("NosoloUnix Elemento 3"));
items.add(new ListViewItem("NosoloUnix Elemento 4"));

listViewAdapter = new ListViewAdapter(this, R.layout.listitem, items);
setListAdapter(listViewAdapter);
}

21 de abril de 2012, 5:45
Mediv dijo...

Bueno sin mas que decir me despido agradeciendo tu aporte al conocimiento

21 de abril de 2012, 5:47
Alexa dijo...

LayoutInflater vi = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

14 de mayo de 2012, 22:54
Shank dijo...

¿Se puede en ves de llenar el listview desde un archivo xml como recurso?...es decir NosoloUnix Elemento 1...2...3...y 4 tenerlo escrito en un archivo xml o txt para caragarlo en el listview??ayudenme Gracias comunidad por sus resp.

4 de mayo de 2013, 6:20

Publicar un comentario en la entrada

Deja tu opinión realizando un comentario interesante. Cualquier intento de Spam no será admitido.