Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Controles de selección en Android: ListView

| | 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 selección en nuestro layout, necesitamos invocar al método setAdapter() para suministrar los datos y las vistas de cada ítem que contendrá la lista. Así como un listener a través del método setOnItemSelectedListener() para saber cuándo es que se ha seleccionado una opción. 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, sería una buena idea indicar que esta sea una subclase de ListActivity, en lugar de la clase Activity como lo hacemos regularmente.

Pasando al ejemplo práctico, vamos a realizar un demo que nos despliegue una lista de opciones y que podamos capturar la opción que el usuario seleccione cada vez que recorra la lista, y por último, veremos cómo es que podemos personalizar el aspecto visual de la misma.

1. Creamos un nuevo proyecto llamado ListDemo con la versión 2.2 de Android.

2. Modificamos el archivo main.xml del directorio res > layout en dónde agregaremos un TextView que nos servirá para mostrar la opción que seleccionemos de la lista y un ListView como te muestro a continuación:

3. Teniendo el layout, pasamos al código Java que deberá quedarte como sigue:

Explicamos el código. Lo primero que hacemos es crear tres variables, una de tipo ListView que nos servirá para

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.

Después, dentro del método onCreate() recuperamos el ListView y el TextView definidos en el XML en las variables declaradas líneas arriba. Paso siguiente es llenar la lista con las opciones, para lo cuál llamamos al método setAdapter() que recibe como parámetros el contexto en el cuál 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 acción 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 opción en el TextView.

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 más nuestras aplicaciones. Así que modificaremos nuestro ejemplo para que veas cómo se hace y puedas dar rienda suelta a tus habilidades de diseñador.

5. Vamos a crear un nuevo archivo XML dentro del directorio res > layout llamado list_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 línea:

Por la siguiente línea en dónde 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 sólo un pequeño ejemplo de lo que podemos hacer con las listas y con su personalización. Las posibilidades son muchas y todo depende de tu creatividad. Si quieres conocer más acerca de los atributos que nos permiten personalizar tipos de letra y diseños sobre los textos puedes consultar este artículo.

Descárgate el código fuente de este tutorial:

En el siguiente post vamos a aprender a utilizar el control de selección llamado Spinner. Espero que este artículo te haya sido de ayuda para empezar a crear tus propias listas de opciones en tus aplicaciones.

 

¿Te gustó este artículo? ¡Compártelo!


 

Comparte este post

Acerca de: Condesa

Desarrolladora de aplicaciones Android, freelance, apasionada de la tecnología, y precursora del crecimiento tecnológico en México.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • Pingback: Controles de selección en Android: Spinner | Androideity

  • Rober

    Muy bueno el post, hice algo similar para obtener los contactos, y los iba metiendo en un TextView, utilizando SimpleCursorAdapter, todo funcionaba perfecto, sólo que el TextView que había creado previamente me lo mostraba tantas veces como contactos tenía:

    Lista de contactos (este TextView sólo debería mostrarse una vez)
    Contacto 1
    Lista de contactos
    Contacto 2
    Lista de contactos
    Contacto 3
    … y así sucesivamente. ¿Me explico?
    http://imageshack.us/photo/my-images/4/captura1z.jpg/

    ¿Me podrías echar una mano por favor? Ya no sé qué más hacer.
    Gracias

    • Anonymous

      Hola qué tal Rober, pues primeramente necesitaría ver el trozo de código que estás utilizando para crear el TextView y ver de qué manera lo está agarrando tu layout. Como los contactos los generas dinámicamente (supongo) no debería tener ningún problema con que tengas un TextView como encabezado.
      Y con todo gusto en lo que pueda ayudarte :D saludos!

      • Rober

        Hola condesa, gracias por tu rápida respuesta, la verdad es que me estoy volviendo loco con el código, y agradecería mucho tu ayuda. El código es el siguiente:

        - – ListaContactos.java – -

        package com.aplicacion;

        import android.app.ListActivity;
        import android.database.Cursor;
        import android.os.Bundle;
        import android.provider.Contacts.People;
        import android.widget.ListAdapter;
        import android.widget.SimpleCursorAdapter;

        public class ListaContactos extends ListActivity {
        private ListAdapter adaptador;

        @Override
        public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Cursor c = this.getContentResolver().query(People.CONTENT_URI, null, null, null, null);
        this.startManagingCursor(c);

        String[] columnas = new String[] {People.NAME};
        int nombres[] = new int[] {R.id.nombre};

        adaptador = new SimpleCursorAdapter(this, R.layout.contactos, c, columnas, nombres);
        this.setListAdapter(adaptador);
        }
        }

        - – contactos.xml – -

        Muchas gracias de antemano. Saludos.

        • Anonymous

          He revisado tu código y te dejo mis observaciones….

          1. La razón por la que se repite tu TextView es porque a la hora que estás creando el adaptador: adaptador = new SimpleCursorAdapter(this, R.layout.contactos, c, columnas, nombres);
          El segundo parámetro es el que define cómo es que se verá CADA UNO de tus ítems… en este caso, contactos.xml abarca todos tus LinearLayouts anidados con sus controles correspondientes.
          2. Recuerda que mientras más elementos anides en el XML más lenta será de cargar tu aplicación, en la medida de lo posible evítalo, en este caso no me parece necesario trabajar el layout de esta forma.

          Solución que te recomiendo:

          1. Implementar una interfaz de usuario muy parecida a la que presenté en este post:

          2. Después, para que cada ítem de tu ListView pueda desplegar la imagen y nombre del contacto, puedes crear un archivo item.xml en dónde tengas la estructura:

          3. A la hora de implementar el adaptador, tu segundo parámetro quedaría R.layout.item.

          4. Con este cambio tu actividad ya no heredaría de ListActivity y tendrías que crear una variable de esta clase para que en lugar de la línea: this.setAdapter(adaptador); tengas objetoLista.setAdapter(adaptador);

          Espero que esta solución te ayude con tu problema, recuerda que hay muchas maneras de dar solución a algo, en otra cosa que te pueda ayudar aquí estamos, saludos!

          • Anonymous

            Notando que el formato de los comentarios no es muy óptimo para código XML…. la interfaz que te comenté sería:

            Layout 1:

            LinearLayout
            -TextView
            -ListView
            /LinearLayout

            Layout 2:

            LinearLayout
            -ImageView
            -TextView
            /LinearLayout
            :)

          • Rober

            Vale el código de los layouts lo tengo claro.
            Lo que me está costando es el de la actividad, porque al heredar de Activity, en lugar de ListActivity, mi código para obtener los contactos debería cambiarlo, ¿no?

            Me podrías ayudar un poco más con el código por favor, todavía estoy empezando y no tengo muy claro como implementarlo. Gracias condesa

          • Anonymous

            Si te empieza a generar problemas, lee con detenimiento este post, puede que te ayude bastante, si necesitas más ejemplos de código, revisa en stackoverflow.com ahí hay varios artículos de ListView, seguro encuentras algo :)

          • Rober

            Muchas gracias, voy a echarle un vistazo.

          • http://twitter.com/#!/condesa_sama Condesa

            De nada, cualquier otra cosa en la que te pueda ayudar aquí estamos. ¡Saludos!

          • Rober

            Ya está claro Condesa, después de muchas horas, por fin doy con la clave.

            Me respondo a mí mismo por si a alguien le pudiera ser de utilidad, y es que yo le había dado nombres id personalizados a los diferentes elementos del layout, y es que inexplicablemente el elemento ListView, tiene que llamarse sí o sí “list”, si se le cambia el nombre deja de funcionar.

            ¿Por casualidad sabrías decirme el por qué? Ahora tengo la curiosidad.

            Bueno muchas gracias por todo, saludos.

  • Pingback: Creando un servicio propio en Android | | AndroideityAndroideity

  • Eddis

    Hola, estoy creando una aplicación que lo que quiero que haga es que cuando seleccione un elemento de la lista, en vez de mostrarmelo en un text como en el ejemplo, me remita a un .xml. ¿Como podría hacer esto?

    Gracias!

    • Anonymous

      ¿Cómo a un XML? Osea a un recurso? :)

  • http://twitter.com/Ipzzer Israel Pérez

    Muchas Gracias Condesa. Me ha sido de mucha ayuda tu articulo. Algo me dice que me tardare unas horas aprendiendo por aquí. :)

    • Anonymous

      Se agradece, espero que encuentres material interesante que te ayude a conocer las bases en Android. :)

  • http://twitter.com/Ipzzer Israel Pérez

    Diras acabo de comentar y ya tan pronto me surgen dudas :)

    Pues este es mi interrogante.
    Acabo de terminar muy bien tu ejemplo, solo que en la ultima parte le agregue un Checkbox en vez de otro TextView en la linea:

    lv.setAdapter(new ArrayAdapter(this,R.layout.checkboxLayout,datos));

    Todo se visualiza bien hasta allí. Pero al probarlo dandole click a un Item no me lanza el evento que deberia mostrar el nombre de la opcion seleccionada en el Textview “seleccionado” y tambien agregue mas items al array y ahora al seleccionar el primer item se marca el checkbox del ultimo elemento en la lista.

    El array que tengo tiene 9 items.

    ¿Como puedo arreglar esto?

  • richisk8

    bien gracias

  • HRodash

    Hola, como hago para poder desplegar mas de 1 linea en los listview?

    • Anonymous

      ¿Te refieres a cada uno de las filas del ListView?

  • Hrodash

    Quiero colocar una imagen a la izquierda y luego varias lineas de texto a su derecha. Será posible hacer eso. he tenido mucho problema.

    • Anonymous

      Claro que es posible, puedes hacer uso de las propiedades de weight y gravity de los widgets o utilizar el contenedor RelativeLayout para definir en qué posición quieres desplegar tus widgets. Todo se trata de ir probando con los atributos que tienes disponibles. Saludos.

  • Jhon_limaster

    Hola tengo un problema serio con el ListView
    lo que tengo que hacer es una lista de contactos, las filas tienen que tener un checkbox , nombre del contacto, la idea es enviar varios un mismo sms a varios contactos para eso es el checkbox.
    ahora yo creo mi adaptador para la lista pero no funciona.
    quisiera saber como ccrear mis adaptadores para mi lista y si mis layout estan bien
    todo lo que tenga que ver con listview

  • Alejandro

    Tengo un Listview que muestra los contactos junto a un checkbox que al seleccionar me lanza el evento onListItemClick hasta ahi todo bien, pero al momento de agregarle una imagen para cada contacto ya no se activa el evento para mostrar la seleccion hecha.

    Con esto cargo mi listview
    ArrayAdapter adapter = new ArrayAdapter(this,
    R.layout.rowlayout, R.id.label, values1);
    setListAdapter(adapter);
    ListView listView = getListView();
    listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

    mi xml
    <ImageView

    <TextView

    <CheckBox

    pero esto ya no se ejecuta

    protected void onListItemClick(ListView l, View v, int position, long id)
    ojala me puedan dar una pista

  • Ramón martínez

    Un detalle para el Punto Nº 6.

    Dice: lv.setAdapter(new ArrayAdapter(this,R.layout.list_item,datos));

    Debería decir (en realidad me funcionó así)

    lv.setAdapter(new ArrayAdapter(this,R.layout.list_item, R.id.TextView,datos));

    Siendo R.id.TextView el ID del TextView que esté dentro del list_item.xml

  • Gerard Caceres

    Hola condece …

    me podrias dar alguna pista para poder averiguar como puedo darle un poco mas de estilo a la lista me refiero. algun marco con color o algo asi..

    otra pregunta como puedo poner un textview como no editable.. y despues regresarlo a editable.

    Gracias

    • condesa

      Hola,

      Para lo del marco podrías intentar dándole cierto color al padding del contenedor en dónde se encuentra la listView.

      De lo del TextView, estas son labels así que en primer lugar no se pueden editar por el usuario, esas son las EditText…

      Saludos.

  • David Manzano

    Hola Condesa
    necesito información de como meter publicidad en mi app
    agradeceré mucho tu ayuda

  • j4cky

    Buen tutorial Condesa, tengo una consulta, que crees que deba usar un GridView o ListView o quizas un TableLayout para mostrar datos algo asi como un DataGridView como en .net, que me permita eliminar si selecciono una fila.

    Gracias :)

    • condesa

      No ubico las DatgRIDview de .net

      Saludos

  • Enrix

    Quise agregarle un Arrow pero al darcle click se cierra el app :/

  • eduardo

    hola condesa

    oye tengo una duda. Tengo un ListView y quiero que al seleccionar un item de la lista que este pase por un if y despues inicie una nueva Activity.

    Escribi esto pero me marca error en el setClass()

    lv.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView arg0, View arg1, int arg2,
    long arg3) {

    if (lv.getItemAtPosition(arg2).equals(dv)) {
    -(Aqui el error)> Intent intent = new Intent().setClass(this, DatosVehiculo.class);
    startActivity(intent);
    }
    }

    });

    muchas gracias
    saludos

    • Ed

      El this,DatosVehiculo.class debe ir dentro del new Intent(). quedando asi

      Intent intent = new Intent(this,DatosVehiculo.class);

      startActivity(intent);

  • gabriela

    Hola soy nueva en esto, espero me puedas ayudar…

    este ejemplo como puedo hacerlo pero que los datos que muestre no los inserte en el código, si no que los extraiga de una base de datos sqlite