7.3.12

Tutorial Android parte 12: ListView con Android

Vamos a aprender a trabajar con un tipo de vista para mostrar listas de elementos de una forma muy elegante. Son los ListView.

Este tutorial está basado en el tutorial "Hello, views" de la documentación de Android SDK.

http://developer.android.com/resources/tutorials/views/hello-listview.html

Un ListView es un viewGroup que muestra una lista de ítems por los que te puedes desplazar gracias a un scroll.

En este ejemplo, crearemos una lista con scroll de nombres de países. Estos valores se leen de un array de strings. Después veremos cómo leerlo de un archivo de recursos (que es una solución mucho más elegante y reutilizable).


El código fuente de este tutorial podéis encontrarlo en la siguiente dirección:

https://sites.google.com/site/libreyextremo/codigo-fuente-tutorial-aprender-android-parte-12


Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloListView
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, ListView!
Package name: com.example.hellolistview
Create Activity: HelloListView

- Hacer click en Finish.

Ahora vamos a crear un fichero XML que llamaremos "list_item.xml" en el directorio "res/layout/".
Para ello pulsamos en la carpeta con el botón derecho y seleccionamos New -> File. Después ponemos el nombre del fichero “list_item.xml” y pulsamos Ok.

Dentro pondremos el siguiente código (que podéis copiar del tutorial original).







En este xml se define el aspecto de los ítems de la lista de elementos.

En la clase HelloListView.java vamos a definir que esta clase extiende la clase ListActivity. Para ello basta con cambiar la cabecera de la clase por la siguiente:

public class HelloListView extends ListActivity {


Además hay que poner el import de ListActivity:

import android.app.ListActivity;


Ahora vamos a agregar un array de strings con la lista de países en la definición de la clase:

static final String[] COUNTRIES = new String[] { 
"Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", 
"Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", 
"Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", 
"Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", 
"Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", 
"Bosnia and Herzegovina", "Botswana", "Bouvet Island", 
"Brazil", "British Indian Ocean Territory", 
"British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", 
"Cote d'Ivoire", "Cambodia", "Cameroon", "Canada", "Cape Verde", 
"Cayman Islands", "Central African Republic", "Chad", "Chile", "China", 
"Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", 
"Cook Islands", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", 
"Democratic Republic of the Congo", "Denmark", "Djibouti", "Dominica", "Dominican Republic", 
"East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", 
"Estonia", "Ethiopia", "Faeroe Islands", "Falkland Islands", "Fiji", "Finland", 
"Former Yugoslav Republic of Macedonia", "France", "French Guiana", "French Polynesia", 
"French Southern Territories", "Gabon", "Georgia", "Germany", "Ghana", "Gibraltar", 
"Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala", "Guinea", "Guinea-Bissau", 
"Guyana", "Haiti", "Heard Island and McDonald Islands", "Honduras", "Hong Kong", "Hungary", 
"Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", 
"Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos", 
"Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", 
"Macau", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", 
"Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Micronesia", "Moldova", 
"Monaco", "Mongolia", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", 
"Nauru", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", 
"Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "North Korea", "Northern Marianas", 
"Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", 
"Philippines", "Pitcairn Islands", "Poland", "Portugal", "Puerto Rico", "Qatar", 
"Reunion", "Romania", "Russia", "Rwanda", "Sqo Tome and Principe", "Saint Helena", 
"Saint Kitts and Nevis", "Saint Lucia", "Saint Pierre and Miquelon", 
"Saint Vincent and the Grenadines", "Samoa", "San Marino", "Saudi Arabia", "Senegal", 
"Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", 
"Somalia", "South Africa", "South Georgia and the South Sandwich Islands", "South Korea", 
"Spain", "Sri Lanka", "Sudan", "Suriname", "Svalbard and Jan Mayen", "Swaziland", "Sweden", 
"Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "The Bahamas", 
"The Gambia", "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", 
"Turkmenistan", "Turks and Caicos Islands", "Tuvalu", "Virgin Islands", "Uganda", 
"Ukraine", "United Arab Emirates", "United Kingdom", 
"United States", "United States Minor Outlying Islands", "Uruguay", "Uzbekistan", 
"Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Wallis and Futuna", "Western Sahara", 
"Yemen", "Yugoslavia", "Zambia", "Zimbabwe" };


Antes del siguiente paso vamos a agregar las librerías que necesitaremos:

import android.widget.Toast;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.TextView;
import android.view.View;


Ahora, vamos a poner el siguiente código en el método onCreate():

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setListAdapter(new ArrayAdapter(this, R.layout.list_item, COUNTRIES));
     ListView lv = getListView();  
     lv.setTextFilterEnabled(true);  
     lv.setOnItemClickListener(new OnItemClickListener() {    
      public void onItemClick(AdapterView parent, View view,        
        int position, long id) {      
       // When clicked, show a toast with the TextView text      
       Toast.makeText(getApplicationContext(), ((TextView) view).getText(),          
         Toast.LENGTH_SHORT).show();    
       }  
      });
     }    


En vez de setContentView se utiliza setListAdapter. De esta forma se añade un ListView que rellena la pantalla y que toma el formato de los items valores del fichero xml list_item.xml que hemos creado anteriormente. También recibe como parámetro la lista de nombres de países.

El método setTextFilterEnabled(boolean) indica si se activa el texto filtrado para este ListView. Al hacerlo, cuando se comience a escribir, se filtrarán los valores a mostrar.
El método setOnItemClickListener(OnItemClickListener) define que se hará cuando se haga click en un item. En este caso, al pulsar un ítem, se mostrará en una mensaje Toast el ítem pulsado.


Y ya podemos ejecutar el programa (menú Run -> Run).

Se puede desplazar por la lista. Al pulsar en un ítem aparece un mensaje Toast con el nombre del ítem pulsado.



Mejora

Se puede mejorar esta aplicación para que en vez de coger la lista de ítems de una variable de tipo array de strings, lo coja de un fichero xml. En el fichero res/values/strings.xml vamos a agregar la lista de países para que la coja de ahí. Para ello insertamos el siguiente código en este fichero (la lista de ítems es menor por comodidad para hacer este ejemplo):



    Hello World, HelloListView!
    Hello, ListView!
         
  Bahrain        
  Bangladesh        
  Barbados        
  Belarus        
  Belgium        
  Belize        
  Benin    
 




Y remplazamos la instrucción setAdapterList por esta otra:

String[] countries = getResources().getStringArray(R.array.countries_array);
setListAdapter(new ArrayAdapter(this, R.layout.list_item, countries));


Quedando así:

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     String[] countries = getResources().getStringArray(R.array.countries_array);
     setListAdapter(new ArrayAdapter(this, R.layout.list_item, countries));
     ListView lv = getListView();  
     lv.setTextFilterEnabled(true);  
     lv.setOnItemClickListener(new OnItemClickListener() {    
      public void onItemClick(AdapterView parent, View view,        
        int position, long id) {      
       // When clicked, show a toast with the TextView text      
       Toast.makeText(getApplicationContext(), ((TextView) view).getText(),          
         Toast.LENGTH_SHORT).show();    
       }  
      });
     }  



Si ahora lanzamos la aplicación, cogerá los nombres de los países del fichero xml en vez de la variable de tipo array de strings.


El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial aprender Android Parte 12.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).

7 comments:

  1. Gracias!, me ha sido de ayuda :)

    ReplyDelete
  2. Gracias por el manual. Tengo una dudilla:

    Pones que con el método setTextFilterEnabled(true) se activa el texto filtrado para este ListView. "Al hacerlo, cuando se comience a escribir, se filtrarán los valores a mostrar".

    Pero mi duda es, ¿cómo muestro la caja de texto para buscar? Por que así tal cuál, aunque pongas setTextFilterEnabled(true) no tiene uso alguno verdad?

    ReplyDelete
  3. Vamos a ver, cuando se pone un tutorial lo suyo es poner todo el código, no trozos...

    ReplyDelete
    Replies
    1. Hay un enlace al final de todos los artículos de esta serie donde te puedes descargar todo el código.

      Si no lo puedes ver, podrías decirme a través de qué navegador te conectas y si entras a través de teléfono móvil o de una tablet o de un pc.

      Gracias por tu comentario.

      Delete
  4. Se puede llenar un list view con Items diferentes?
    Es decir, si yo quiero que en un item haya una imagen y en otro NO se puede? , Ejemplo

    Lista:

    Imagen | Texto
    NO Imagen | Texto
    Imagen | Texto
    NO Imagen | Texto

    ReplyDelete
    Replies
    1. Hola

      ¿Has probado con AbsListView?

      http://developer.android.com/reference/android/widget/AbsListView.html

      Un saludo.

      Delete