ListView en Android

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